/*UNIVERSAL*/

*{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight:300;
  max-width: 100vw;
  
}

html,body {margin: 0; width: 100%; background-color:#12171d;/*oldcolorwas12161c*/}
html {height: 100%;}

body {
  min-height: 100%; /*FIX FOUND - this fixed the repeat img only showing for part of the page, as the body was only reaching the viewport's pixel height when body was set to height: 100%; solution was to keep html as that setting, but set body to min-height 100% instead of definitive height to 100%*/
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /*prevent horizontal scroll bar*/
  /*star background*/
  background-image: url("/images/starV1frame1.png");
  background-repeat: repeat;
  background-attachment:fixed;
  /*TODO - play with these settings and consider animating the background img using method from STARTEST
  need to experiment with this more later (scrolling, animation with startest methods, full page coverage-FIX FOUND- min-height:100%; on body instead of height:100%;)*/
}

@media screen and (max-width: 850px){
  body {
    /*font-size: 12pt;*/
    /*font-size: calc(3vw+1em);*/
    background-size: 50%; /*fixes star density being too low on mobile*/
  }
}
@media screen and (min-width: 0px){
  :root {font-size: 12pt;  }
}
@media screen and (min-width: 365px){
  :root {font-size: 13pt;  }
}
@media screen and (min-width: 422px){
  :root {font-size: 14pt;  }
}
@media screen and (min-width: 506px){
  :root {font-size: 15pt;  }
}
@media screen and (min-width: 600px){
  :root {font-size: 16pt;  }
}
@media screen and (min-width: 700px){
  :root {font-size: 18pt;  }
}
@media screen and (min-width: 850px){
  :root {font-size: 20pt;  }
}
@media screen and (min-width: 1058px){
  :root {font-size: 22pt;  }
}
@media screen and (min-width: 1391px){
  :root {font-size: 24pt;  }
}
@media screen and (min-width: 1520px){
  :root {font-size: 26pt;  }
}
@media screen and (min-width: 2000px){
  :root {font-size: 30pt;  }
}
@media screen and (min-width: 3000px){
  :root {font-size: 36pt;  }
}
@media screen and (min-width: 3800px){
  :root {font-size: 40pt;  }
}

a:link, a:active{
  color: #e3f5ff;
}
a:visited{
  color: #e3f5ff;
}
a:hover{
  color: #e3f5ff3f;
}


/*nav*/
/*nav-desktop*/
nav {
  z-index: 29;
  align-self: end;
  margin-right: 5%;
  position: fixed;
  
}
  nav button{
    display: none;
    visibility: hidden;
    position: fixed;
    height: 0px;
    width: 0px;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 30;
  }
    #topnav {
      
      z-index: 10;
      display: flex;
      align-items: center;
      margin: 0;
      gap: 1rem;      
      list-style-type: none;
      background-color: #12171d9d;
      padding: .5rem;
      border-radius: .5rem;
    }  
    .topnav-item{list-style-type: none;}
    .topnav-link{
      z-index: 12; 
      font-weight: 500;
      text-decoration: none;
    }

    @media screen and (min-width: 850px){#topnav-link-home{visibility: hidden; display: none;}}
         
/*nav-mobile*/
 
  @media screen and (max-width: 850px) and (prefers-reduced-motion){
    #topnav-menu{
      translate: 0 0;
      opacity: 0;
      transition: opacity 500ms ease-in-out; 
      transition: translate 0s;

    }
  }
