* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

:root {
    --blue: rgb(38, 99, 231);
    --green: rgb(58, 173, 58);
    --shadow: 0px 0px 18px #777777;
    --border: solid 5px var(--blue);
    --navSpeed: 500ms;
    --borderDelay: calc(var(--navSpeed) / 4);
}

@media (min-width: 800px) {
    body {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
    }

    /* Div with class "CARD" preset */
    .CARD {
        border-radius: 1vw;
        border-top-right-radius: 0;
        box-shadow: var(--shadow);
    }

    /* Div with class "BOX" preset */
    .BOX {
        border-radius: 1vw;
        border: var(--border);
    }

    /* H1 with class "TITLE" preset */
    .TITLE {
        color: var(--blue);
        font-weight: 900;
    }

    /* Home swipe animation */
    .home.open {
        transition: all 1s ease;
        left: -100vw;
    }

    /* Screen swipe animation */
    .screen.open {
        right: 0;
        transition: all 1s ease;
    }
    
    /* Nav links animations */
    @keyframes navIcon {
        100% {
            top: 25%;
            color: var(--blue);
        }
    }
    @keyframes navText {
        50% {
            bottom: 25%;
        }
        100% {
            opacity: 1;
            bottom: 25%;
        }
    }
    @keyframes navBorderTop {
        100% {
            width: 110%;
            top: 10%;
            opacity: 1;
            height: 4px;
        }
    }
    @keyframes navBorderBottom {
        100% {
            width: 110%;
            bottom: 10%;
            opacity: 1;
            height: 4px;
        }
    }
    @keyframes DataLectro {
        80% {
            color: var(--blue);
            font-size: 1.5vw;
        }
        100% {
            color: var(--blue);
            font-size: 1.5vw;
        }
    }
}