@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Moul&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --navColor: white;
}

* {
    padding: 0;
    margin: 0;
}

@keyframes shake {

    0% {
        transform: rotate(0deg) translate(0, 3px);
    }

    25% {
        transform: rotate(30deg) translate(5px, -5px);
    }

    75% {
        transform: rotate(-30deg) translate(-5px, -5px);
    }

    100% {
        transform: rotate(0deg) translate(0, 3px);
    }
}

@media (min-width: 768px) {

    body {
        padding: 15vh 0;
        width: 100vw;

        nav {

            .dropdown-items {
                background-color: var(--green);
            }

            a {
                color: black;
            }

            a::after {
                background-color: black;
            }
        }

        .title {
            font-family: "Lato", sans-serif;
            font-weight: 300;
            padding: 0 10vw;
            position: absolute;
            top: 25vh;
            transform: translateY(100px);
            opacity: 0;
            transition: all 1s ease;

            .emoji {
                width: 6vw;
                margin-left: 5px;
                animation: shake 1s infinite linear;
                animation-play-state: paused;
            }

            .emoji:hover {
                animation-play-state: running;
            }
        }

        .contact-stuff {
            width: 80vw;
            margin: 45vh 10vw 0vh 10vw;
            display: flex;
            flex-direction: column;
            gap: 12.5vh;

            form {
                width: 100%;
                padding: 0;
                display: flex;
                flex-direction: column;
                gap: 15vh;

                .container {
                    height: 50px;
                    width: 200px;
                    background-color: var(--green);

                    input[type=checkbox] {
                        position: absolute;
                        opacity: 0;
                        cursor: pointer;
                        height: 0;
                        width: 0;
                    }
                }

                input[type=text] {
                    width: 65%;
                    border: none;
                    border-radius: 0;
                    border-bottom: solid rgba(75, 75, 75, .25) 2px;
                    font-size: 2vw;
                    padding: 0 0 12px 0;
                    color: rgb(70, 70, 70);
                    background-color: transparent;
                }

                input[type=text]::placeholder {
                    color: rgba(75, 75, 75, .4);
                }

                input[type=text]:hover {
                    outline: none;
                    border-bottom: solid rgba(15, 15, 15, .4) 2px;
                    color: rgb(70, 70, 70);
                }

                input[type=text]:focus {
                    outline: none;
                    border-bottom: solid rgba(0, 0, 0, 1) 2px;
                    color: rgb(70, 70, 70);
                    transition: all 0.5s ease;
                }

                input[type=submit] {
                    font-size: 2.25vw;
                    font-weight: 500;
                    background-color: transparent;
                    outline: none;
                    padding: 0;
                    border: solid 2px var(--green);
                    border-radius: 200px;
                    color: var(--green);
                    font-family: "Lato", sans-serif;
                    letter-spacing: 1px;
                    width: 13vw;
                    height: 6vw;
                    transition: all ease 0.2s;
                }

                input[type=submit]:hover {
                    background-color: var(--green);
                    color: white;
                }

                /* input[type=submit]::after {
                    content: '';
                    background-color: var(--green);
                    width: 100%;
                    height: 0;
                    bottom: 0;
                    left: 0;
                    transition: all ease 1s;
                    position: absolute;
                } */


                p {
                    position: relative;
                    right: 8px;
                    color: var(--green);
                    font-size: 2.25em;
                    float: right;
                    z-index: 5;
                    margin: 0 0 -38px 0;
                    display: none;
                }
            }

            .info {
                width: 30vw;
                float: right;

                h2 {
                    font-size: 1.9vw;
                    font-weight: 500;
                    margin: 0;
                }

                h3 {
                    font-size: 1.9vw;
                    font-weight: 300;
                    margin: 10px 0 0 0;
                }

                .hl {
                    position: relative;
                    height: 1px;
                    width: 100%;
                    background-color: rgb(139, 139, 139, .7);
                    margin: 13% 0 13% 0;
                }
            }
        }
    }
}

@media (max-width: 768px) {

    body {
        height: auto;
        margin: 0;
        padding: 0;
        width: 100vw;

        .title {
            font-family: "Lato", sans-serif;
            font-weight: 300;
            padding: 0;
            position: relative;
            top: 25vh;
            transform: translateY(50px);
            opacity: 0;
            transition: all 1s ease;
            font-size: 11vw;

            .emoji {
                width: 8vw;
                margin-left: 5px;
            }
        }

        .contact-stuff {
            width: 85vw;
            padding: 10vh 7.5vw;
            display: flex;
            flex-direction: column;
            gap: 14vw;
            position: relative;
            top: 30vh;

            form {
                width: 100%;
                padding: 0;
                text-align: center;

                input[type=text] {
                    width: 100%;
                    border: none;
                    border-radius: 0;
                    border-bottom: solid rgba(26, 26, 26, 0.3) 2px;
                    margin-bottom: 10vh;
                    font-size: 4.5vw;
                    padding: 0 0 12px 0;
                    color: rgb(80, 80, 80);
                    background-color: white;
                }

                input[type=text]:focus {
                    outline: none;
                    border-bottom: solid rgba(0, 0, 0, 1) 2px;
                    color: rgb(50, 50, 50);
                }

                input[type=submit] {
                    padding: 5vw 0;
                    font-size: 7vw;
                    font-weight: 400;
                    background-color: var(--green);
                    outline: none;
                    border: none;
                    border-radius: 200px;
                    color: white;
                    font-family: "Lato", sans-serif;
                    letter-spacing: 1px;
                    width: 100%;
                }

                p {
                    position: relative;
                    right: 8px;
                    color: var(--green);
                    font-size: 7vw;
                    float: right;
                    z-index: 5;
                    margin: 0 0 -50px 0;
                }
            }

            .info {
                width: 100%;
                display: flex;
                flex-direction: column;

                h2 {
                    font-size: 4vw;
                    font-weight: 500;
                    margin: 0;
                }

                h3 {
                    font-size: 3.5vw;
                    font-weight: 300;
                    margin: 10px 0 0 0;
                }

                .hl {
                    position: relative;
                    height: 3px;
                    width: 100%;
                    background-color: rgb(139, 139, 139, .7);
                    margin: 4vh 0;
                    display: none;
                }
            }
        }
    }
}