body{
    margin: 0px;
    padding: 0px;
    background-color: antiquewhite;

}
#scrollContainer {
    background-color: #3c3c3cc2;
    width: 25px;
    height: 60px;
    position: fixed;
    bottom: 2vh;
    left: 2vw;
    border-radius: 5px;
    z-index: 2;
    border: 1.75px solid black;
    transition: all 1s ease-in-out;
}
#scrollContainer:hover {
    border-color: #fb5607;
}
.scrollButtons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 50%;
    width: 100%;
    
}
.scrollButtons img {
    max-height:28px;
    max-width: 22px;
}
#scrollButtonDown{
    transition: all 0.5s ease-in-out;

}
#scrollButtonUp{
    transition: all 0.5s ease-in-out;

}
#scrollButtonDown:hover{
    cursor: pointer;
    color: #fb5607;
}

#scrollButtonUp:hover{
    cursor: pointer;
    color: #fb5607;
}
nav{
    display: flex;
    flex-direction: row;
    background-color: /*#E4561F*//*#bb9457*//*#d4a373*/#db7c26;
    border: #3c3c3c;
    border-style: double;
    border-width: 4px;
    position: sticky;
    top: 0px;
    margin-top: -2px;
    z-index: 1;


    transition: all 0.5s ease-in-out;
    border-radius: 5vw ;
}
.is-sticky{
    border-radius: 5vw;
/*    transform: translateX(50%);
    width: 50vw;
*/
}
.navItems{
    width: fit-content;
    text-align: center;
    font-family: "Selawik SemiBold","sans-serif";
    width: 33.33vw;
    transition: all 1s ease-in-out;
    font-size: min(3vw,20px);
}
.navItems:hover{
    font-family: "Selawik Bold","sans-serif";
    cursor: pointer;
}
p{
    color: #3c3c3c;
    /*max-width:50%;*/
    margin-left: auto;
    margin-right: auto;
    font-family: "Mouldy","Selawik";
    font-size: max(15px,1.5vw);
}
.animatedText{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-50%);
    transition: all 1s ease-in-out;
}
.animationText{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
    /*font-size: 1.15em;*/    
}
header{
    background-color: /*#fb8500*/#3c3c3c;
    min-height: 144vh;
    max-height: max-content;
    padding-bottom: 6vh;
    color: #fb5607;
    text-align: center;
}
#header{
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    height: 100vh;
}
#header > h1{
    margin-bottom: 0.1em;
    color: #fb5607;
}
#subHeader{
    color: #db7c26;
    font-size: 3.5vw;
    font-family: "Selawik SemiBold",sans-serif;
    transition: all .2s ease-in-out;
    opacity: 0;
}
h1:hover #Htext::before{
    width: 100%;
    background-color: #db7c26;
}
h1:hover #subHeader {
    opacity: 1;
}
#socials{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#socials >:nth-child(1){
    width: auto;
    margin-right: 20%;
    color: antiquewhite;
    transition: all 1s ease-in-out;
    font-size: max(3vw,25px);
}
#socials >:nth-child(2){
    width: auto;
    font-size: max(3vw,25px);
    margin-left: 20%;
    color: antiquewhite;
    transition: all 1s ease-in-out;
}
#socials >:nth-child(1):hover{
    color: #fb5607;
}
#socials >:nth-child(2):hover{
    color: #fb5607;
}/*
#aboutUs{
    padding-top: 35vh;
}*/
#aboutUs > h2{
    font-size: 5vw;
}
#aboutUs > p {
    color: #db7c26;
    font-size: max(1.3vw,15px);
    max-width: 70%;
}
main{
    background-color:antiquewhite/*#cc5537#FC8805#F5F5F5*/;
    background-repeat:no-repeat ;
    background-attachment:fixed ;
    padding: 8vh 2vw 8vh 2vw;
    color: #3c3c3c;

}
.container{
    text-align: center;
    font-family: "Selawik SemiBold",sans-serif;
}
.underline{
    display: inline;
    padding-bottom: 0.1em;
    font-family: "Selawik Bold";
    position:relative;
}
#Htext{
    text-align: center;
    font-family: "Selawik Bold", sans-serif;
    text-shadow: 0.05em 0.05em #3c3c3c;
    width: max-content;
    font-size: 8vw;
}
.underline::before{
    content: '';
    position: absolute;
    left: 0;
    bottom:0;
    width: 0;
    height: 8%;
    background-color: #db7c26;
    transition: width 0.25s ease-in-out;
}
.underline:hover::before{
    width: 100%;
    background-color: #db7c26;
}

/*a{
    color: #3c3c3c;
}*/

button{
    border: 1.25px solid #3c3c3c;
    padding: 1px;
    border-radius: 12px;
}
button:hover{
    background-color: #d6cfcb;
    cursor: pointer;
}

#btn1{
    margin-bottom: 6vh;
    padding: 0.5em;
    border: 1.25px solid black;
    transition: all 0.5s ease-in-out;
}
#btn1:hover{
    border-color: #fb5607;
    /*color: #fb5607;*/
}

ul{
    list-style-position: inside;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}
li{
    margin: 2.5em;/*
    font-size: min(1.5em,4vw);*/
    font-size: min(22px,4vw);
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 5vh;
}
li::marker{
    color: #db7c26;
}
#listContainer{
    display: flex;
    /*align-items: center;*/
    flex-direction: column;
}
#listContainer > h2{
    width: max-content;
    text-align: center;
    align-self: center;
}
#getStarted{
    transition: all 500ms;
}
#getStarted:hover{
    cursor: pointer;
    color: #db7c26;
}

