:root {
   font-family: 'Hanken Grotesk', sans-serif;
   font-weight: 400;
   font-size: 16px;
   color: white;
   background-size: cover;
   background-color: black;
   background-image: url("assets/desktop.gif");
}

a {
   color: white;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

html, main {
	width: 100%;
	height: 100%;
}

body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}


.parent {
   display:flex;
   position:fixed;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
   justify-content:center;
   align-items:center;
   z-index: 1000;
}

.anebo-circle {
	width: auto;
	height: 100%;
   aspect-ratio: 1/1;
	max-width:100%;
	max-height:100%;
}

.about-us-section, .contact-section {
   display: block;
   position: fixed;
   max-width: 25vw;
   bottom: 0px;
}

.about-us-section {
   left: 0px;
   margin: 0 0 20px 20px;
}

h1.main-title {
   font-weight: 800;
}

h1 {
   font-weight: 400;
   font-size: 46px;
   margin: 0;
   line-height: 46px;
}

.contact-section {
   right: 0px;
   margin: 0 20px 20px 0;
   text-align: right;
}


@media (orientation: landscape) { img { height:100%; } }
@media (orientation: portrait) { img { width:100%; } }

@media (max-width: 1200px) { 
   .anebo-circle {
      transform: scale(1);
   }
}

@media (max-width: 1100px) { 
   h1 {
      font-size: 36px;
      line-height: 36px;
   }

   .about-us-section p {
      font-size: 16px;
   }

   :root {
      font-size: 14px;
   }
}

@media (max-width: 900px) { 
   #vid { 
      display: none;
   }
   
   #vid-mobile {
      display: block;
   }
}

@media (max-width: 850px) { 
   :root {
         background-image: url("assets/mobile.gif");
   }
   .about-us-section, .contact-section {
      max-width: 70vw;
   }
}

@media (max-width: 765px) { 
   .about-us-section {
      top: 40vh;
   }

   .contact-section {
      top: 67vh;
      text-align: left;
      margin: 0 0 20px 20px;
      right: unset;
   }

   .parent {
      justify-content:flex-start;
      align-items:flex-start;
   }

   .anebo-circle {
   width: 200px;
   height: 200px;
   max-width: 200px;
   max-height: 200px;
}