@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@keyframes openctas {
    0% {
        opacity: 0;
        top: 30px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}

@keyframes openinfo {
    0% {
        opacity: 0;
        top: -620px;
    }

    100% {
        opacity: 1;
        top: -650px;
    }
}
@keyframes removeCurtin {
    0% {
        opacity: 0;
        scale: 0.8;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

@keyframes floatDown {
    0% {
        opacity: 0%;
        top: -15px;
    }

    100% {
        opacity: 100%;
        top: 0%;
    }
}

@keyframes floatUp {
    0% {
        opacity: 100%;
        top: 0%;
    }

    100% {
        opacity: 0%;
        top: -15px;
    }
}

@keyframes openPage {
    0% {
        opacity: 0;
        scale: 0.8;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

@keyframes closePage {
    0% {
        opacity: 1;
        scale: 1;
    }

    100% {
        opacity: 0;
        scale: 0.8;
    }
}







 .termsLink {
     color: #f06a85;
 }

 .openingCurtin {
     position: absolute;
     margin: auto;
     display: flex;
     left: 0;
     right: 0;
     top: 0;
     margin-top: -5px;
     width: calc(80% + 11px);
     height: 261px;
     animation: removeCurtin 0.2s ease-out forwards;
     transform-origin: center center;
 }

 .accountDark {
     display: none;
 }

 .welcome {
     color: #006c68;
 }

 .Xline,
 .Xline2 {
     background: #444;
 }

 .hamb-line,
 .hamb-line::after,
 .hamb-line::before {
     background: #444;
 }

 .wordhouse {
     background-color: #efefef;
 }

 .word {
     color: #444;
 }

 body {
     background: #eaeaea;
     color: #333;
     overflow-x: hidden;
 }

 header {
     background: #ffffff;
 }

 .imagedark {
     display: none;
 }

 nav a {
     color: #444;
 }

 .paragraph {
     color: #444;
 }

 footer {
     color: #444;
 }

 input[type=checkbox]:checked~.mobileMenu {
     background-color: white;
 }

 .mobileMenu {
     background-color: white;
 }

 h1,
 h2,
 h3 {
     color: #333;
 }

@media (max-width: 950px) {
    .welcome {
        display: none;
    }

    nav {
        display: none;
    }

    .heroA, .heroB {
        display: none;
    }

    .ctaa, ctab {
        width: 100vw;
    }

    .imagelight {
        display: none;
    }

    .featureList {
        display: block;
        width: 100%;
    }

    .featureList li {
        width: calc(90% - 20px);
        margin-left: 5%;
        margin-right: 5%;
        max-width: 100%;
    }

    .uses ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: space-around;
    }

    .microheros {
        display: inline-block;
        font-size: 75px;
        width: 100%;
    }

    .hero1, .hero2, .hero3 {
        height: 50px;
        color: white;
        font-style: italic;
        text-align: center;
        margin-top: 0;
        margin-bottom: 35px;
    }

    .ctas {
        width: 100%;
    }

    .ctaa, .ctab {
        display: block;
        width: 90%;
        margin-left: calc(5% - 10px);
        margin-right: calc(5% - 10px);
        margin-top: 15px;
    }
}

@media (max-width: 1100px) {
    .iframe-container {
            display: none;
    }

    header .navbar .iframe-container {
        display: none;
    }
    header .navbar .spacer {
        display: block;
        width: 100%;
    }
}

@media (min-width: 950px) {

    .accountDark,
    .accountLight {
        display: none;
    }

    .hamb {
        display: none;
    }

    .mobileMenu {
        display: none;
    }

    .X {
        display: none;
    }

    .spacer {
        display: none;
    }

    .imagesmall {
        display: none;
    }
    .featureList {
        display: flex;
        justify-content: space-around;
    }

    .featureList li {
        max-width: 25%;
        width: 25%;
        margin-left: 0;
        margin-right: 0;
    }

    .uses ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: space-around;
    }

    .microheros {
        display: none;
        padding: 15px;
    }

    .ctaa, .ctab {
        width: 250px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .ctas {
        width: 700px;
        margin-left: 15px;
    }
}

.microheros {
    margin-top: 100px;
}

.hero1, .hero2, .hero3 {
    position: relative;
    opacity: 0;

}

.hero1 {
    animation: openctas 1s forwards;
    animation-delay: 1s;
}

.hero2 {
    animation: openctas 1s forwards;
    animation-delay: 1.5s;
}

.hero3 {
    animation: openctas 1s forwards;
    animation-delay: 2s;
}

.imagesmall {
    margin-left: 15px;
}

.account {
    padding-left: 10px;
    width: 50px;
    display: inline-block
}

.accountDark,
.accountLight {
    padding: 0;
}

body {
    margin: 0;
    font-family: Raleway, Andale Mono;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /*background-image: linear-gradient(to bottom, #000, #000, #000, #000, #000,#333, #777, #fff, #fff);*/
    font-size: 20px;
}

code {
    font-family: Source Code Pro;
    font-weight: 400;
}

iframe {
    border: none;
    height: 100%;
    width: 100%;
}

.iframe-container {
    display: flex;
    flex-grow: 1;
    height: 100px;
}

.heros {
    position: relative;
    background-image: url("home_image.webp");
    color: white;
    height: 75vh;
}

.home_image {
    position: relative;
    top: 100px;
}

.heroA, .heroB {
    position: relative;
    top: 10%;
    margin-left: 15px;
    height: 50px;
    margin-top: 20px;
    margin-bottom: 5px;
}

.heroA {
    font-size: 60px;
    font-style: italic;
}

.heroB {
    font-size: 33px;
    margin-left: 25px;
}

.ctaa, .ctab {
    position: relative;
    background-color: #f06a85;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    opacity: 0;
    border: 2px solid #ffffff00;
}

.ctaa:hover, .ctab:hover {
    background-color: #ffffff;
    color: #f06a85;
    border: 2px solid #f06a85;
}

.ctas {
    margin-top: 20px;
    top: 10%;
    position: relative;
    display: block;
    justify-content: space-around;
}

.ctaa {
    animation: openctas 0.3s ease forwards;
    animation-delay: 1s;
}

.ctab {
    animation: openctas 0.3s ease forwards;
    animation-delay: 1.2s;
}

banner {
    color: #333;
    text-align: center;
    vertical-align: bottom;
    height: 100px;
    display: inline-block;
    padding-top: 30px;
    max-width: 900px;
}

banner i {
    color: #f06a85;
}

.divider {
    width: 90%;
    height: 2px;
    margin: 190px 0 0px 0px;
    background-color: #f06a85;
}


.features {
    top: -00px;
    position: relative;
}

.featureList {
    /*display: flex;
    justify-content: space-around;*/
    padding: 0;
    top: 30px;
}

.featureList li h3 {
    color: #f06a85;
}

.featureList li {
    position: relative;
    padding: 10px;
    list-style: none;
    background-color: #ffffff;
    /*max-width: 25%;*/
    animation: openctas 0.3s forwards;
    opacity: 0;
    border: solid #f06a85;
    border-width: 0 0 0 2px;
}
.featureList li:nth-child(1) {
animation-delay: 1s;
}
.featureList li:nth-child(2) {
    animation-delay: 1.2s;
}
.featureList li:nth-child(3) {
    animation-delay: 1.4s;
}

.uses {
    top: 30px;
}

.uses  ul {
    /*display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-around;*/
    padding: 0;
}

.uses ul li {
    padding: 10px;
    background-color: #ffffff;
    list-style: none;
    margin: 5%;
    top: 30px;
    position: relative;
    opacity: 0;
    border: solid #f06a85;
    border-width: 0 0 0 2px;
}

.uses li h3 {
    color: #f06a85;
}

.uses p {
margin-left: 50px;
}

.useList li:nth-child(1) {
    animation: openctas 0.3s forwards;
    animation-delay: 1s;
}
.useList li:nth-child(2) {
    animation: openctas 0.3s forwards;
    animation-delay: 1.2s;
}
.useList li:nth-child(3) {
    animation: openctas 0.3s forwards;
    animation-delay: 1.4s;
}
.useList li:nth-child(4) {
    animation: openctas 0.3s forwards;
    animation-delay: 1.6s;
}

.updates {
    background-color: #ffffff;
    padding: 10px;
    margin: 2.5%;
    padding-bottom: 40px;
    opacity: 0;
    position: relative;
    animation: openctas 0.3s forwards;
    animation-delay: 1s;
    border: #f06a85 solid;
    border-width: 0 0 0 2px;
}

.updateList {
    padding-bottom: 3px;
}

.updates h3 {
margin-left: 50px;
color: #f06a85;
}

.updates .contact-email {
    color: #f06a85;
    text-decoration: none;
}


h2 {
    margin-block-end: 0;
    margin-left: 50px;
    margin-top: 5px;
}

.info {
display: block;
position: relative;
padding: 10px;
list-style: none;
background-color: #ffffff;
max-width: 25%;
animation: openinfo 0.3s forwards;
opacity: 0;
border: solid #f06a85;
border-width: 0 0 0 2px;
margin: 30px;
width: 80%;
top: -620px;
}

.info h3 {
    color: #f06a85;
}

.info a {
    color: #f06a85;
    text-decoration: none;
}

.termsLink {
    text-decoration: none;
}

.pageContent {
    flex: 1;
}

.container {
    width: 80%;
    margin: 0 auto;

}

.contentDivider {
    width: 90%;
    margin-top: 30px;
    margin-bottom: 35px;
    height: 1px;
    background-color: #888;
    position: relative;
    display: block;
}

.navbar {
    display: flex;
}

header {
    border-radius: 0px;
    width: 100%;
    height: 100px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 10;
}

.welcome {
    position: absolute;
    left: 130px;
    top: 0;
}

input[type="submit"] {
    display: none;
}

header::after {
    content: '';
    display: table;
    clear: both;

}
.navback {
    width: 0;
    height: 0;
    position: fixed;
    top: 0;
    z-index: 1;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0), #eaeaea, #eaeaea);
}
.headContainer {
    width: 100%;
}
.logo {
    float: left;
    margin-left: 70px;
    padding: 0;
}

nav {
    float: right;
    height: 100px;
    right: 0;
}

nav ul {
    margin: 0;
    padding: 0;
    margin-right: 2px;
    list-style: none;
    height: 50px;
    padding-top: 25px;
    display: flex;
}

nav li {
    opacity: 0;
    animation: removeCurtin 0.3s ease-out forwards;
    display: inline-flex;
    flex-direction: row;
    /*margin-right: 70px; */
    width: 150px;
    height: 50px;
    position: relative;
}

nav li:nth-child(1) {
    animation-delay: 0ms;
}

nav li:nth-child(2) {
    animation-delay: 0.1s;
}

nav li:nth-child(3) {
    animation-delay: 0.2s;
}

nav li:nth-child(4) {
    animation-delay: 0.3s;
}

nav li:nth-child(5) {
    animation-delay: 0.4s;
}

/*nav li {
      border: 0px solid #444;
      border-style: inset;
    }
    nav li:hover {
      border: 2px solid #444;
    } */
/* Here Next 2 should be .link  */
nav li::before {
    content: '';
    position: absolute;
    top: 0px;
    right: -2px;
    bottom: 0px;
    left: -2px;
    border: 0px solid #444;
    /* Transparent border initially */
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.2s ease;
    /* Add a transition for a smoother effect */
}

nav a {
    text-align: center;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding-top: 17px;
    transition: all ease 0.3s;
    text-decoration: none;
    font-size: 19px;
}

/*
    nav a::before {
  
      display: block;
      content: '';
      width: 0%;
      height: 5px;
      position: absolute;
      top: 0;
      background-color: #444;
      transition: all ease-in-out 250ms; 
  
    }
  
    nav a:hover::before {
      width: 100%;
      height: 5px; 
    } 
  */

  

input[type=submit] {
    display: block;
    padding: 100px;
    margin: 100px;
    height: 30px;
    width: 70px;
    color: #03FFB6;



}

.wordContainer {
    position: relative;
    z-index: -1;
}
.wordhouse {
    position: absolute;
    display: flex;
    /*margin-left: 10%;
    margin-top: 1%;
    margin-right: 10%; */
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    width: 80%;
    height: 250px;
    animation: removeCurtin 0.3s ease-out forwards;
    transform-origin: center center;
}

.wordhouse .word {
    margin: 0 auto;

    padding: 20px;
    width: 80%;
    text-align: center;

}

.paragraph {
    margin-top: 1%;
    margin-left: 1%;
    margin-right: 1%;

}



footer {
    position: relative;
    left: 1%;
    bottom: 0px;
    padding-bottom: 10px;
    padding-top: 10px;
    max-width: 1200px;
}

footer ul {
    padding: 0;
    margin: 0;
    
}

footer p {
    margin: 0;
}

footer ul li {
    display: inline-block;
    padding: 5px;
    /*max-height: 25px;*/
}

.X {
    cursor: pointer;
    float: right;
    padding-top: 23px;
    padding-right: 25px;
    transition: all 250ms ease-out;
    transition-delay: 0.5s;
    pointer-events: none;
}

.Xline {
    height: 2px;
    width: 24px;
    display: block;
    position: relative;
    rotate: -45deg;
    right: -50px;
    opacity: 0%;
    transition: all 250ms ease-out;
    transition-delay: 0.25s;
}

.Xline2 {
    height: 2px;
    width: 24px;
    display: block;
    position: relative;
    rotate: 45deg;
    bottom: 2px;
    right: -50px;
    opacity: 0%;
    transition: all 250ms ease-out;
    transition-delay: 0.25s;
}

/* Menu Icon */
.hamb {
    cursor: pointer;
    float: right;
    padding: 10px;
    height: 5px;
    top: 37px;
    position: relative;
}

/* Style label tag */

.hamb-line {
    display: block;
    height: 2px;
    position: relative;
    
    width: 22px;
    transition: all 250ms ease-out;
    right: 0px;
    animation-delay: 0.5s;
    opacity: 100%;
    pointer-events: none;
    animation: removeCurtin 0.3s ease-out forwards;
}

/* Style span tag */

.hamb-line::before {
    content: '';
    display: block;
    height: 100%;
    position: relative;
    float: right;
    transition: all 250ms ease-out;
    width: 140%;
    right: 0px;
    animation-delay: 1s;
    opacity: 100%;
    animation: removeCurtin 0.3s ease-out forwards;
}

.hamb-line::after {
    content: '';
    display: block;
    height: 100%;
    position: relative;
    transition: all 250ms ease-out;
    float: right;
    width: 140%;
    right: 0px;
    animation-delay: 0s;
    opacity: 100%;
    animation: removeCurtin 0.3s ease-out forwards;

}

.hamb-line::before {
    top: 5px;
}

.hamb-line::after {
    top: -7px;
}

.side-menu {
    display: none;
}

/* Hide checkbox */



input[type=checkbox]:checked~.mobileMenu {
    height: 100%;
    transition-delay: 0s;
}

input[type=checkbox]:checked~.mobileMenu {
    display: list-item;
}

input[type=checkbox]:checked~body {
    filter: blur(10px);
}

@media (min-width: 950px) {
    .hamb {
        display: none;
    }
}

.side-menu:checked~.hamb {
    left: -10px;
    padding: 15px;
}

.side-menu:checked~.hamb .hamb-line {
    /*right: 250px;
      opacity: 0%; */
    /*animation: closePage 0.3s ease-out forwards;*/
    width: 0px;

}

.side-menu:checked~.hamb .hamb-line::before {
    /* right: -12px;
      opacity: 0%; */
    /*animation: closePage 0.3s ease-out forwards;*/
    width: 30.8px;
    transform: rotateZ(45deg);
    top: -4px;
    left: 15px;
}

.side-menu:checked~.hamb .hamb-line::after {
    /* right: 12px;
      opacity: 0%; */
    /*animation: closePage 0.3s ease-out forwards;*/
    width: 30.8px;
    transform: rotateZ(-45deg);
    top: -6px;
    left: 15px;
}

.side-menu:checked~.X .Xline {
    /*opacity: 100%; */
    animation: removeCurtin 0.3s ease-out forwards;
}

.side-menu:checked~.X .Xline2 {
    /*opacity: 100%; */
    animation: removeCurtin 0.3s ease-out forwards;
}


.mobileMenu {
    top: 100px;

    @media (min-width: 950px) {
        display: none;
    }

    display: block;
    height: 0px;
    width: 100%;
    margin-left: 0%;
    margin-bottom: -100%;
    transition: all 250ms;
    transition-delay: 0.7s;
    overflow: hidden;
    text-align: center;
    position: fixed;

    z-index: 5;
}

.mobileMenu ul {
    left: 0;
    width: 100%;
    display: block;
}

.mobileMenu ul li {
    right: 0;
    width: 100%;
    margin-left: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin: 0;
}

.mobileMenu ul li a {
    float: left;
    width: 100%;
    height: 100%;
    text-align: left;
    text-indent: 50px;
}

.mobileMenu ul li:nth-child(1) {
    animation: floatUp 0.3s backwards;
    animation-delay: 0.1s;
}

.mobileMenu ul li:nth-child(2) {
    animation: floatUp 0.4s backwards;
    animation-delay: 0.2s;
}

.mobileMenu ul li:nth-child(3) {
    animation: floatUp 0.5s backwards;
    animation-delay: 0.3s;
}

.mobileMenu ul li:nth-child(4) {
    animation: floatUp 0.6s backwards;
    animation-delay: 0.4s;
}

.mobileMenu ul li:nth-child(5) {
    animation: floatUp 0.7s backwards;
    animation-delay: 0.5s;
}

input[type=checkbox]:checked~.mobileMenu ul li:nth-child(1) {
    animation: floatDown 0.3s forwards;
    animation-delay: 0.1s;
}

input[type=checkbox]:checked~.mobileMenu ul li:nth-child(2) {
    animation: floatDown 0.4s forwards;
    animation-delay: 0.2s;
}

input[type=checkbox]:checked~.mobileMenu ul li:nth-child(3) {
    animation: floatDown 0.5s forwards;
    animation-delay: 0.3s;
}

input[type=checkbox]:checked~.mobileMenu ul li:nth-child(4) {
    animation: floatDown 0.6s forwards;
    animation-delay: 0.4s;
}

input[type=checkbox]:checked~.mobileMenu ul li:nth-child(5) {
    animation: floatDown 0.7s forwards;
    animation-delay: 0.5s;
}


.mobileMenu li {
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: 20%;
    margin-right: 20%;
}