@media screen and (max-width: 850px){
    
  nav{z-index: 30; width: 40px; height: 40px; margin:0; padding: 0; top: 3px; right: 3px;}

  .hamburger-icon {z-index: 32; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;}
      .hamburger-icon-piece {
        z-index: 32;
        width: 25px;
        height: 5%;
        border: 1px solid white;
        background-color: #e3f5ff;
        border-radius: 1rem;
      }
  nav button{
    z-index: 33;
    display: block;
    visibility: visible;
    position: fixed;
    background: none;
    height: 40px;
    width: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    top: 4px;
    right: 3px;
  }
  #topnav-menu{
    width: 10rem; height: 14rem; margin: 0; position: fixed; top: 3px; right: 3px; /*fix: added measurements here instead of on nav element - this way the nav doesn't stay while only its content is translated*/
    z-index: 31;
    translate: 300vw 0;
    transition: translate 0.3s ease-in-out; 
  }
    #topnav {
      border: 2px inset white;
      margin-top: 2.5rem;
      z-index: 36;
      width: 100%;
      height: 100%;
      background-color: #12171df3;
      flex-direction: column;
      justify-content: space-evenly;
      font-size: large;
      align-items:flex-start; 
    }
          .topnav-link{width: 100%; display: inline-block;}
          .topnav-item{width: 100%; display: inline-block;}
  }

 
#topnav-open[aria-expanded="true"] ~ #topnav-menu {
  translate: 0; 
}

@media (prefers-reduced-motion){
  #topnav-open[aria-expanded="true"] ~ #topnav-menu {
    opacity: 1;
  }
}


/*header*/
                            
header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  min-height: 48px;
  align-items: center;
  justify-content: start;
  z-index: 29;
  border-bottom: 1px inset #e3f5ff;
  position: fixed;
  }
  #header-link{
      width: 70%; 
      height: 2.25rem;   
      display: flex;
      flex-direction: row;
      align-items: center;
      text-decoration: none;
      justify-content: start;

  }
      #header-h1 {align-items: center; font-size: 1rem;  font-weight: 500; color:#e3f5ff; padding-left: 20px;} 
      #tree-img {height: 2.25rem; width:2.34rem;} 


/*LOADSCREEN*/
      #loadcontainer{
          width: 100%;
          overflow-y: hidden;
          position: absolute;
          top: 0;
      }
          /*MOBILE*/
          @media screen and (min-width: 0px){
            #loadcontainer {height: calc(63rem + 120vw);} /*45 calculated in form section +9 more for added changes + orbit swirl buttons*/
            }     
          @media screen and (min-width: 550px){
          #loadcontainer {height: calc(50rem + 100vw);} /*45 calculated in form section +9 more for added changes + orbit swirl buttons*/
          }                                
          /*DESKTOP*/
          @media screen and (min-width: 850px){
          #loadcontainer {height: 80rem;} /*41 +9more for added changes ... */
          }
      .loadscreen {
          width: 100%;
          height: 100%;
          background-image: url("/images/starV1frame1.png");
          background-repeat: repeat;
          position: absolute;
          top: 0;
          transform: translateY(0);
          z-index: 20;
          display: flex;
          justify-content: center;
          animation: scrolldown 3s linear 1;
          animation-play-state: running;
          animation-iteration-count: 1;
          animation-fill-mode: both;
      }
      .loadscreen>img{
          width: 184px;
          height: 255px;
      }
      #loadscreen-notfirst{
          animation: scrolldown 2s linear 1;
          animation-play-state: running;
          animation-iteration-count: 1;
          animation-fill-mode: both;
      }
      @media screen and (max-width: 850px){
          @keyframes scrolldown {
          0%{transform: translateY(0);}
          20%{transform: translateY(10%);}
          100%{transform: translateY(100%); display: none; visibility: hidden;}
          }
      }
      @media screen and (min-width: 850px){
          @keyframes scrolldown {
          0%{transform: translateY(0);}
          20%{transform: translateY(10%)}
          100%{transform: translateY(100%); display: none; visibility: hidden;}
          }
      }
      @media screen and (prefers-reduced-motion){
        .loadscreen, #loadcontainer, .loadscreen>img {display: none; visibility: hidden;}
      }
/*main*/
main {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
} 

