@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

:root
{
    --color-background: #ffffff;
    --color-light-one: #bcdbdf;
    --color-light-two: #99c8ce;
    --color-dark-one: #2e82ac;
    --color-dark-two: #235784;
    --color-light-three: #deeeef;
    --color-dark-three: #183c5c;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
    list-style: none;
}

html
{
    font-size: 62.5%;
    overflow-x: hidden;
}

.mainnav
{
    background: var(--color-dark-two);
}

nav
{
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 799px)
{
    .logo
    {
        margin-top: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo_koloska
    {
        width: auto;
        height: 120px;
    }

    .logo_koloska_because_coding_is_my_passion
    {
        display: none;
    }

    nav
    {
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 5rem;
        padding-left: 15px;
        padding-right: 30px;
        padding-bottom: 15px;
        border-radius: 0 0 25px 0;
    }

    nav ul
    {
        display: none;
    }

    #toggle_button
    {
        display: none;
    }

    #toggle_button:checked ~ ul
    {
        display: flex;
        flex-direction: column;
    }

    #toggle_button:checked ~ ul li
    {
        height: 5rem;
        padding: 1rem;
    }

    #toggle_button:checked ~ ul a
    {
        color: #ffffff;
        font-size: 2rem;
        position: relative;
        transition: all 0.4s;
    }

    #toggle_button:checked ~ ul .active::after
    {
        content: '';
        height: 2px;
        width: 100%;
        background: #ffffff;
        left: 0;
        position: absolute;
        bottom: -1px;
    }

    label[for="toggle_button"] span
    {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 4rem;
        color: #ffffff;
        margin-top: 1rem;
        margin-bottom: 1rem;
        cursor: pointer;
    }

    .mainnav
    {
        display: flex;
        flex-direction: column;
    }
}

@media only screen and (min-width: 800px)
{
    .logo_koloska
    {
        display: none;
    }

    .logo_koloska_because_coding_is_my_passion
    {
        width: auto;
        height: 120px;
    }

    .logo
    {
        margin-top: 1.5rem;
        margin-left: 150px;
    }

    .mainnav ul
    {
        display: flex;
        margin-left: 150px;
        gap: 5rem;
    }

    .mainnav li
    {
        height: 50px;
        display: flex;
        align-items: center;
    }

    .mainnav a
    {
        color: #ffffff;
        font-size: 15px;
        position: relative;
        transition: all 0.4s;
    }

    .mainnav .active::after
    {
        content: '';
        height: 2px;
        width: 100%;
        background: #ffffff;
        left: 0;
        position: absolute;
        bottom: -1px;
    }

    .mainnav .inactive::after
    {
        content: '';
        height: 2px;
        width: 100%;
        background: #ffffff;
        left: 0;
        position: absolute;
        bottom: -1px;
        opacity: 0;
        transition: all 0.5s;
        pointer-events: none;
    }

    .mainnav .inactive:hover::after
    {
        opacity: 1;
    }

    #toggle_button
    {
        display: none;
    }

    label[for="toggle_button"]
    {
        display: none;
    }
}