/* index.html CSS Code */




/*Link Decoration Code*/

a { text-decoration: none; color: black;}
a:visited { text-decoration: none; color: black;}
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none;}




/*Element Code */

html {
    margin: 0   auto;
    scrollbar-width: none;
    scroll-behavior:smooth;
}

body {
    margin: 0 auto;
}

li span{
    position: relative;
    left: 6.50%;
}



/*Classes*/

/*Use this on any element that expands past the viewport*/
.clip{
    overflow: clip;
}

.backgrounddiv{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(white 55%, rgba(183, 248, 252, 0.824));
    box-shadow: 0px 0px 2vw rgba(0, 0, 0, 0.4);
    border-radius: 1%;
    animation:
     getbigger 1.5s ease 1s both,
     getbiggeragain 1.5s ease 4s forwards;
}

.headliner--background{
margin: 0 auto;
width: 100%;
height: 100%;
}

.headliner--words {
    text-align: center;
    position: absolute;
    max-width: 20%;
    margin: 0 auto;
    margin-left: 2%;
    text-decoration: underline;
    text-underline-offset: 20%;
    padding-top: 2%;
    padding-bottom: 3%;
    font-size: 2vw;
    letter-spacing: 7px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.432);
}

.welcome1{
    margin: 0 auto;
    text-align: center;
    width: 50%;
    font-size: 3.5vw;
    padding-top: 5%;
    padding-bottom: 5%;

    animation: fadein 3s ease both;
}

.welcome2sub{
    margin: 0 auto;
    width: 50%;
    text-align: center;
    color: rgb(71, 71, 71);
    font-size: 1.65vw;
    animation: fadein 3s ease 2s both;
    padding-bottom: 5%;
}

.button{
    margin: 0 auto;
    text-align: center;
    width: 50%;
    padding: 2.5%;
    font-size: 2vw;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 20px;
    text-decoration: none;
    text-decoration-line: none;
    animation: buttonfadein 1.5s ease 5s both;
}

.whatyougetdiv{
    margin-right: 97.5%;
    margin-top: 10%;
    border-radius: 10px;
    margin-left: 2.5%;
    width: 63.5%;
    box-shadow: inset 0vw 0vw 1.5vw rgba(183, 221, 252, 0.824), 0vw 0vw 0.2vw rgba(0, 0, 0, 0.315) ;
    background-image: linear-gradient(white 90%, rgba(183, 221, 252, 0.824));
}

.whatyougetheader{
    margin: auto;
    padding-left: 4%;
    padding-top: 3%;
    font-size: 2vw;
}

