/* FONTS */

html {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: white;
}

@media screen and (min-width: 320px) {
    html {
        font-size: calc(16px + 6 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width: 1440px) {
    html {
        font-size: 26px;
    }
}

.mono {
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
}

/* PAGE */

body,
html {
    padding: 0;
    margin: 0;
}

body {
    background-image: url('/media/wallpaper.jpg');
    background-repeat: no-repeat;
    -webkit-background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
}

/* CENTER */

.container {
    height: 100vh;
    width: 80vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    opacity: 0;
    text-align: center;
    margin: 1.5rem;
    letter-spacing: .5rem;
    animation: opacity-fadein-anim 2s forwards;
    -webkit-animation: opacity-fadein-anim 2s forwards;
}

h1 b {
    font-weight: 600;
}

.subtitle-border {
    width: 0%;
    height: 1px;
    background-color: white;
    animation: subtitle-border-anim 1s forwards;
    -webkit-animation: subtitle-border-anim 1s forwards;
}

@keyframes subtitle-border-anim {
    0% {
        width: 0%
    }

    100% {
        width: 100%
    }
}

@-webkit-keyframes subtitle-border-anim {
    0% {
        width: 0%
    }

    100% {
        width: 100%
    }
}

h2 {
    font-size: 0.7rem;
    letter-spacing: 0.4rem;
    text-align: center;
    opacity: 0;
    animation: opacity-fadein-anim 1s .5s forwards;
    -webkit-animation: opacity-fadein-anim 1s .5s forwards;
}

/* SECOND CONTAINER */

.nested-container {
    width: 90%;
    padding: 1.5rem;
    display: flex;
    justify-content: baseline;
}

/* LINKS */

#profile-link {
    display: none;
}

.links-container {
    display: block;
    width: 33%;
}

h3 {
    margin-top: 0;
    font-size: 1rem;
    letter-spacing: 0.3rem;
    opacity: 0;
    animation: opacity-fadein-anim 1s .5s forwards;
    -webkit-animation: opacity-fadein-anim 1s .5s forwards;
}

.link-list li {
    list-style-type: circle;
    font-size: 0.7rem;
    margin: 0.3rem;
    opacity: 0;
    animation: opacity-fadein-anim 1s forwards;
    -webkit-animation: opacity-fadein-anim 1s forwards;
}

.link-list li a {
    margin-left: 0.5rem;
    color: white;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

/* PROFILE */

.profile-border {
    width: 1px;
    height: 0px;
    background-color: white;
    animation: profile-border-anim 1s forwards;
    -webkit-animation: profile-border-anim 1s forwards;
}

@keyframes profile-border-anim {
    0% {
        height: 0%
    }

    100% {
        height: 100%
    }
}

.profile-container,
.contacts-container {
    width: 66%;
    padding-left: 2rem;
}

.profile-text {
    font-size: 0.6rem;
    opacity: 0;
    animation: opacity-fadein-anim 1s .7s forwards;
    -webkit-animation: opacity-fadein-anim 1s .7s forwards;
}

.contacts-container {
    display: none;
}

@keyframes opacity-fadein-anim {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes opacity-fadein-anim {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/* CONTACT INFO */

.profile-text img {
    width: 1.5em;
    margin-right: 1em;
}

.profile-text a {
    margin: 1em 0 1em 0;
    display: flex;
    align-content: center;
    text-decoration: none;
}

.profile-text div {
    display: inline-block;
    color: white;
}


/* MOBILE */

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

    .container {
        width: 90vw;
    }

    .subtitlebox {
        width: 80%;
    }

    h2 {
        line-height: 1.5em;
    }

    @keyframes subtitle-border-anim {
        0% {
            width: 0%
        }

        100% {
            width: 100%
        }
    }

    @-webkit-keyframes subtitle-border-anim {
        0% {
            width: 0%
        }

        100% {
            width: 100%
        }
    }

    .nested-container {
        flex-direction: column-reverse;
    }

    .profile-container,
    .contacts-container {
        width: 100%;
        padding-left: 0;
    }


    .links-container {
        display: block;
        width: 100%;
    }

    .profile-border {
        width: 0;
        height: 1px !important;
        background-color: white;
        align-self: center;
        margin: 1.5em 0 1.5em 0;
        animation: profile-border-anim 1s .5s forwards;
        -webkit-animation: profile-border-anim 1s .5s forwards;
    }

    .profile-text {
        text-align: justify;
    }

    @keyframes profile-border-anim {
        0% {
            width: 0%
        }

        100% {
            width: 50%
        }
    }

    @-webkit-keyframes profile-border-anim {
        0% {
            width: 0%
        }

        100% {
            width: 50%
        }
    }
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 0;
}