*,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    min-height: 120vh;
    background-color: black;
}

/* ---------- FIRST ROW ---------- */
.first{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    gap: 50px;

    >.mercury{
        transform-style: preserve-3d;
        filter: drop-shadow(0 0 40px rgba(255,255,255,0.3));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            /* TEXTURE (چرخش واقعی) */
            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 25s linear infinite;
                background-image: url('img/mercury2.jpg');
            }
            /* سایه کروی */
            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }
    }
    >.venus{
        transform-style: preserve-3d;
        filter: drop-shadow(0 0 40px rgba(235, 215, 168, 0.3));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 10s linear infinite;
                background-image: url('img/venus2.jpg');
            }
            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }
    }
    >.earth{
        transform-style: preserve-3d;
        filter: drop-shadow(0 0 40px rgba(98, 169, 250, 0.426));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 80s linear infinite;
                background-image: url('img/earth.jpg');
            }
            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }
    }
    >.mars{
        transform-style: preserve-3d;
        filter: drop-shadow(0 0 40px rgba(244, 137, 137, 0.368));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            box-shadow: 0 0 10% 10% white;
            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 50s linear infinite;
                background-image: url('img/mars.jpg');
            }
            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }
    }
    >.jupiter{
        transform-style: preserve-3d;
        filter: drop-shadow(0 0 40px rgba(235, 181, 111, 0.285));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 10s linear infinite;
                background-image: url('img/jupiter.jpg');
            }
            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }
    }
    >.saturn{
        transform-style: preserve-3d;
        filter: drop-shadow(0 0 40px rgba(242, 244, 155, 0.3));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;
            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 10s linear infinite;
                background-image: url('img/saturn.jpg');
            }
            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }
    }
}

/* ---------- SECOND ROW ---------- */
.second{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 40px;
    margin-top: 60px;
    gap: 50px;

    >.uranus{
        filter: drop-shadow(0 0 40px rgba(149, 216, 255, 0.3));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;

            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 10s linear infinite;
                background-image: url('img/uranus2.jpg');
            }

            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }

    }
    >.neptune{
        filter: drop-shadow(0 0 40px rgba(106, 146, 239, 0.3));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;

            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 10s linear infinite;
                background-image: url('img/neptune.jpg');
            }

            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }

    }
    >.pluto{
        filter: drop-shadow(0 0 40px rgba(255,255,255,0.3));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;

            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 70s linear infinite;
                background-image: url('img/pluto.jpg');
            }

            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }

    }
    >.sun{
        filter: drop-shadow(0 0 40px rgba(252, 150, 99, 0.3));
        >figure{
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 50%;

            &::before{
                content: '';
                position: absolute;
                inset: 0;
                background-size: cover;
                background-repeat: repeat-x;
                animation: sphereSpin 100s linear infinite;
                background-image: url('img/sun.jpg');
            }

            &::after{
                content: '';
                position: absolute;
                inset: 0;
                border-radius: 50%;
                background: radial-gradient(circle at 30% 30%, transparent 10%, rgb(0, 0, 0));
            }
        }

        >h3{
            font-size: 30px;
            text-transform: uppercase;
            color: white;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: normal;
            padding-top: 30px;
        }

        >div{
            padding-top: 20px;
            >p{
                color: rgba(255, 218, 185, 0.652);
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                margin: 10px 0;
            }
        }

    }
}
.footer{
    >figure{
        position: relative;
        >.fixed-avatar{
            position: fixed;
            bottom: 10px;   
            right: 10px;    
            width: 180px;    
            height: 180px;
            border-radius: 50%; 
            object-fit: cover;
            z-index: 9999;
            filter: drop-shadow(10px 10px 50px #222);
            transition: .8s;
            &:hover{
                scale: 1.06;
            }
        }
    }
    >div{
        position: fixed;
        bottom: 10px;
        right: 196px;
        display: flex;
        flex-direction: column; 
        gap: 10px;
        >a{
            /* border: 1px solid red; */
            color: grey;
            font-size: 30px;
            text-decoration: none;
            transition: .3s;
            /* position: fixed; */
            &:hover{
                transform: scale(1.3);
            }
            &:nth-of-type(1){
                color: grey;
            }
            &:nth-of-type(2){
                color: white;
            }
            &:nth-of-type(3){
                color: grey;
            }
            &:nth-of-type(4){
                color: white ;
            }
            
        }
    }
}
/* ---------- ANIMATION ---------- */
@keyframes sphereSpin {
    from{
        background-position-x: 0;
    }
    to{
        background-position-x: -1000%;
    }
}