html, body, #root, .App {
  text-align: center;
  background-color: #78bafd !important;
  background: linear-gradient(180deg, #6DBEF3 0%, #A5D9F8 40.68%, rgba(214, 238, 252, 0.17) 70.57%, rgba(255, 255, 255, 0) 94.1%);

}
#root p {
  background: #0000002b;
  backdrop-filter: blur(15px);
  border-radius: 85px;
  margin-top: 601px;
  color: white;
  font-family: 'Bebas Neue', cursive;
  width: 54%;

}
* {
  box-sizing: border-box;

}

.root h1 {
  font-family: 'Acme', sans-serif;
  margin: auto;
}

.root {
  height: 100vh;
  position: sticky;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.sunny {
  top: 41px;
  left: 336px;
  position: absolute;
  width: 190px;
  z-index: -4;
}


.clouds{
  width:10000px;
  height: 1080px;
  background: transparent url(/assets/clouds2.png) repeat;
  position: absolute;
    right: 0;
    top: -52px;
    bottom: 0;
    z-index: -3;

   -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}

.plane {
  animation: shake 6s ease-out infinite;
  position: absolute;
  width: 250px;
  margin-top: -376px;
  transform: rotate(8deg);
}

.planeContainer {
  position: initial;
}
.header {
    width: 700px;
}

.headerContainer {
    position: initial;
}

.textContainer {
  font-size: 25px;
  color: white;
  font-family: 'Bebas Neue', cursive;
  background: #0000002b;

  backdrop-filter: blur(28px);
  border-radius: 85px;
  width: 110%;
  height: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    border-radius: 85px;
}

.movingBg {
  width: auto;
  display: initial;
  justify-content: center;
  align-items: flex-end;
}
@keyframes shake {

65% { transform: translateY(-5px) rotate(5deg) }
65% { transform: translateY(-5px) rotate(-5deg) }
  35% {
      transform: translate(5px, 20px);
   }

}

@keyframes float {
  50% {
     transform: translate(5px, 20px);
  }
}
@keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to { 
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}
@-webkit-keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to { 
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

@-moz-keyframes move-background {    
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to { 
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

    @-webkit-keyframes move-background {
  from {
    -webkit-transform: translate3d(0px, 0px, 0px);
  }
  to { 
    -webkit-transform: translate3d(1000px, 0px, 0px);
  }
}

a{
font-size: 35px;
text-decoration: none;
border: 3px solid #3b5998;
width: 70px;
height: 70px;
border-radius: 50%;
color: #3b5998;
background: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}

i{
transition: 0.4s;
}


a:after{
content: '';
width: 70px;
height: 70px;
padding: 0px;
position: absolute;
z-index: 1;
background: #3b5998;
border-radius: 50%;
transform: scale(0);
transition: 0.4s;
}

a:hover:after{
transform: scale(1);
}

a:hover i{
color: #fff !important;
z-index: 55;
}

a:hover{
box-shadow: 0 0 20px blue;
}

a:hover{
transform: scale(1.2);
transition: 0.2s;
}


.Twitter{
border-color: #00acee;
margin-left: 20px;
}

.fa-twitter{
color: #00acee !important;
}

.Twitter:after{
background: #00acee;
}

.Twitter:hover{
box-shadow: 0 0 20px #00acee;
}


.fa-instagram{
color: #3f729b !important;
}

.Instagram{
border-color: #3f729b;
margin-left: 20px;
}

.Instagram:after{
background: #3f729b;
}

.Instagram:hover{
box-shadow: 0 0 20px #3f729b;
}

.Instagram:hover .fa-instagram{
color: #fff !important;
}
.socialIcons{
position: absolute;
top: auto;
left: 50%;
transform: translate(-35%, 10%);
}

.textContainer{
margin-top: -146px;
    color: white;
    font-family: 'Bebas Neue', cursive;
}

@media only screen and (max-width: 600px) {
  .plane {
      left: initial;
      width: 155px;
      margin-top: -200px;
  }

  .socialIcons{
      position: initial;
      top: 80%;
      left: inherit;
      transform: initial;
  }
  .movingBg{
      text-align: center;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  
  }
  .headerContainer{
      width: initial;
      position: initial;
  }

  .header {
      width: 100%;
  }
  .root {
      height: 100vh;
      position: sticky;
      display: flex;
      flex-direction: initial; 
      align-items: center;
  }

  .textContainer {
      margin-top: auto;
      width: auto;
      padding: 20px;
      margin-bottom: 16px;
  }
  .sunny {
    top: 41px;
    left: -85px;
    position: absolute;
    width: 190px;
    z-index: -4;
}
.logoContainer {
  margin-top: 230px;
}
}
@media only screen and (max-width: 1000px) {
}