html {
    background-color: #ffffff;
    max-width: 100%;
  overflow-x: hidden;

    }

.container{
    max-width: 700px;
    padding: 25px;
    
}

.container-specs{
  max-width: 1000px;
  padding: 25px;
  
}

.container-large{
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  padding: 25px;
  position: relative;
  top: -80px;
}

.container-large-bottom{
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  padding: 25px;
  position: relative;
  bottom: -80px;
  z-index: 9;
}

.container-small{
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  padding: 25px;
  position: relative;
  top: -80px;
}



.container-full{
  max-width: 100%;
  padding: 0px 20px 0px 20px;
}

.segment-spacing{
  height: 140px;
}


/* borders */

.has-border-top{
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.has-border-left{
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
  }

  .has-border-right{
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
  }
  

/* Text styles */
@font-face {
  font-family: mainFont;
  src: url(MINERVAMODERNRegular.otf);
}

.title{
    font-family: mainFont;
    font-size: 45px;
    line-height: 1.3;
    text-decoration: none;
}

.title-nolastalign {
  text-align-last: left;
}


.subtitle{
  font-family: "Work Sans", sans-serif;
      line-height: 1.7;
}

.handwriting{
    font-family: 'Caveat', cursive;
    line-height: 1.5;
}

.title-nolastalign {
  text-align-last: left;
}


/* link styles */

hr {
  border: none;
  height: 1px;
  /* Set the hr color */
  color: #ffffff; /* old IE */
  background-color: #ffffff; /* Modern Browsers */
}

a.link-animation {
  color: #000000;
  position: relative;
  text-decoration: none;
}

a:link { 
  text-decoration: none; 
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}

a.link-fullwidth {
  display: block;
}

a.link-animation::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #5C4738;
  top: 20px;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

a.nav-row::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #5C4738;
  top: 35px;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

a.link-fullwidth::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: #5C4738;
  top: 51px;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

a.no-link-animation::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  border-radius: 0px;
  background-color: #000000;
  top: 48px;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

a.link-animation:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.link-underline-sandy { 
  text-decoration: underline;
  text-decoration-color: #F7F0E0;
}

.link-underline-turqouise { 
  text-decoration: underline;
  text-decoration-color: #006B6B;
}

/* content body animations */




#cover-main{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 8888;

}

#cover-text{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  z-index: 9999;
}


#cover-sub-0{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: relative; margin-top: 0;
  z-index: 9999;
  transition: 2s;

}


#cover-sub{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: relative; top: 0;
  z-index: 1000;
}



#cover-sub-1{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: relative; top: 0;
  z-index: 5000;
}

#cover-sub-2{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: relative; top: 0;
  z-index: 5100;
}

#cover-sub-video{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: relative; top: 0;
  z-index: 99999;
}

#cover-sub-3{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: relative; top: 0;
  z-index: 5200;
}

#cover-0 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 99;
}

#cover-1 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 200;
}

#cover-2 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 200;
}

#cover-3 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 300;
}

#cover-4 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 400;
}

#cover-5 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 500;
}

#cover-6 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 600;
}

#cover-7 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 700;
}

#cover-8 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 800;
}

#cover-9 {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 900;
}

#cover-contact {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  position: sticky; top: 0;
  z-index: 999999;
}



/* intro lines cover */

#intro-line-1{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  opacity : 0;
  z-index: 100;
  transition: 1s;
}

#intro-line-2{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  opacity : 0;
  z-index: 100;
  transition: 1s;
}

#intro-line-3{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  opacity : 0;
  z-index: 100;
  transition: 1s;
}

#intro-line-4{
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  opacity : 0;
  z-index: 100;
  transition: 1s;
}



/* background covers */


.has-background-cover{
  color: #ffffff;
  background:  url("../img/cover-0.jpg"); /* The least supported option. */
  background-repeat: no-repeat; 
  background-position: center center; 
  background-size:cover;
}


/* Background colors */

.has-background-earth{
    background-color: #EFDBB2;
}

.has-background-sandy{
  background-color: #F7F0E0;
}
.has-background-wood{
    background-color: #5C4738;
}

.has-background-rust{
    background-color: #C25E1C;
}
.has-background-turqouise{
    background-color: #006B6B;
}
.has-background-white{
    background-color: #ffffff;
}
.has-background-ash{
    background-color: #fafafa;
}
.has-background-green{
    background-color: #256D28;
}

.has-background-turmeric{
  background-color: #D3A21C;
}

.has-background-moon{
  background-color: #5a6351;
}


