@media (max-width: 768px) {
    nav .menu-btn i {
        color: black;
        display: block;
        margin-right: 30px;
    }

    nav ul {
        position: fixed;
        top: 80px;
        right: 100%;
        background: #111;
        width: 12em;
        left: auto;
        text-align: center;
        display: block;
        transition: all 0.3s ease;
    }

    #click:checked ~ ul {
        right: 0;
    }

    nav ul li {
        width: 100%;
        margin: 40px 60px;
    }

    nav ul li a {
        width: 100%;
        margin-left: -100%;
        display: block;
        font-size: 20px;
        transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    #click:checked ~ ul li a {
        margin-left: 0px;
    }

    .layer {
        margin-left: 20px;
    }

    nav ul li a:hover {
        background: none;
        color: cyan;
    }

    nav ul li .layer i {
        color: white;
    }
    
    nav ul li:nth-child(6) {
        margin: 0;
    }
    
    nav ul li:nth-child(6) .search-form input[type="text"] {
        padding: 5px 0;
    }
    /* body */
    .bluewhite, .www, .cloud, .cloud-comp, .html, .css, .js, .python, .sql , .all {
        width: 89em;
    }

    .quick-pass.scrolled {
        top: 1000px;
    }
}    


@media (max-width: 1200px) {
    /* body */
    .bluewhite, .www, .cloud, .cloud-comp, .html, .css, .js, .python, .sql , .all {
        width: 89em;
    }

    .quick-pass.scrolled {
        top: 500px;
    }
}




@media (min-width: 1500px)  {


        .www-content {
            width: 1000px;
            top: 200px;
        }

        .cloud-comp-content {
            width: 850px;
        }

        .cloud-content {
            left: 150px;
        }

        .cloud-pic {
            left: 700px;
        }

        .card {
            margin-left: 230px;
        }

        .code-editor a {
            right: 300px;
            top: 40px;
        }

        .footer-blue {
            width: auto;
        }

        .footer-details {
            left: 450px;
            width: 1000px;
        }

        .footer-details table {
            width: 900px;
        }

        .card a {
            width: 11em;
        }
}