.menu .a{
    color: #ffff;
    left: 0;
}

.menu .a:hover{
    color: var(--hover);
    left: 10px;
}



#aboutA{
    color: var(--hover);
    left: 10px;
}

.grid-box{
    display: grid;
    margin: 15px 14% 15px 14%;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(130px, 1fr));
}
.aboutGB{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid #ffff;

}

.aboutDiv{
    display: flex;
    flex-direction: column;
    width: 100vw;
}
.aboutDiv p{
    margin: 0 14% 0 14%;
    text-align: justify;
}
.playButton{
    width: clamp(30px, 4vw, 70px);
    height: clamp(30px, 2vw, 70px);
}
.playButton svg{
    fill: rgb(255, 255, 255,0.6);
    transition: transform 0.2s ease-in-out;
}
.playButton svg:hover{
    transform: scale(1.2);
}
.playButton svg:active{
    transform: scale(1.2);
}




#aboutgb1{
    background-image: url(about-files/about1.webp);
    
}
#aboutgb2{
    background-image: url(about-files/about2.webp);
}
#aboutgb3{
    background-image: url(about-files/about3.webp);
}