.has-background-light-fade{
  background: linear-gradient(360deg, #ECECEC 0%, rgba(236, 236, 236, 0.00) 100%);
}

/* link hovers */
.has-text-rust-hover {
  color: black; /* Set the initial color */
  text-decoration: none; /* Remove default underline */
  transition: color 0.5s ease; /* Add transition for color and text-decoration */
  text-decoration: solid;
}

.has-text-rust-hover:hover {
  color: #D3A21C; /* Change color on hover */
}

/* Text colors */

.has-text-earth{
    color: #EFDBB2;
}
.has-text-wood{
    color: #5C4738;
}
.has-text-rust{
    color: #C25E1C;
}
.has-text-turqouise{
    color: #5CB8B2;
}
.has-text-white{
    color: #ffffff;
}

.has-text-moon{
  color: #5a6351;
}

.has-text-green{
  color: #256D28;
}

.has-text-turmeric{
  color: #D3A21C;
}

/* text hilights */

.has-text-highlight-white {
  position: relative;
}

.has-text-highlight-white::before {
  /* Highlight color */
  background-color: #ffffff;

  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: 60%;
  top: -1px;
  left: -2px;
  bottom: 0;
  z-index: -1;
  transform: rotate(-2deg);
}





   /*genral styles */

   .has-image-centered {
    margin-left: auto;
    margin-right: auto;
    }

    .has-item-centered {
      margin-top: auto;
      margin-bottom: auto;
      
      }
    
    .has-text-item-centered {
    margin-top: auto;
    margin-bottom: auto;
    }
    
      #is-nav-logo{
      max-height: 70px;
      max-width: 250px;
    }

    #is-nav-logo-mini{
      max-height: 75px;
      max-width: 70px;

    }
  /* Boxes */
@media (max-width: 1023px) {

    .container-medium{
        max-width: 650px;
    }

    .container-large{
        max-width: 800px;
    }

    .title{
        font-family: mainFont;
        font-size: 45px;
        line-height: 1.3;
    }

  }

  .title-contact{
    font-family: mainFont;
    font-size: 30px;
    line-height: 1.3;
}

 

  @media (max-width: 768px) {
    .container{
        max-width: 350px;
        padding: 5px;
    }
  
    .title{
        font-family: mainFont;
        font-size: 23px;
        line-height: 1.3;
    }

    .title-contact{
      font-family: mainFont;
      font-size: 20px;
      line-height: 1.3;
  }

  }



  .outer{
    width: 300px;
    position:absolute;
    animation: floatup 20s linear infinite, sideways 20s linear infinite, change 10s linear infinite alternate;
  }
  .animationbox {
    width: 300px;
    display: flex;
    perspective: 300px;
    margin-right:200px;
  }
  
  .animationbox::before,
  .animationbox::after {
    content: "";
    padding-top: 56%;
    flex: 1;
   background-image: url("https://i.ibb.co/NyW5nW4/Group-1-9.png");
    background-size: 200% 100%;
    animation: left 0.5s linear infinite alternate;
    transform-origin: right;
  }
  
  .animationbox::after {
    background-position: right;
    animation-name: right;
    transform-origin: left;
  }
  
  @keyframes left {
    from {
      transform: translateZ(80px) rotateY(-10deg)
    }
    to {
      transform:translateZ(0px) rotateY(50deg) 
    }
  }
  
  @keyframes right {
    from { 
      transform: translateZ(80px) rotateY(10deg)
    }
    to {
      transform:translateZ(0px) rotateY(-50deg) 
    }
  }
  
  @keyframes flutter {
    from{ 
      margin-left: 0;
      margin-top:100%; 
      }
    to{
      margin-left: 100%;
      margin-top:0;
      }
    }
  
  @keyframes floatup{
    0% {top: 100%;}
    50% {top: (random(100) * 1%);}
    100% {top:-300px;}
  }
  @keyframes sideways{
    from {left: (random(100) * 1px);}
    50%{left: (random(100) * 1%);}
    to{left: (random(100) * 10px);}
  }
  @keyframes change{
    from {transform: rotate((random(5) * 5deg));}
    to {transform: rotate(45deg);}
  }
  
  #body-lines{
    z-index: 88888;
    position:fixed;
    top:0;
    width:100%;
    

    transition: 1s;
  }
  
  #header-nav {
    z-index: 89999;
    position:fixed;
    top:0;
    width:100%;
    
    opacity : 0;
    transition: 1s;
    }

    #footer-nav {
      z-index: 99999;
    
    position:fixed;
    bottom:0;
    width:100%;
    }

    

    
 
  /* sticky content styles */

  .category,
  .mainbox,
  .endbox {
    position: -webkit-sticky; /* Required for Safari */
    position: sticky;
  }

  .category {
    top: 0;
    z-index: 5000;

  }

  .mainbox {
    
    top: 0;
  }

  .endbox {
    bottom: 100px;
    z-index: -1;
  }

  article {
    margin: auto auto 50px auto;
  }

  .endbox {
    bottom: 100px;
    z-index: -1;
  }