@charset "UTF-8";
:root{
    font-family: Arial, Helvetica, sans-serif;

    --primary-color: rgba(150, 142, 142, 0.623);
    
    --background-color: gray;
    
    --nav-bar-color: rgba(17, 17, 17, 0.932);
    
    --box-color: rgba(218, 218, 218, 0.603);

}

/* reset */
*,
*::after,
*::before {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}
.main{
    margin: 0%; padding: 0%;

    border: 1px black;
}
.menu{
    display: block;
    background-color: var(--box-color);
    padding-top: 20px;
    width: 20vw; height: 100vh;
    
}

.menu > p{
    padding: 10px 0px 10px 0px;
    border: 1px solid black;
}


#tab{
    position: relative;
    display: grid;
    display: flex;
    flex-wrap: wrap;
    grid-template-columns:repeat(auto-fit, minmax(200px, 0fr));
    grid-column-gap: 40px; 
    grid-row-gap: 70px;
 
    justify-content: center;

    width: 90vw; height: 60vh; 
    size: 1700px;
    margin-top: 10px;
}
.ima{
    position: relative;
    background-color: white;
    border-radius: 8%;
    width: 16vw; height: 20vw;
    
}

img{
    position: relative;
    border-radius: 8%;
    width: auto; height: 33vh;
}

@media (max-width: 900px){
    .ima{
        width: 30vw; height: 30vw;
        margin: auto;   
    }
}

@media (max-width: 800px){
    img{
        width: auto; height: 28vh;
    }

    .tab{
        width: auto; height: 50vh;
    }
    .ima{
        width: auto; height: 40vh;
    }
}