body{
    margin: 0;
}

a{
    all: unset;
}

#wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 80px;
    row-gap: 60px;
    grid-auto-rows: 100px;
    width: 80%;
    margin-left: 10%;
    margin-top: 100px;
    height: 100%;
}

#wrapper .box{
    width: 100%;
    height: 100%;
    border: 0.8px solid rgb(100, 100, 100);
    border-radius: 8px;
    background: rgba(150, 150, 150, 0.1);
    transition: 200ms;
}

#wrapper .box h4{
    margin: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    height: 100%;
    align-items: center;
    font-size: 20px;
    font-weight: 100;
    font-family: Verdana;
    color: rgb(100, 100, 100);
    transition: 200ms;
}

#wrapper #lastBox{
    border: 1px dashed rgb(100, 100, 100);
}

#wrapper #lastBox h4{
    font-size: 50px;
    font-family: 'Times New Roman', Times, serif;
}

#wrapper #lastBox:hover{
    border: 1px dashed rgb(50, 50, 50);
}

#wrapper .box:hover{
    cursor: pointer;
    border: 0.8px solid rgb(50, 50, 50);
    transition: 200ms;
    transform: scale(1.1);
}

#wrapper .box:hover h4{
    color: rgb(50, 50, 50);
    transition: 200ms;
}