/******************************************************************************/
/*                              MAIN THEME                                    */
/******************************************************************************/

/* Thanks to Logan Martin Tran for the inspiration */

.body {
    transition: 0.5s ease-in;
}

.roboto {
    font-family: 'Roboto', sans-serif;
}

h1 {
    letter-spacing: 15px;
}

@media (max-width: 600px) {
    h1 {
        letter-spacing: 8px;
        font-size: 0.3em;
    }
}

.description {
    letter-spacing: 8px;
}

.word .cursor {
    display: inline-block;
    min-width: 1px;
    background: #FFF;
    margin-left: -0.5em;
    margin-top: -0.1em;
    height: 1.3em;
    vertical-align: middle;
    animation: blinkCursor 0.75s infinite;
}

@keyframes blinkCursor {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a {
    outline: 0 !important;
}

/******************************************************************************/
/*                              DARK MODE                                     */
/******************************************************************************/

#mylogo {
    background-size: cover !important;
    width: 120px;
    height: 120px;
    margin: auto;
}

.dark-mode {
    background: black !important;
}

.dark-mode #mylogo {
    background: url("../img/logo_white.png") no-repeat;
}

.dark-mode .white {
    color: white !important;
}

.dark-mode .black {
    color: black !important;
}

.light-mode {
    background: white !important;
}

.light-mode #mylogo {
    background: url("../img/logo_black.png") no-repeat center center;
}

.light-mode .white {
    color: black !important;
}

.light-mode .black {
    color: white !important;
}