/*honeypot*/
.div-textinputs-company, .div-textinputs-company *{
  position: absolute;
  top: 0;
  left: -9999px;
  height: 1px;
  width: 1px;
}

/*sections*/
section {width: 100%; height:fit-content; z-index: 1;}

.heading{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 4rem;
padding-top: 2.5rem;
}
@media screen and (max-width: 450px){
  .heading{padding-top: 3rem;}
}
.heading h1{color: white; font-size: 2rem; text-align: center;}

/*form*/

/*total body height - for loadscreen container: 2.5rem + 4rem + 2x9x.25rem + 8x1rem + 4x2x.25rem + 6rem + 1rem + 2x.5rem + 1rem + 2x1rem + 1 rem + 2x1 rem (if mobile width: + 1rem + 2x1rem)
=38rem mobile, 35rem desktop (850px vw)
+7rem mobile and +6rem desktop for some reason to the total on each (discovered from testing of load container heights)
=45rem mobile, 41rem desktop

*/
#message:empty{
  display: none;}
#message{
  display: block; 
  color: #ffffffc4; background-color:#12171d; padding: .5rem; margin-top: .5rem; border-radius: .5rem; border: 1px dashed rgb(216, 200, 128); text-align: center;  align-self: center;}
  /*border green for good rgb(185, 216, 128)*/
  @media screen and (min-width: 900px){#message{border: 2px dashed rgb(216, 200, 128);}}
  
  @media screen and (min-width: 1651px){#message{max-width: 30vw;}}
    @media screen and (max-width: 1650px){#message{max-width: 35vw;}}
    @media screen and (max-width: 1300px){#message{max-width: 40vw;}}
    @media screen and (max-width: 1000px){#message{max-width: 45vw;}}
    @media screen and (max-width: 750px){#message{max-width: 50vw;}}
    @media screen and (max-width: 550px){#message{max-width: 55vw;}}
    @media screen and (max-width: 450px){#message{max-width: 65vw;}}


p.success{animation: fadeInOut 5s forwards; }/* Fade in 1s, stay 3s, fade out 1s - over 5 seconds */

/*fade out animation for success class p*/
@keyframes fadeInOut {
  0% {
    opacity: 0;  
    font-size: 0;   
  }
  20% {
    opacity: 1;
    font-size: 1rem;
  }
  80% {
      opacity: 1; 
      font-size: 1rem;
  }
  100% {
      opacity: 0; 
      font-size: 0;
  }
}

#contactForm{display: flex; flex-direction: column; height: fit-content; }
#contactForm input, #contactForm textarea{background-color: #12171d;}
#contactForm * {color: white; font-size: 1rem;}
#contactForm div, #contactForm fieldset{ margin: .25rem;}
.div-textinputs {width: 100%;}
    #textinputs-name{height: 2rem; width: 97%; padding: .5rem; box-sizing: border-box; border: 1px inset rgba(255, 255, 255, 0.753);}
    #textinputs-additionalinfo{height: 6rem; width: 97%; resize: none; padding: .5rem; box-sizing: border-box; border: 1px inset rgba(255, 255, 255, 0.753);}

#contactForm *::placeholder {color: #ffffffc4;}
fieldset{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.fieldset-mc{display:flex; flex-direction: column; width: 100%; align-items: center; justify-content: center;}
.mc-answerfield{width: 100%; height: 2rem; font-size: 1rem; text-align: center; background-color: #12171d; color: white; border: 1px inset rgba(255, 255, 255, 0.753);}
.contact-input{width: 80%; height: 2rem;}

.mc-radioinput{border-radius: .01rem; width: .75rem; height: .75rem; accent-color: #9acce7f8; opacity: 0; position: absolute;
}


#contactForm .fieldset-mc label{color: #e3f5ff; }
@media screen and (max-width: 850px){
  #contactForm .fieldset-mc label{ font-weight: 700;}
}
.fieldset-mc div{width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.fieldset-mc label {
  display: inline-block;
  color: black;
  background-color: #12171d;
  padding: 10px 20px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 2px solid #444;
  border-radius: 4px;
  width: 80%;
  text-align: center;
}

#reason-other-input {width: 80%; height: 2rem;}
#other-reason {width: 100%; height: 100%; text-align: center;}

#contactForm .mc-radioinput[type="radio"]:checked + label {
  background-color:#9acce7f8;
  border-color: #ddd;
  color: #12171d;
}
#contactForm .mc-radioinput[type="radio"]:focus + label {
  border: 3px solid #ddd; color: #12171d;
}
#contactForm .fieldset-mc label:hover {
background-color: #4b607a; color: #f3fbff;
}

#container-submitbutton{align-self: center;}
#container-submitbutton button{background-color: #12171d; border-radius: 1rem; border: 3px solid white; padding: .5rem; align-self: center;}





/*section - swirl animated buttons*/


#swirl-container{display:flex; width: 100%; z-index: 1; flex-wrap: wrap; justify-content: center;}
.swirl{width: 40%; z-index: 1; opacity: .8; position: relative; margin-bottom: -12%; aspect-ratio: 1/1;}

.swirl-image{border-radius: 50%; overflow: hidden; width: 100%; position: relative; top: 0; z-index: 1;}
  
.swirl-link{
  display: block; width: 25%; aspect-ratio: 1/1; height: auto; 
  justify-content: center; align-items: center; display: flex; 
  position: relative; top: -50%; left: 37%;
  border-radius: 50%;
  text-decoration: none;
  z-index: 5;
} 

.div-filler{display: block; width: 29%;}
.div-filler2{display: block; width: 15%;}


@media screen and (min-width: 550px){
  #swirl-container{display:flex; width: 80%; z-index: 1;}
  .swirl{ width: 30%} 
  }

#swirl-link1{
  background-image: url("/images/instacircular.png");
  background-size: cover;
  }

#swirl-link2{
  background-image: url("/images/facebook.png");
  background-size: cover;
  }
  
#swirl-link3{
  background-image: url("/images/tiktok.png");
  background-size: cover;
  }
#swirl-link4{
  background-image: url("/images/youtube.png");
  background-size: cover;
  }

    .swirl-link:link, .swirl-link:active{
      color: #fffdef;
    }
    .swirl-link:visited{
      color: #fffdef;
    }
    .swirl-link:hover, .swirl-link:focus{
      color: #a54a59; 
    }


@media screen and (min-width: 1000px){
  #swirl-container{
    width: 70%;
  }
}
@media screen and (min-width: 1500px){
  #swirl-container{
    width: 60%;
  }
}
@media screen and (min-width: 2500px){
  #swirl-container{
    width: 50%;
  }
}


/*filler*/
.span-filler{height: 6rem; width: 100%;}

/*footer*/
footer{z-index: 1; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100vw;}
  .footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  margin: 0;
  gap: 1rem;

  list-style-type: none;
  background-color: #12171d9d;
  padding: 1rem;
  border-radius: 1rem;
  }
      @media screen and (max-width: 850px){
      footer{display: grid; 
          grid-template-columns: repeat(1, 100%);     grid-template-rows: auto auto; 
          grid-template-areas: 
              "internals"
              "socials";    
          }
          #footer-internals{grid-area: internals;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: row;
              margin: 0;
              gap: 1rem;           
          
              list-style-type: none;
              background-color: #12171d9d;
              padding: 1rem;
              border-radius: 1rem;}
          #footer-socials{grid-area: socials;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: row;
              margin: 0;
              gap: 1rem;             
          
              list-style-type: none;
              background-color: #12171d9d;
              padding: 1rem;
              border-radius: 1rem;
          }
      }
          .footer-item{list-style-type: none;}
          .footer-link{
          z-index: 12; 
          font-weight: 500;
          text-decoration: none;
          }
          footer img {height: 1rem;}