* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
    *::selection {
        color: white;
        background-color: #0018cdb9;
    }

body {
    height: 100vh;
    width: 100vw;
    border-bottom: 10px solid #0019CD;
    background-color: #FAFBFE;
    background-image: url(assets/background.png), url(assets/background-vectors.png);
    background-repeat: repeat-x, no-repeat;
    background-position: top left, center right;
    transition: .5s ease;
    overflow: hidden;
}
    .dark-theme {
        background-color: #000107;
        color: white;
    }
        .dark-theme .input input {
            color: white;
        }

    #header {
        display: block;
        width: fit-content;
        padding-left: 100px;
        padding-top: 50px;
    }
    #banner {        
        max-width: 500px;
        position: absolute;
        top: 20%;
        left: 100px;
        font-family: 'Poppins', sans-serif;
        z-index: 1;
    }
        #enigma-brand {
            height: 40px;
            display: block;
        }
        #banner #domain {
            font-family: 'Poppins', sans-serif;
            font-size: 30pt;
            color: #000949;
        }
        #banner .message {
            font-size: 17pt;
            margin: 15px 0px;
            display: block;
        }
            #banner .message .date {
                font-weight: bold;
            }
        #banner .input {
            width: fit-content;
            padding: 10px 15px;
            margin: 10px 0px;
            display: flex;
            border-radius: 10px;
            border: 1px solid #0019CD;
        }
            #banner * {align-self: center;}
            #banner input {
                font-family: 'Poppins', sans-serif;
                font-size: 12pt;
                padding: 5px 20px;
                margin-left: 20px;
                border: none;
                border-left: 2px solid #0019CD;
                background: none;
                width: 300px;
            }
                #banner input::placeholder {text-transform: uppercase;}
                #banner input:focus,
                #banner input:active {outline: none;}
                
        #banner small {
            text-transform: uppercase;
            font-weight: bold;
            opacity: .5;
        }
        #banner .nav-links {
            display: flex;
            position: static;
        }
            #banner .nav-links img {cursor: pointer;}
    #rocket-animation {
        width: 200px;
        position: fixed;
        top: calc( 100vh - 355px );
        left: calc( calc( 100vw - 200px ) / 2 );
    }
        #rocket-animation img {
            display: block;
            margin: auto;
        }
            #rocket-animation img:nth-child(1) {
                width: 75%;
                position: relative;
                animation-name: rocket-launch;
                animation-duration: 3s;
                animation-fill-mode: both;
                animation-iteration-count: infinite;
                animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }
            #rocket-animation img:nth-child(2) {
                width: 100%;
            }
                @keyframes rocket-launch{
                    0% {top: 0px}
                    50% {top: -30px}
                    100% {top: 0px}
                }
        

@media only screen and (max-width: 1200px) {
    #background-vectors {
        opacity: .4;
    }
}

@media only screen and (max-width: 700px) {

    #header {
        padding-left: 10%;
    }
    #banner {
        width: 90%;
        left: 10%;
    }
}

@media only screen and (max-width: 550px) {
    #header {
        margin: auto;
        padding: 0;
    }
        #header img {width: 50px;}
    #banner {
        left: 5%;
        text-align: center;
    }
        #enigma-brand {
            height: 30px;
            margin: auto;
        }
        #banner #domain {
            font-size: 20pt;
        }
        #banner .message {
            font-size: 13pt;
        }
        #banner .nav-links {
            display: flex;
            position: static;
            justify-content: center;
        }
        #banner .input {
            margin: auto;
            padding: 5px 10px;
        }
        #banner input {
            width: 200px;
            font-size: 10pt;
        }
        #banner small {
            font-size: 8pt;
            font-weight: normal;
            margin-top: 20px;
            display: block;
        }

        #rocket-animation {
            width: 100px;
            position: fixed;
            top: calc( 100vh - 177px );
            left: calc( calc( 100vw - 100px ) / 2 );
        }
}

@media only screen and (max-width: 300px) {
    #enigma-brand {
        height: 25px;
    }
    #banner #domain {
        font-size: 17pt;
    }
    #banner input {
        width: 150px;
    }
}