* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: "Genty";
  src: url("../fonts/GentyDemo-Regular.ttf") format("truetype");
}

.glutenFont{
  font-family: "Gluten", cursive;
}

body {
  font-family: "Genty", sans-serif;
  background-color: #f4e0aa;  
}

body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background: #FFF1CB;
  border-radius: 5px;
  border: 2px solid white;
}

html {
  scroll-behavior: smooth;
}

.flex_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header {
  background-image: url("../images/navBg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.socialBtn{
  background-color: #FFF1CB;
  border: .1vw solid #242422;
  box-shadow: 1.57px 1.57px 0px 0px #3C3A3A;
  transition: .25s ease-in;
  -webkit-transition: .25s ease-in;
  -moz-transition: .25s ease-in;
  -ms-transition: .25s ease-in;
  -o-transition: .25s ease-in;
}

.socialBtn:hover{
  box-shadow: 0px 0px 0px 0px #3C3A3A;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
 
.titleHero{
  text-shadow: 0 0px 1vw rgba(0, 0, 0, 0.678);
}

.aboutContainer{
  background-image: url('../images/bgAbout.svg');
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top;
}

.aboutContainer h2{ 
  text-shadow: .3vw .6vw 0px #00000040;
}

.disclaimer::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  background-image: url("../images/navBg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

.float_animation {
  animation: float 7s ease-in-out infinite;
  -webkit-animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-1vw);
    -webkit-transform: translateY(-1vw);
    -moz-transform: translateY(-1vw);
    -ms-transform: translateY(-1vw);
    -o-transform: translateY(-1vw);
  }
  70% {
    transform: translateY(1vw);
    -webkit-transform: translateY(1vw);
    -moz-transform: translateY(1vw);
    -ms-transform: translateY(1vw);
    -o-transform: translateY(1vw);
  }
}

.zoomIn_animation {
  animation: zoomIn_animation 5s ease-in-out infinite;
  -webkit-animation: zoomIn_animation 5s ease-in-out infinite;
}

@keyframes zoomIn_animation {
  0%,
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
}

.rotateImg{
  animation: rotateImg 1s ease-in-out infinite;
  -webkit-animation: rotateImg 1s ease-in-out infinite;
}

@keyframes rotateImg {
  0%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  20%{
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
}
  30%{
    transform: rotate(-5deg); 
}
  50%{
    transform: rotate(5deg); 
}
  60%{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

}