.whatyouget{
    margin: auto;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 10.25%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.whyggdiv{
    margin-top: 10%;
    margin-left: 34%;
    border-radius: 10px;
    width: 63.5%;
    box-shadow: inset 0vw 0vw 1.5vw rgba(41, 132, 250, 0.824), 0vw 0vw 0.2vw rgba(0, 0, 0, 0.315) ;
    background-image: linear-gradient(white 90%, rgba(41, 132, 250, 0.824));
}

.whyggheader{
    margin: auto;
    margin-left: 66%;
    padding-top: 3%;
    font-size: 2vw;
}

.whyggpar{
    margin: auto;
    text-align: center;
    width: 85%;
    padding-top: 5%;
    padding-bottom: 1%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.whyggpar1{
    margin: auto;
    text-align: center;
    width: 85%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.whyggpar2{
    margin: auto;
    text-align: center;
    width: 85%;
    padding-top: 1%;
    padding-bottom: 1%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.wixprice{
    margin: auto;
    position: absolute;
    margin-left: 17%;
    font-size: 2vw;
    margin-top: 9%;
}

.wixlogo{
    margin: auto;
    width:100%;
}

.wixlogolink{
    margin: auto;
    position: absolute;
    width: 10%;
    margin-left: 15%;
    margin-top: 3%;
}

.squareprice{
    margin: auto;
    position: absolute;
    margin-left: 39%;
    font-size: 2vw;
    margin-top: 9%;
}

.squarelogo{
    margin: auto;
    width: 100%;
}

.squarelogolink{
    position: absolute;
    width: 6.80%;
    margin-left: 39%;
    margin-top: 2%;
}

.bigbreak{
    margin: auto;
    padding-top: 10%;
    padding-bottom: 20%;
    padding-left: 10.25%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.howstartdiv{   
    margin-right: 97.5%;
    margin-top: 10%;
    border-radius: 10px;
    margin-left: 2.5%;
    width: 63.5%;
    box-shadow: inset 0vw 0vw 1.5vw rgba(18, 73, 255, 0.822), 0vw 0vw 0.2vw rgba(0, 0, 0, 0.315) ;
    background-image: linear-gradient(white 90%, rgba(18, 73, 255, 0.822));
}

.howstartheader{
    margin: auto;
    padding-left: 4%;
    padding-top: 3%;
    font-size: 2vw;
}

.howstartpar{
    margin: auto;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 7.5%;
    padding-right: 7.5%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.templatesdiv{
    margin: auto;
    margin-top: 10%;
    margin-left: 25%;
    border-radius: 10px;
    width: 50%;
    box-shadow: inset 0vw 0vw 1.5vw rgb(255, 179, 36), 0vw 0vw 0.2vw rgba(0, 0, 0, 0.315) ;
}

.templateone{
    margin: auto;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 10%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.templatetwo{
    margin: auto;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 10%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}

.templatethree{
    margin: auto;
    padding-top: 10%;
    padding-bottom: 10%;
    padding-left: 10%;
    font-size: 1.5vw;
    letter-spacing: 1px;
}
/*Animations*/

@keyframes getbigger {
    from{
        padding-bottom:0%
    }
    to{
        padding-bottom:2%
    }
    }

@keyframes getbiggeragain {
    from {
        padding-bottom:2%
    }
    to{
        padding-bottom: 6%;
    }
    }

@keyframes fadein {
    0%{
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
    }

@keyframes makeroomforbutton {
    from{padding-bottom: 0px;}
    to{    padding-bottom: 75px;}
    }

@keyframes buttonfadein {
    from{opacity: 0%;}
    to{opacity: 100%;}
    }

@keyframes keyframemargin {
    from{
        margin-top: 10%;
    }
    to{
        margin-top: 5%;
    }
    }

@keyframes reversekeyframemargin{
    from{
        margin-top: 5%;
    }
    to{
        margin-top: 10%;
    }
    }

@keyframes fsto1kwelcome {
    from{
        font-size: 3.5vw;
    }

    to{
        font-size:4.5vw;
    }
    }

@keyframes fsto1kwelcomesub {
    from{
        font-size: 1.65vw;
    } 
    to{
        font-size: 2vw;
    }
    }

@keyframes fsto1kwelcome2 {
        from{
            font-size: 4.5vw;
            width: 50%;
        }
    
        to{
            font-size:5.5vw;
            width: 75%;
        }
        }
    
@keyframes fsto1kwelcomesub2 {
        from{
            font-size: 2vw;
            width: 50%;
        } 
        to{
            font-size: 2.85vw;
            width: 55%;
        }
        }

@keyframes wygw {
    from{
        width: 63.5%;
    }
    to{
        width: 80%;
    }
}

@keyframes wygw2 {
    from{
        width: 80%;
    }
    to{
        width: 95%;
    }
}

@keyframes whyggw {
    from{
        width: 63.5%;
        margin-left: 34%
    }
    to{
        width: 80%;
        margin-left: 17.25%
    }
}

@keyframes whyggw2 {
    from{
        width: 80%;
        margin-left: 17.25%
    }
    to{
        width: 95%;
        margin-left: 2.5%
    }
}

@keyframes whyggwwixprice{
    from{
        margin-left: 10.5%;
    }
    to{
        margin-left: 21%;
    }
}

@keyframes whyggwwixlink{
    from{
        margin-left: 15%;
    }
    to{
        margin-left: 19.5%;
    }
}

@keyframes whyggwsquareprice{
    from{
        margin-left: 33.25%;
    }
    to{
        margin-left: 50.25% ;
    }
}

@keyframes whyggwsquarelink{
    from{
        margin-left: 41%;
    }
    to{
        margin-left: 51.25%;
    }

}


/*Media Queries*/

@media (max-width: 1000px) {


    .headliner--words{
        max-width: 25%;
    }

    .welcome1{
        margin: 0 auto;
        text-align: center;
        padding-top: 5%;
        padding-bottom: 5%;
    
        animation: fadein 3s ease both, fsto1kwelcome 1s ease both;
        }

    .welcome2sub{
        margin: 0 auto;
        width: 50%;
        text-align: center;
        color: rgb(71, 71, 71);
        font-size: 2vw;
        animation: fadein 3s ease 2s both, fsto1kwelcomesub 1s ease both;
        padding-bottom: 5%;
    }

    .whatyougetdiv{
        margin-top: 5%;
        border-radius: 5px;
        margin-left: 2.5%;
        width: 63.5%;
        box-shadow: inset 0vw 0vw 2vw rgb(54, 245, 255), 0vw 0vw 1vw rgba(0, 0, 0, 0.349) ;
        animation: keyframemargin 1s ease both;
    }

    .whatyougetheader{
        margin: auto;
        padding-left: 4%;
        padding-top: 3%;
        font-size: 2.5vw;
    }
    
    .whatyouget{
        margin: auto;
        padding-top: 10%;
        padding-bottom: 10%;
        padding-left: 10.25%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .whyggdiv{
        margin-top: 5%;
        margin-left: 34%;
        border-radius: 5px;
        width: 63.5%;
        box-shadow: inset 0vw 0vw 1.5vw rgb(41, 79, 250), 0vw 0vw 0.2vw rgba(0, 0, 0, 0.315) ;
    }

    .whyggheader{
        margin: auto;
        margin-left: 56%;
        padding-top: 3%;
        font-size: 2.5vw;
    }

    .whyggpar{
        margin: auto;
        text-align: center;
        width: 85%;
        padding-top: 5%;
        padding-bottom: 1%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .whyggpar1{
        margin: auto;
        text-align: center;
        width: 85%;
        padding-top: 5%;
        padding-bottom: 1%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .whyggpar2{
        margin: auto;
        text-align: center;
        width: 85%;
        padding-top: 5%;
        padding-bottom: 1%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .wixprice{
        margin: auto;
        position: absolute;
        margin-left: 16.5%;
        font-size: 2.5vw;
        margin-top: 9%;
    }

    .squareprice{
        margin: auto;
        position: absolute;
        margin-left: 38.25%;
        font-size: 2.5vw;
        margin-top: 9%;
    }

    .howstartdiv{
        margin-top: 5%;
    }
}

@media (max-width: 800px){

    .headliner--words{
        max-width: 30%;
        margin-left: 1%;
    }

    .welcome1{
        margin: 0 auto;
        text-align: center;
        padding-top: 5%;
        padding-bottom: 5%;
    
        animation: fadein 3s ease both, fsto1kwelcome2 1s ease both;
        }

    .welcome2sub{
        margin: 0 auto;
        text-align: center;
        color: rgb(71, 71, 71);
        animation: fadein 3s ease 2s both, fsto1kwelcomesub2 1s ease both;
        padding-bottom: 5%;
    }

    .whatyougetdiv{
        margin-top: 10%;
        border-radius: 5px;
        margin-left: 2.5%;
        width: 80%;
        box-shadow: inset 0vw 0vw 1.5vw rgb(54, 245, 255), 0vw 0vw 0.2vw rgba(0, 0, 0, 0.315) ;
        animation: wygw 1s ease forwards;
    }

    .whatyougetheader{
        margin: auto;
        padding-left: 4%;
        padding-top: 3%;
        font-size: 2.5vw;
    }
    
    .whatyouget{
        margin: auto;
        padding-top: 10%;
        padding-bottom: 10%;
        padding-left: 10.25%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .whyggdiv{
        margin-top: 5%;
        margin-left: 34%;
        border-radius: 5px;
        width: 63.5%;
        box-shadow: inset 0vw 0vw 1.5vw rgb(41, 79, 250), 0vw 0vw 0.2vw rgba(0, 0, 0, 0.315) ;
        animation: whyggw 1s ease both;
    }

    .whyggheader{
        margin: auto;
        margin-left: 66%;
        padding-top: 3%;
        font-size: 2.5vw;
    }

    .whyggpar{
        margin: auto;
        text-align: center;
        width: 85%;
        padding-top: 5%;
        padding-bottom: 1%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .whyggpar1{
        margin: auto;
        text-align: center;
        width: 85%;
        padding-top: 5%;
        padding-bottom: 1%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .whyggpar2{
        margin: auto;
        text-align: center;
        width: 85%;
        padding-top: 5%;
        padding-bottom: 1%;
        font-size: 2vw;
        letter-spacing: 1px;
    }

    .wixprice{
        margin: auto;
        position: absolute;
        margin-left: 10.5%;
        font-size: 2.5vw;
        margin-top: 9%;
        animation: whyggwwixprice 1s ease both;
    }

    .wixlogolink{
        margin: auto;
        position: absolute;
        width: 10%;
        margin-left: 15%;
        margin-top: 3%;
        animation: whyggwwixlink 1s ease both;
    }

    .squareprice{
        margin: auto;
        position: absolute;
        margin-left: 33.25%;
        font-size: 2.5vw;
        margin-top: 9%;
        animation: whyggwsquareprice 1s ease both;
    }

    .squarelogolink{
        position: absolute;
        width: 6.80%;
        margin-left: 41%;
        margin-top: 2%;
        animation: whyggwsquarelink 1s ease both;
    }
}

@media (max-width: 540px) {

    body{
        max-width: 540px;
        }

    .headliner--background{
        width: 125%;
        }

    .headliner--words{
        max-width: 30%;
        margin-left: 4%;
        font-size: 2.25vw;
        }

    .welcome1{
        margin: 0 auto;
        text-align: center;
        width: 97.5%;
        font-size: 8.75vw;
        padding-top: 10%;
        padding-bottom: 15%;
    
        animation: fadein 2s ease both;
        }

    .welcome2sub{
        margin: 0 auto;
        width: 75%;
        text-align: center;
        color: rgb(71, 71, 71);
        font-size: 3.75vw;
        animation: fadein 2s ease 1.5s both;
        padding-bottom: 15%;
        }
    
      .button{

        margin: 0 auto;
        text-align: center;
        width: 50%;
        padding: 5%;
        font-size: 4vw;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border:1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        border-radius: 20px;
        text-decoration: none;
        text-decoration-line: none;
        animation: buttonfadein 1.5s ease 5s both;
        }

    .whatyougetdiv{
            border-radius: 5px;
            margin-left: 2.5%;
            margin-right: 2.5%;
            width: 95%;
            box-shadow: inset 0vw 0vw 2.5vw rgb(54, 245, 255), 0vw 0vw 2.25vw rgba(0, 0, 0, 0.349) ;
            animation: wygw2 1s ease forwards;
        }

    .whatyougetheader{
            margin: auto;
            padding-left: 4%;
            padding-top: 3%;
            font-size: 4vw;
        }
        
    .whatyouget{
            margin: auto;
            padding-top: 10%;
            padding-bottom: 10%;
            padding-left: 10.25%;
            font-size: 3vw;
            letter-spacing: 1px;
        }


    .whyggdiv{
        border-radius: 5px;
        margin-left: 2.5%;
        margin-right: 2.5%;
        width: 95%;
        animation: whyggw2 1s ease both;
    }

    .howstartdiv{
        border-radius: 5px;
        margin-left: 2.5%;
        margin-right: 2.5%;
        width: 95%;
        animation: wygw2 1s ease forwards;
    }
}

@media (max-width: 399px ) {


    body{
        max-width: 399px;
    }

    .headliner--words{
        padding-top: 1%;
        font-size: 2.90vw;
    }

    .headliner--background{
        width: 150%;
    }

    .welcome1{
        margin: 0 auto;
        text-align: center;
        width: 97.5%;
        font-size: 8.75vw;
        padding-top: 10%;
        padding-bottom: 15%;
    
        animation: fadein 2s ease both;
        }

    .welcome2sub{
        margin: 0 auto;
        width: 75%;
        text-align: center;
        color: rgb(71, 71, 71);
        font-size: 3.75vw;
        animation: fadein 2s ease 1.5s both;
        padding-bottom: 15%;
        }
    

    .whatyougetheader{
            margin: auto;
            padding-left: 4%;
            padding-top: 3%;
            font-size: 5vw;
        }
        
    .whatyouget{
            margin: auto;
            padding-top: 10%;
            padding-bottom: 10%;
            padding-left: 10.25%;
            font-size: 3.5vw;
            letter-spacing: 1px;
        }

}

@media (max-width: 310px ) {


    body{
        max-width: 310px;
    }

    .headliner--words{
        padding-top: 1%;
        font-size: 4vw;
        text-align: center;
    }

    .headliner--background{
        width: 175%;
    }
}




/* Contact Us.html CSS Code */




/* Custom Projects.html CSS Code*/




/*Template One.html CSS Code */




/*Template Two.html CSS Code */




/*Template Three.html CSS Code */