body {
    margin: 0;
}

@font-face {
    font-family: inter;
    src: url(fonts/Inter/Inter-VariableFont_slnt\,wght.ttf);
}

a:active,a:link,a:visited {
    color: inherit;
    text-decoration: none;
}

#navigationMenu {
    visibility: hidden;
    position: fixed;
    width: 0%;
    height: 100%;
    background: white;
    transition: 0.5ms;
}

#crossIcon {
    cursor: pointer;
    position: absolute;
    font-size: 5vw;
    margin-top: 2vw;
    margin-right: 2vw;
    right: 0.5vw;
    top: 0.1vw;
}

#navTitle {
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    color: #ff1c1c;
    font-size: 7vw;
    margin-top: 6vw;
}

#menuOptions {
    width: 70%;
    margin: auto;
    margin-top: 5vw;
}

.menuOpClass {
    font-family: sans-serif;
    font-size: 6vw;
    padding: 1vw;
    text-align: center;
    border-bottom: solid grey thin;
}

.menuOpClass:hover {
    cursor: pointer;
    background: gainsboro;
}

#header {
    display: flex;
    background: white;
    box-shadow: 0vw 0.2vw 0.35vw rgb(173, 173, 173);
    height: 6.07vw;
}

#webTitle {
    color: #454546;
    font-family: inter;
    font-size: 2.7vw;
    font-weight: 600;
    padding: 1.3vw;
    padding-left: 2.5vw;
    margin-top: 0.5vw;
}

#tabs {
    display: flex;
}

#menu {
    display: flex;
    width: 30vw;
    margin-left: 23vw;
    font-family: inter;
    font-size: 1.61vw;
    font-weight: 500;
    color: #1FBCFF;
}

#home, #about, #apps, #blog, #contact {
    cursor: pointer;
    margin-left: 0.25vw;
    padding: 1vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    margin-top: 1.6vw;
    margin-bottom: 1.45vw;
    border-radius: 0.29vw;
}

#home {
    background: #1FBCFF;
    color: white;
}

#home:hover, #about:hover, #apps:hover, #blog:hover, #contact:hover {
    background: #1FBCFF;
    color: white;
}

#buttonSign {
    cursor: pointer;
    color: white;
    background: #1FBCFF;
    font-family: inter;
    font-weight: 600;
    font-size: 1.68vw;
    width: 9.15vw;
    text-align: center;
    vertical-align: middle;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    align-items: center;
    margin-left: 10.5vw;
    margin-bottom: 1.4vw;
    margin-top: 1.5vw;
    border-radius: 4.39vw;
}

.barIconClass {
    visibility: hidden;
    width: 0vw;
    background: #454546;
    height: 1vw;
    margin-top: 0.6vw;
}

.titleClass {
    width: 75vw;
    color: #7F47DD;
    font-family: inter;
    font-weight: 600;
    font-size: 2.85vw;
    margin: auto;
    margin-top: 2vw;
}

.contentText {
    text-align: justify;
    color: #787878;
    width: 75vw;
    font-family: inter;
    font-weight: 400;
    font-size: 1.676vw;
    margin: auto;
    margin-top: 3vw;
}

#footerFlexLay {
    display: flex;
}

#footer {
    display: flex;
    font-family: inter;
    background: #7F47DD; /* ff812d 7bb661*/
    color: white;
    padding: 0.5vw;
    margin-top: 1vw;
    padding-bottom: 2vw;
}

#footerCol1, #footerCol2, #footerCol3 {
    padding: 2vw;
    width: 13vw;
}

#footerCol1 {
    margin-left: 2.5vw;
}

#credits {
    width: 50vw;
    margin-left: 4.5vw;
    margin-top: 0.3vw;
}

#copyright {
    font-size: 1.5vw;
}

#designer {
    font-size: 1.7vw;
    font-weight: 600;
    margin-top: 0.4vw;
}

.footerTitles {
    font-weight: 600;
    font-size: 2vw;
    width: 50vw;
}

.subList {
    margin-top: 1vw;
    font-size: 1.7vw;
    line-height: 2.5vw;
}

li {
    padding-top: 1vw;
}

#footerColLast {
    width: 30vw;
    margin-top: 2.2vw;
    margin-left: 12vw;
}

#newsletter {
    font-weight: 600;
    font-size: 1.8vw;
}

#newsLetterDes {
    margin-top: 0.8vw;
    font-size: 1.5vw;
}

#inputContainer {
    display: flex;
    background: white;
    margin-top: 1vw;
    width: 26.7vw;
}

#emailImgDiv {
    width: 4vw;
    margin-top: 0.5vw;
    margin-left: 0.2vw;
}

#inputField {
    border: none;
    font-size: 1.5vw;
    height: 3.1vw;
    margin-left: 0.5vw;
    width: 22.5vw;
}

#inputField:focus {
    border: none;
    outline: none;
}

#subscribeBtn {
    cursor: pointer;
    font-size: 1.5vw;
    background: #222222;
    border: none;
    color: white;
    padding: 1vw;
    width: 27vw;
    margin-top: 1.5vw;
    border-radius: 0.5vw;
}

@media screen and (max-width: 500px) {
    #tabs {
        visibility: hidden;
        width: 36vw;
    }


    #header {
	    height: 15vw;
	    box-shadow: 0vw 0.4vw 0.55vw rgb(173, 173, 173);
    }

    #webTitle {
	    font-size: 0vw;
	    padding: 6vw;
	    padding-left: 6vw;
    }

    #menu {
	    width: 0vw;
    }

    .titleClass {
	    font-size: 6.5vw;
	    margin-top: 10vw;
    }

    .contentText {
	    font-size: 4.5vw;
	    margin-top: 6vw;
    }

    #barIcon {
        cursor: pointer;
        margin-top: 4vw;
    }
    
    .barIconClass {
        visibility: visible;
        width: 9vw;
        background: #454546;
        height: 1.2vw;
        margin-top: 1vw;
    }

    #footer {
        display: inline-block;
        width: 100%;
    }

    .footerTitles {
        font-size: 3.8vw;
    }

    #footerCol1, #footerCol2, #footerCol3 {
        margin-left: 8vw;
        margin-top: 4vw;
    }

    #footerCol1 {
        margin-left: 4vw;
    }

    .subList {
        margin-top: 1vw;
        font-size: 3vw;
        line-height: 4.5vw;
        width: 25vw;
    }

    #credits {
        width: 60vw;
        margin-left: 6vw;
        margin-top: 3vw;
    }

    #copyright {
        font-size: 3vw;
    }

    #designer {
        font-size: 3.5vw;
    }

    #footerColLast {
        width: 80vw;
        margin-top: 7.2vw;
        margin-left: 6vw;
        text-align: center;
        margin-bottom: 3vw;
    }

    #newsletter {
        font-weight: 600;
        font-size: 3.5vw;
    }

    #newsLetterDes {
        margin-top: 0.8vw;
        font-size: 3vw;
    }

    #logoText {
        padding-top: 0vw;
        width: 36vw;
        height: 5vw;
    }

    #inputContainer {
        display: flex;
        background: white;
        width: 40vw;
        margin: auto;
        margin-top: 3vw;
    }

    #emailImgDiv {
        width: 8vw;
        margin-top: 1.3vw;
        margin-left: 0.4vw;
    }

    #subscribeBtn {
        font-size: 3vw;
        padding: 1.5vw;
        margin-top: 2.5vw;
    }

    #inputField {
        font-size: 3vw;
        width: 32vw;
        height: 7.1vw;
    }

    li {
        padding-top: 2vw;
    }

}