html {
  scroll-behavior: smooth;
}


body{
  background-color: black;
  display:flex;
  width:92%;
}



h1 {
  font-size: 150px;
  text-align: right;
  color: white;
   font-family: 'Blocus-Regular';
   font-weight: normal;
   font-style: normal;
  line-height: 140px;
  margin-right:12%;


}

h1:hover{
  color: #5e1616;
}


h2 {
  font-size: 65px;
  text-align: right;
  color: white;
   font-family: 'BagnardRegular';
   font-weight: normal;
   font-style: normal;
  line-height:0px;
  margin-right:12%;
  margin-top: 1%;

}

h3 {
  font-size: 20px;
  text-align: right;
  color: white;
   font-family: 'BagnardRegular';
   font-weight: normal;
   font-style: normal;
  line-height: 50px;
  margin-bottom:170px;
  margin-right:12%;

}

p{
  color: white;
  font-family: 'BagnardRegular';
 text-align: justify;
  font-size: 100%;
  margin-right:27%;
  margin-left:27%;
  text-indent:5%;
  line-height:25px;


}




h1{
  -webkit-animation-name: wiggle;
  -ms-animation-name: wiggle;
  -ms-animation-duration: 0.3s;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;

}

@-webkit-keyframes wiggle {
  0% {-webkit-transform: rotate(1deg);}
  25% {-webkit-transform: rotate(-0.5deg);}
  50% {-webkit-transform: rotate(2deg);}
  75% {-webkit-transform: rotate(-1deg);}
  100% {-webkit-transform: rotate(1deg);}
}

@-ms-keyframes wiggle {
0% {-webkit-transform: rotate(1deg);}
  25% {-webkit-transform: rotate(-0.5deg);}
  50% {-webkit-transform: rotate(2deg);}
  75% {-webkit-transform: rotate(-1deg);}
  100% {-webkit-transform: rotate(1deg);}
}

@keyframes wiggle {
0% {-webkit-transform: rotate(0.7deg);}
  25% {-webkit-transform: rotate(-0.5deg);}
  50% {-webkit-transform: rotate(2deg);}
  75% {-webkit-transform: rotate(-1deg);}
  100% {-webkit-transform: rotate(1deg);}
  }

  h4 {
  text-align: left;
  font-family: 'BagnardRegular', serif;
  color: white;
  margin-top: 100px;
  font-size: 80%;
  margin-right:27%;
  margin-left:27%;
  line-height: 20px;

  }


p:hover{
    -webkit-animation-name: wiggle;
    -ms-animation-name: wiggle;
    -ms-animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;

  }

  @-webkit-keyframes wiggle {
    0% {-webkit-transform: rotate(-1deg);}
    25% {-webkit-transform: rotate(0.5deg);}
    50% {-webkit-transform: rotate(-2deg);}
    75% {-webkit-transform: rotate(1deg);}
    100% {-webkit-transform: rotate(-1deg);}
  }

  @-ms-keyframes wiggle {
  0% {-webkit-transform: rotate(-1deg);}
    25% {-webkit-transform: rotate(0.5deg);}
    50% {-webkit-transform: rotate(-2deg);}
    75% {-webkit-transform: rotate(1deg);}
    100% {-webkit-transform: rotate(-1deg);}
  }

  @keyframes wiggle {
  0% {-webkit-transform: rotate(-0.7deg);}
    25% {-webkit-transform: rotate(0.5deg);}
    50% {-webkit-transform: rotate(-2deg);}
    75% {-webkit-transform: rotate(1deg);}
    100% {-webkit-transform: rotate(-1deg);}
    }


  @media screen and (max-width: 1300px)  {
    p, h4{
      margin-right:10%;
      margin-left:10%;
    }

  @media screen and (max-width: 700px)  {
    p,h4{
      margin-right:5%;
      margin-left:5%;
    }