/* ========================== MOBILE NAVIGATION ============================= */
@media screen and (max-width: 1600px) {

    /* reduce element sizes */
    .windows-container {
        margin-top: 100px;
    }

    .window-controls {
        display: flex;
        gap: 5px;
        margin-right: 3px;
    }

    .minimize-icon,
    .resize-icon,
    .close-icon {
        width: 20px;
        height: 20px;
        background: linear-gradient(to top, rgb(215, 41, 41), #ff8989);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
    }

    .cmd-container.open,
    .profile-container.open,
    .projects-container.open,
    .contacts-container.open {
        width: 90vw;
        position: initial;
    }

    .cmd-window,
    .profile-window,
    .projects-window,
    .contacts-window {
        height: 900px;
    }

    .profile-window {
        display: grid;
        justify-content: center;
        text-align: center;
    }

    .hint.open {
        padding: 35px;
    }

    .typing-cursor {
        width: 0.75rem;
        height: 1.5rem;
    }

    p,
    .window-header-text,
    .cmd-text,
    .contact-form button,
    .contact-form input,
    .contact-form textarea {
        font-size: 1.5rem;
    }

    .hint.open,
    .profile-window h1,
    .projects-window h1,
    .contacts-window h1 {
        font-size: 2rem;
    }

    .profile-picture img {
        max-width: 300px;
        border-radius: 3px;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
        border: 1px;
    }

    .project img {
        width: 200px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 20px;
        border-radius: 4px;
        margin: 10px;
    }

    .contact-form button {
        display: flex;
        margin: 20px auto;
        padding: 5px 12px;
        border: none;
        border-radius: 5px;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }




    .social-icons a {
        margin-bottom: 1vh;
        transition: none;
    }

    .social-icons a:hover {
        transform: none;
    }

    .mobile-logo {
        transition: none;
    }

    .mobile-logo:hover {
        cursor: default;
        transform: none;
    }
}

@media screen and (max-width: 1200px) {
    .loader::after {
        width: 60px;
        height: 60px;
        border: 10px solid rgb(255 255 255);
        border-top-color: transparent;
    }

    #desktop-nav {
        display: none;
    }

    #mobile-nav {
        display: flex;
    }

    /* reduce element sizes */
    .windows-container {
        margin-top: 50px;
    }

    .window-controls {
        display: flex;
        gap: 4px;
        margin-right: 2px;
    }

    .minimize-icon,
    .resize-icon,
    .close-icon {
        width: 15px;
        height: 15px;
        background: linear-gradient(to top, rgb(215, 41, 41), #ff8989);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
    }

    .cmd-container.open,
    .profile-container.open,
    .projects-container.open,
    .contacts-container.open {
        width: 90vw;
        position: initial;
    }

    .cmd-window,
    .profile-window,
    .projects-window,
    .contacts-window {
        height: 800px;
    }

    .profile-window {
        display: grid;
        justify-content: center;
        text-align: center;
    }

    .hint.open {
        padding: 30px;
    }

    .typing-cursor {
        width: 0.6rem;
        height: 1.2rem;
    }

    p,
    .window-header-text,
    .cmd-text,
    .contact-form button,
    .contact-form input,
    .contact-form textarea {
        font-size: 1.2rem;
    }

    .hint.open,
    .profile-window h1,
    .projects-window h1,
    .contacts-window h1 {
        font-size: 1.5rem;
    }

    .profile-picture img {
        max-width: 200px;
        border-radius: 1px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
        border: 0.2px;
    }

    .project img {
        width: 150px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 10px;
        border-radius: 2px;
        margin: 7px;
    }

    .contact-form button {
        display: flex;
        margin: 15px auto;
        padding: 5px 12px;
        border: none;
        border-radius: 5px;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }




    .social-icons a {
        margin-bottom: 1vh;
        transition: none;
    }

    .social-icons a:hover {
        transform: none;
    }

    .mobile-logo {
        transition: none;
    }

    .mobile-logo:hover {
        cursor: default;
        transform: none;
    }
}

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

    .loader::after {
        width: 30px;
        height: 30px;
        border: 5px solid rgb(255 255 255);
        border-top-color: transparent;
    }

    #desktop-nav {
        display: none;
    }

    #mobile-nav {
        display: flex;
    }

    /* reduce element sizes */
    .windows-container {
        margin-top: 50px;
    }


    .minimize-icon,
    .resize-icon,
    .close-icon {
        width: 7px;
        height: 7px;
        background: linear-gradient(to top, rgb(215, 41, 41), #ff8989);
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
    }

    .cmd-container.open,
    .profile-container.open,
    .projects-container.open,
    .contacts-container.open {
        width: 90vw;
        position: initial;
    }

    .cmd-window,
    .profile-window,
    .projects-window,
    .contacts-window {
        height: 450px;
    }

    .profile-window {
        display: grid;
        justify-content: center;
        text-align: center;
    }

    .hint.open {
        padding: 20px;
    }

    .typing-cursor {
        width: 0.3rem;
        height: 0.6rem;
    }

    p,
    .window-header-text,
    .cmd-text,
    .contact-form button,
    .contact-form input,
    .contact-form textarea {
        font-size: 0.6rem;
    }

    .hint.open,
    .profile-window h1,
    .projects-window h1,
    .contacts-window h1 {
        font-size: 0.8rem;
    }

    .profile-picture img {
        max-width: 100px;
        border-radius: 1px;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
        border: 0.2px;
    }

    .project img {
        width: 80px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 10px;
        border-radius: 2px;
        margin: 7px;
    }

    .contact-form textarea {
        height: 100px;
    }

    .contact-form button {
        display: flex;
        margin: 15px auto;
        padding: 5px 12px;
        border: none;
        border-radius: 5px;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }


    .window-controls {
        display: flex;
        gap: 1px;
        margin-right: 2px;
    }


    .social-icons a {
        margin-bottom: 1vh;
        transition: none;
    }

    .social-icons a:hover {
        transform: none;
    }

    .mobile-logo {
        transition: none;
    }

    .mobile-logo:hover {
        cursor: default;
        transform: none;
    }

}