/****************************************************************
 * Stylesheet for losedavidpb.github.io
 *
 * @author losedavidpb <losedavidpb@gmail.com>
 *
 ***************************************************************/

@media screen {
    /** General settings **/

    body {
        max-width: fit-content;
        height: fit-content;
        margin: 0;
        padding: 0;
    }

    /** Background **/

    .background {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: cover;
        -o-background-size: cover;
        -webkit-background-size: cover;
        -ms-content-zooming: none;
        position: fixed;
        overflow: scroll;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        right: 0%;
        bottom: 0%;
    }

    #background-color {
        background-color: black;
    }

    #background-image {
        background-image: url('./images/wallpaper.jpg');
    }

    /** Profile **/

    #profile-image {
        width: 200px;
        height: auto;
        object-fit: cover;
    }

    /** Navigation **/

    .navbar-icons a {
        font-size: 2em;
        text-decoration: none;
    }

    #offcanvas-button {
        float: right;
    }

    /** Language selector **/

    #language-div {
        width: fit-content;
        height: fit-content;
        top: 20px;
    }

    /** Bootstrap **/

    .btn:focus, .btn:active {
        outline: none !important;
        box-shadow: none;
    }

    /* Horizontal lines */

    .hr-5 {
        border-top: 1px solid gray;
    }

    .hr-8 {
        border-top: 1px solid gray;
    }

    /** Skill images **/

    .lang-image {
        max-height: 100px;
        max-width: 150px;
        padding-bottom: 20px;
        padding-right: 20px;
        padding-left: 0;
    }

    /** Loading Animation **/

    #loader.fade-out {
        opacity: 0;
        transition: opacity 0.5s ease-out;
        pointer-events: none;
    }

    .background-spinner {
        background-color: rgba(255, 255, 255, 0.0);
        z-index: 1050;
    }

    .spinner-xl {
        width: 5rem;
        height: 5rem;
        border-width: 0.6rem;
    }

    .loader-box {
        padding: 3rem;
        min-width: 12rem;
    }

    .loader-text {
        font-size: 1.5rem;
    }
}

/** Small screens **/
@media screen and (max-width: 1200px) {
    #language-div {
        position: relative;
    }

    #navbar-vertical {
        display: none;
    }

    #offcanvas-button {
        margin-right: 30px;
        top: 10px;
    }

    .hr-5 {
        width: 300px;
    }

    .hr-8 {
        width: 600px;
    }
}

/** Large screens **/
@media screen and (min-width: 1200px) {
    section {
        width: 94%;
    }

    #offcanvas-button {
        margin-right: 100px;
        top: 20px;
    }

    .hr-5 {
        width: 400px;
    }

    .hr-8 {
        width: 700px;
    }
}

/** Extra large screens **/
@media screen and (min-width: 1600px) {
    #language-div {
        position: sticky;
    }

    .hr-5 {
        width: 500px;
    }

    .hr-8 {
        width: 800px;
    }
}