@import url('https://fonts.googleapis.com/css?family=Rock+Salt&display=swap'); /* Import Font for Headers */


/* ---------------------------- Generally ------------------------------ */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif, 'Rock Salt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #FFCC1D;
  display:flex;
  flex-direction:column; 
}

html, body{
  overflow-x: hidden;
}


h1, h3, h4{
  font-family:'Rock Salt';
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* ---------------------------- Home-Screen ------------------------------ */

.welcomeSection{
  height: 100vh;
}

.cardSection{
  background-color: #FEF9A7;
  margin: 0;
}

.welCard{
  background: #FFCC1D;
  height: 100vh;
}

.cardLink{
  text-decoration: none;
  color : black;
}

.card-title{
  display: flex;             
  height: 20%;
  align-items: center;
  justify-content: center;
}

.cardSelArea:hover{
  transform: scale(1.01);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/* ---------------------------- History ------------------------------ */

.margin10{
  margin-bottom:10px; 
  margin-right:10px;
}

.hArticle p{
  text-align: justify;
}

.postImg{
  float: left;
}

.content-container Row{
  margin-left: 35%;
  margin-right: 35%;
}

.hContent{
  margin-top: 3%;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 3%;
  border-radius: 5px;
  background-color: #F5F5F5;
  /* background-color: rgba(255, 255, 255, 0.5); */
}

.hContent h1{
  text-align: center;
}

/* ---------------------------- WayToBeer ------------------------------ */

.wtbTitleArea{
  text-align: center;
}

.wtbArticle p{
  text-align: justify;
}

.wtbArticle ol{
  /* padding-left: 150px; */
  overflow: auto;
}

.wtbArticle ul{
  /* padding-left: 150px; */
  overflow: auto;
}

/* ---------------------------- Utensils ------------------------------ */

.uContainer{
  margin-top: 30px;
  margin-bottom: 20px;
}

.uMasonry{
  margin-bottom: 30px;
}

.uContainer h1{
  text-align: center;
  background-color: #F5F5F5;
  border-radius: 5px;
}

.uArticle p{
  margin-top: 15px;
}

.img-wrapper {
  overflow: hidden;
}
.hover-zoom img:hover {
  transform: scale(1.25);
}


/* ---------------------------- Impressum ------------------------------ */

.imprContainer{
  margin-top: 30px;
  margin-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

/* ---------------------------- About ------------------------------ */

.abContainer{
  margin-top: 30px;
  margin-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}


/* ---------------------------- Footer------------------------------ */

.footer{
  position:bottom;
  background-color: #E8E8CC;
  width: 100%;
  text-align: center;
  flex: 0 0 50px; 
  margin-top: auto;
}

/* ---------------------------- @Media Query ------------------------------ */

@media (any-pointer: coarse) {
  .uMasonry h1{
    font-size: 150%;
  }

  .uArticle img{
    max-width: 250px;
  }

  .conCardSection{
    justify-content: space-between;
    min-height: 1100px;
  }
  
  .content-container{
    position:relative;
  }

  .welCardText h5{
    font-size: 18px;
  }
}