/* Medium Screens (Large Tablets and Laptops) */

/* ----------- Non-Retina Screens ----------- */
@media screen and (min-width: 641px) and (max-width: 1007px) {
    html {
        font-size: 2.1vw;
        /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
        font-family: cursive;
        margin: 0;
    }
    body {
        background-color: var(--secondary-color);
        color: var(--primary-color);
        scrollbar-color: var(--primary-color);
    }
    .container {
        width: 90vw; /* Adjust layout for moderate container width on large tablets */
        background: var(--tertiary-color);
        border-radius: 1.2vw;
        border-color: var(--tertiary-color);
        border-width: 8px;
        margin: 0 auto;
    }

    header {
        background-color: var(--complimentary-color);
        color: var(--secondary-color);
    }

    h2,
    h3 {
        font-family:
            "Franklin Gothic Medium",
            "Arial Narrow",
            Arial,
            sans-serif Verdana,
            Geneva,
            Tahoma,
            sans-serif;
        font-weight: bolder;
        text-decoration: underline;
        font-style: oblique;
        font-family: cursive;
    }

    h2 {
        font-size: 2.5;
    }

    h3 {
        font-size: 2.2;
    }

    big {
        padding-left: 3vw;
        padding-top: 1.5vh;
        font-weight: bolder;
    }

    .homepage > p {
        font-size: 2.8vw;
        text-justify: auto;
        background-color: var(--complimentary-color);
        color: var(--secondary-color);
        padding: 0.8vw;
        border-radius: 1vw;
    }

    big > a {
        color: var(--primary-color);
        font-size: 3.75vw;
        font-weight: bolder;
        text-decoration: none;
    }
    .nav-img {
        width: 3.4vw;
        height: 2.5vh;
        border-radius: 1.2rem;
        padding-right: 2vw;
    }

    .nav-link {
        text-decoration: none;
        color: var(--primary-color);
        font-weight: bold;
    }

    ul {
        display: flex;
        list-style: none;
        margin-left: 4vw;
    }

    .homepage-banner-img {
        width: 60vw;
        border-radius: 1.2rem;
    }

    .about {
        margin-left: 2vw;
        margin-right: 2vw;
    }

    .homepage {
        display: flex;
        flex-direction: column;
        justify-content: center;
        place-items: center;
        font-size: 2vw;
        text-justify: inter-word;
        text-wrap: wrap;
        padding-left: 2vw;
        padding-left: 2 vw;
    }

    .web-tech-img,
    .dtp-img,
    .db-img {
        width: 8vw;
        height: 3vh;
        border-radius: 1.2rem;
        padding-left: 8vw;
    }

    .pl-img {
        width: 10vw;
        height: 10vh;
    }

    .web-img,
    .dtp-icon,
    .db-image,
    .lssn-img {
        width: 10vw;
        height: 8vh;
    }

    .tech {
        display: flex;
        justify-content: center;
        place-items: center;
        flex-direction: column;
    }

    .lang-container {
        display: flex;
        width: 78vw;
        flex-wrap: wrap-reverse;
    }

    .lang-item {
        flex: 3;
        width: 25vw;
        padding-right: 6vw;
        padding-left: 2.5vw;
    }

    .web-container,
    .dtp-container,
    .db-container,
    .lesson-container {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }
    .web-item,
    .dtp-item,
    .db-item,
    .lesson-item {
        flex: 1;
        text-wrap: wrap;
        padding: 1.5rem;
    }

    /* floating button styles */
    .floating-btn {
        position: fixed; /* Make it fixed to the viewport */
        bottom: 1.5vh; /* Position it 20px from the bottom */
        right: 1.8vw; /* Position it 20px from the right */
        background-color: var(
            --complimentary-color
        ); /* Button background color */
        color: var(--danger); /* Button text color */
        border: none; /* Remove default button border */
        border-radius: 1.2vw;
        padding: 10px; /* Add some padding */
        font-size: 2.5vw; /* Increase font size */
        cursor: pointer; /* Change cursor to a hand */
    }
    footer {
        display: flex;
        justify-content: center;
        place-items: center;
        font-size: 2.5vw;
        background-color: var(--complimentary-color);
        color: var(--secondary-color);
        padding: 0.5rem;
    }

    #year {
        margin-right: 4vw;
    }

    .twitter-logo {
        width: 3vw;
        height: 3vh;
    }

    #twitter {
        margin-left: 6vw;
    }
}