/* Small screen (mobile) */
@media (max-width: 480px) {
    .home .container h1 {
        font-size: 32px;
    }

    .about .container {
        display: grid;
        grid-template-columns: minmax(290px, 1fr);
    }
}

@media (max-width: 767px) {

    /* navbar in mobile & tablets */
    .burger {
        display: block;
        position: absolute;
        right: 74px;
    }

    input:checked~label:nth-of-type(1) {
        right: 74px;
        top: 18px;
    }


    nav {
        position: absolute;
        top: 116%;
        right: 0;
        background-color: white;
        width: 290px;
        text-align: center;
        padding-top: 20px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        height: 100vh;
        display: none;
    }

    nav ul {
        flex-direction: column;
    }

    nav ul li a {
        display: block;
        padding-bottom: 10px;
    }

    #burger:checked~nav {
        display: block;
    }
}

/* Medium screen (tablets) */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* Large screen (labtop) */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* X-Large screen (computer) */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}