body{
    padding:0;
    margin:0;
}

main{
    padding:0;
    margin:0;
    width:auto;
    height:100%;
    align-content: center;
}

header{
    margin:0;
    padding:0;
}

figure{
    padding:0;
    margin:0;
}

img{
    width:16em;
    height:16em;
}

@media(min-width:1600px){
    .header-container{
        width:100%;
        height:3em;
        text-align: center;
        background-color:rgb(255, 221, 227);
    }
    .assignment-container{
        margin-right:auto;
        margin-left:auto;
        width:70%;
        height:100%;
        background-image: url(images/cherries-grid.png);
        background-color:pink;
        background-size: cover;
        background-repeat: repeat-y;
    }

    
    .boxes-container{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        gap:100px;

    }

    #sec1,
    #sec2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:10px;
    }

    .block1{
        width:20em;
        height:12em;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:10px;
        border-radius: 20px;
        border-style:inset;
        border-color: pink;
        border-width: 10px;
    }

    .block2,
    .block3{
        width:20em;
        height:20em;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:10px;
        border-radius: 20px;
        border-style:inset;
        border-color: pink;
        border-width: 10px;
    }


    .block4,
    .block5,
    .block6{
        width:auto;
        height:auto;
        background-color: #ffffff;
        border-radius:20px;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:10px;
        border-radius: 20px;
        border-style:inset;
        border-color: pink;
        border-width: 10px;
    }

    .block-header1{

        background-color: rgb(255, 222, 227);
        width:80%;
        height:20%;
        border-radius:20px;
        text-align:center;
        align-content: center;
        border-style:groove;
        border-width: 10px;
        border-color: rgb(250, 175, 216);
        
    }

    .block-header1 h1{
        color:rgb(151, 61, 76);
        font-size:1em;
        transition:0.2s;
    }

    .block-main1{
        background-color: #ffdee3;
        width:80%;
        height:20%;
        border-radius:20px;
        text-align:center;
        align-content: center;
        border-style:groove;
        border-width: 10px;
        border-color: rgb(250, 175, 216);
        transition:0.2s;
    }

    .block-header1:hover h1,
    .block-main1:hover h2{
        font-size:1.2rem;
    }

    .block-main1:hover,
    .block-header1:hover{
        background-color:#ffbdc8;
        border-color: #ff8aca;
    }

    .block-main1 h2{
        color:rgb(151, 61, 76);
        font-size:1em;
    }

    .block-main1 a,
    .block-main2 a{
        text-decoration:none;
        color:rgb(151, 61, 76);
    }




    .block-header4,
    .block-header5,
    .block-header2,
    .block-header6{
        border-bottom: solid 2px;
        border-color:pink;
        width:80%;
        height:30%;
        text-align: center;
        transition:0.3s;
    }

    .block-header2:hover,
    .block-header4:hover,
    .block-header5:hover{
        background-color: #ffe0e5;
    }

    .block-header4 h2,
    .block-header5 h2,
    .block-header2 h2{
        color:rgb(214, 81, 104);
    }

    .block-main4 img{
        width:20em;

    } 

}


@media(max-width:1599px){
    .header-container{
        width:100%;
        height:3em;
        text-align: center;
        background-color:rgb(255, 221, 227);
    }
    .assignment-container{
        margin-right:auto;
        margin-left:auto;
        width:60%;
        height:auto;
        background-image: url(images/cherries-grid.png);
        background-position: cover;
        background-repeat:repeat-y;
    }

    
    .boxes-container{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        gap:100px;

    }

    #sec1,
    #sec2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:10px;
    }

    .block1,
    .block2,
    .block3{
        width:20em;
        height:20em;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:10px;
        border-radius: 20px;
        border-style:inset;
        border-color: pink;
        border-width: 10px;
    }


    .block4,
    .block5{
        width:auto;
        height:30em;
        background-color: #ffffff;
        border-radius:20px;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:10px;
        border-radius: 20px;
        border-style:inset;
        border-color: pink;
        border-width: 10px;
    }

    .block-header1{

        background-color: rgb(255, 222, 227);
        width:80%;
        height:20%;
        border-radius:20px;
        text-align:center;
        align-content: center;
        border-style:groove;
        border-width: 10px;
        border-color: rgb(250, 175, 216);
    }

    .block-header1 h1{
        color:rgb(151, 61, 76);
        font-size:1em;
    }

    .block-main1{
        background-color: #ffdee3;
        width:80%;
        height:20%;
        border-radius:20px;
        text-align:center;
        align-content: center;
        border-style:groove;
        border-width: 10px;
        border-color: rgb(250, 175, 216);
        transition:0.2s;
    }

    .block-main1:hover,
    .block-header1:hover{
        background-color:#ffbdc8;
        border-color: #ff8aca;
    }

    .block-main1 h2{
        color:rgb(151, 61, 76);
        font-size:1em;
    }

    .block-main1 a,
    .block-main2 a{
        text-decoration:none;
        color:rgb(151, 61, 76);
    }




    .block-header4,
    .block-header5,
    .block-header2{
        border-bottom: solid 2px;
        border-color:pink;
        width:80%;
        height:20%;
        text-align: center;
        transition:0.3s;
    }

    .block-header2:hover,
    .block-header4:hover,
    .block-header5:hover{
        background-color: #ffe0e5;
    }

    .block-header4 h2,
    .block-header5 h2,
    .block-header2 h2{
        color:rgb(214, 81, 104);
    }

    .block-main4 img{
        width:20em;

    } 
}


@media(max-width:1300px){
    .block1,
    .block2,
    .block3{
        width:15em;
        height:15em;
    }

    .block4,
    .block5{
        width:auto;
        height:25em;
    }

    .block-main4 img,
    .block-main5 img{
        width:10em;
        height:10em;
    }
}

@media(max-width:1200px){

    .assignment-container{
        width:100%;

    }
}

@media(max-width:850px){

    .assignment-container{
        width:100%;
    }

    .block1,
    .block2,
    .block3{
        width:10em;
        height:10em;
    }

    .block-header1 h1{
        font-size:0.7rem;
    }

    .block-main1{
        align-items: center;
    }
  
    .block4,
    .block5{
        width:auto;
        height:15em;
    }

    .block-header4 h2,
    .block-header5 h2,
    .block-header2 h2{
        font-size:1rem;
    }

    .block-main2 h3{
        font-size:1rem;
    }


}