*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#fafafa;
    color:#222;
}


header{
    padding:60px 10%;
    background:#111;
    color:white;
}


header h1{
    font-size:42px;
    margin-bottom:20px;
}


header p{
    font-size:18px;
    color:#ddd;
}


.categories{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    padding:50px 10%;

}


.categories a{

    display:block;
    background:white;
    padding:40px;
    text-decoration:none;
    color:#111;
    font-size:22px;
    border:1px solid #ddd;
    transition:.3s;

}


.categories a:hover{

    transform:translateY(-8px);
    box-shadow:0 15px 30px rgba(0,0,0,.1);

}


.product-page{

    max-width:1100px;
    margin:auto;
    padding:50px;

}


.product-page h1{

    font-size:36px;

}


.cube-container{

    width:400px;
    height:400px;
    margin:60px auto;
    perspective:900px;

}


.cube{

    width:300px;
    height:300px;
    position:relative;
    transform-style:preserve-3d;
    animation:rotate 15s infinite linear;

}


.cube img{

    position:absolute;
    width:300px;
    height:300px;
    object-fit:cover;

}


.cube img:nth-child(1){
transform:rotateY(0deg) translateZ(260px);
}


.cube img:nth-child(2){
transform:rotateY(60deg) translateZ(260px);
}


.cube img:nth-child(3){
transform:rotateY(120deg) translateZ(260px);
}


.cube img:nth-child(4){
transform:rotateY(180deg) translateZ(260px);
}


.cube img:nth-child(5){
transform:rotateY(240deg) translateZ(260px);
}


.cube img:nth-child(6){
transform:rotateY(300deg) translateZ(260px);
}



@keyframes rotate{

from{
transform:rotateY(0);
}

to{
transform:rotateY(360deg);
}

}