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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#ecf0f3;
}

nav{
    width:100%;
    background:#ecf0f3;
    padding:12px 0;
    box-shadow:-3px -3px 7px #ffffff,
                 3px 3px 5px #ceced1;
}

nav .menu{
    max-width:1270px;
    margin:auto;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
}

.menu .logo a{
    font-size:28px;
    font-weight:600;
    text-decoration:none;
    color:#31344b;
}

.menu ul{
    list-style:none;
    display:flex;
    position:relative;
}

.menu ul li{
    list-style:none;
}

.menu ul a{
    margin:0 8px;
    text-decoration:none;
    font-size:18px;
    color:#31344b;
    font-weight:400;
    display:inline-flex;
    padding:10px 12px;
    box-shadow:-3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
    border-radius:8px;
    transition:
        box-shadow 0.25s ease,
        transform 0.15s ease,
        color 0.3s ease;
}

.menu ul a:hover{
    color:#3498db;
    box-shadow:
        inset -3px -3px 7px #ffffff,
        inset 3px 3px 5px #ceced1;
    transform:translateY(2px);
}

.menu ul a:active{
    transform:translateY(3px);
    box-shadow:
        inset -4px -4px 8px #ffffff,
        inset 4px 4px 8px #ceced1;
}

.button{
    color:#31344b;
    font-size:22px;
    cursor:pointer;
    display:none;
}

.cancel{
    position:absolute;
    top:20px;
    right:25px;
    display:none;
}

#check{
    display:none;
}

@media (max-width:940px){

    .bars{
        display:block;
    }

    .menu ul{
        display:block;
        position:fixed;
        top:0;
        left:-100%;
        width:100%;
        max-width:400px;
        padding-top:60px;
        height:100%;
        background:#ecf0f3;
        box-shadow:0 5px 10px #b0b0b5;
        z-index:12;
        transition:all 0.4s ease;
        text-align:center;
    }

    .menu ul a{
        display:block;
        font-size:23px;
        margin-top:30px;
        box-shadow:none;
    }

    #check:checked ~ ul{
        left:0;
    }

    #check:checked ~ ul .cancel{
        display:block;
    }

    #check:checked ~ .bars{
        display:none;
    }
}
h1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 80vh;
    padding: 20px;
    font-size: clamp(28px, 5vw, 50px);
    color: #31344b;
}