footer{
    background-color:#3c3c3c/*#fb5607*/;
    color: #fb5607 ;
    /*padding: 8vh;*/
    min-height: 10vh;
    max-height: max-content;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    max-height: 60vh;
}
footer > * {
    font-family: "Mouldy","selawik","sans-seriff";
}

#footerBox{
    display: flex;
    flex-direction: row;/*
    justify-content: space-between;*/
    justify-content: center;
    align-items: center;
    max-height: 56vh;
    padding: 2vh 2vw 2vh 2vw;
}
#footerBox > *{
    width: max-content;
    /*max-height: 16vh;*/
    min-height: 10vh;
    max-height: max-content;
    margin: 0;
}

#logo{
    width: auto;
    max-height: 20vh;
    margin-left: 3%;
    margin: 0;
}
#logoBox{
    border: double #3c3c3c;
    border-width: 5px;
    border-radius: 10%;
    /*padding: 2em;*/
    max-height: 40vh;
    font-size: 0.75em;
    overflow-y: hidden;
    margin: 0 2vw 0 0;
}
#logoBox > h2 {
    text-shadow: 0.1em 0.1em #5a5a5a;
    font-weight: normal;
}
#copyrightBox{/*
    margin-top:2em;*/
    background-color: #3c3c3c;
    height: max-content;
    color: #fb5607;
}
#copyrightBox > *{
    font-family: "Selawik Regular";
    opacity: 0.75;
    margin: -0.05px 0 -0.05px 0;
}
#contactBox{
    display: flex;
    margin: 0 0 0 2vw;
    flex-direction: column;
    text-align: center;
}
#contactBox > form{
    display: inline-block;
}
#contactBox > h2{
    font-weight: normal;    
}
#contactBox > h2{
    width: max-content;
    font-size: 2em;
    margin: 0 auto 0 auto;
}
#contactBox > h2:hover{
    cursor: pointer;
}
#contactForm{
    text-align: center;
    margin-top: 5vh;
}
#messageForm{
    display: inline-block;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 30vw;
}
#messageForm > input{
    width: 100%;
    border-radius: 10px;
    margin-bottom: 0.5vh;
    padding: 0.2em;
}
#messageForm > * {
    margin-bottom: 0.25em;
    font-family: /*"Mouldy",*/ "Selawik Bold", "sans-seriff";
}
#messageForm > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow-y: visible;
}

form > div >button{
    font-family: "Selawik Bold";
    padding: 0.40em;
    transition: all 0.5s ease-in-out;
    max-height:2em;
}
form > div >button:hover{
    border-color: #fb5607;    
}

/*#messageForm input:nth-of-type(3) {
    height :10vh;
    overflow: hidden;
    white-space: wrap;
    field-sizing: content;
    max-width: inherit;
    How to make input big an dynamiclly resized
}*/
#resultMessage{
    font-size: 100%;
    color: #db7c26;
    margin: 0 0 0 0;
    -webkit-text-stroke: 0.05em rgba(0, 0, 0, 0.804);
    flex-grow: 1;
    max-width: max-content;
}










#startHeader{
    text-align: center ;
    margin-top: 6vh;
    margin-bottom: 8vh;
}
#startHeader>h1{
    font-size: 3.5em;
    font-family: "Selawik Bold";
    color: #3c3c3c;
}
#startHeader>h1::before{
    background-color: #db7c26;
}
#startMain{
    font-family: "Selawik Bold", sans-serif;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: row;
    padding: 6vh 3vw 9vw 5vw;
}
#startMain{
    color: #d5975c;
}
#startMain >div> h3{
    font-size: 1.75em;
    max-width: max-content;
}
#startMain > div> p{
    margin: 0 0 0 0;
    max-width:50vw;
}
#approachBox{
    max-width: max-content;
    padding-right: 3vw;
}
#signUpBox{
    height: max-content;
    /*position: sticky;*/
    top: 0px;
    padding-left: 3vw;
    width: min(500px,50vw);
}
#signUpForm > input{
    width: 100%;
    border-radius: 10px;
    margin-bottom: 0.5vh;
    padding: 0.2em;
    font-family: "Selawik Bold";
    color: #3c3c3c;
}
#signUpForm >div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#signUpResultMessage{
    max-width: max-content;
    flex-grow: 1;
    margin: 0;
}






    @font-face {
    font-family: 'Selawik Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Selawik Regular'), url('Fonts/selawk.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Selawik Light';
    font-style: normal;
    font-weight: normal;
    src: local('Selawik Light'), url('Fonts/selawkl.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Selawik Semilight';
    font-style: normal;
    font-weight: normal;
    src: local('Selawik Semilight'), url('Fonts/selawksl.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Selawik Semibold';
    font-style: normal;
    font-weight: normal;
    src: local('Selawik Semibold'), url('Fonts/selawksb.woff') format('woff');
    }
    

    @font-face {
    font-family: 'Selawik Bold';
    font-style: normal;
    font-weight: bold;
    src: local('Selawik Bold'), url('Fonts/selawkb.woff') format('woff');
    }
    
    @font-face {
        font-family: 'Mouldy';
        font-style: normal;
        src: local('Mouldy'), url('Fonts/MouldyCheeseRegular-WyMWG.ttf') format('truetype');
    }