@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    width:100%;
    height:100vh;
    overflow:hidden;
    background:#000;
    font-family:'Cinzel', serif;

    display:flex;
    justify-content:center;
    align-items:center;

    perspective:2000px;
}

/* ================================= */
/* MAIN WRAPPER */
/* ================================= */

.main-wrapper{
    position:relative;

    width:100vw;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    transform-style:preserve-3d;
}

/* ================================= */
/* FULL IMAGE */
/* ================================= */

.bg-image{
    position:cover;

    height:100vh;
    width:auto;

    object-fit:contain;
    object-position:center;

    z-index:1;

    pointer-events:none;

    user-select:none;
}

/* ================================= */
/* OUTER GOLD RING */
/* ================================= */

.outer-ring{
    position:absolute;

    width:77vh;
    height:77vh;

    border-radius:50%;

    border:7px solid rgba(255,210,130,0.95);

    box-shadow:
    0 0 18px rgba(255,220,160,0.7),
    0 0 40px rgba(255,180,80,0.45),
    inset 0 0 15px rgba(255,220,160,0.45);

    animation:rotateOuter 18s linear infinite;

    z-index:5;
}

/* OUTER GLOW */

.outer-ring-glow{
    position:absolute;
    inset:-18px;

    border-radius:50%;

    border:2px solid rgba(255,220,160,0.18);

    filter:blur(4px);
}

/* ================================= */
/* INNER GOLD RING */
/* ================================= */

.inner-ring{
    position:absolute;

    width:43vh;
    height:43vh;

    border-radius:50%;

    border:5px solid rgba(255,220,160,0.95);

    box-shadow:
    0 0 14px rgba(255,220,160,0.6),
    0 0 35px rgba(255,180,80,0.4),
    inset 0 0 14px rgba(255,220,160,0.35);

    animation:rotateInner 10s linear infinite reverse;

    z-index:5;
}

/* INNER GLOW */

.inner-ring-glow{
    position:absolute;
    inset:-12px;

    border-radius:50%;

    border:2px solid rgba(255,220,160,0.15);

    filter:blur(3px);
}

/* ================================= */
/* NAVIGATION */
/* ================================= */

.nav{
    position:absolute;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-decoration:none;

    color:#e6c58f;

    z-index:10;

    transition:0.4s ease;
}

.nav:hover{
    transform:scale(1.08);

    text-shadow:
    0 0 10px rgba(255,220,160,0.8),
    0 0 20px rgba(255,180,80,0.5);
}

/* ROMAN */

.nav .roman{
    font-size:18px;
    margin-bottom:8px;
    opacity:0.8;
}

/* TEXT */

.nav .text{
    font-size:30px;
    font-weight:500;
}

/* ACTIVE */

.active .text{
    border-bottom:2px solid #e6c58f;
    padding-bottom:5px;
}

/* ================================= */
/* PERFECT SYMMETRIC POSITIONING */
/* ================================= */

.home{
    top:5%;
    left:50%;
    transform:translateX(-50%);
}

.about{
    top:27%;
    right:10%;
}

.products{
    bottom:27%;
    right:10%;
}

.quality{
    bottom:5%;
    left:50%;
    transform:translateX(-50%);
}

.why-woodio{
    bottom:67%;
    left:10%;
}

.find-us {
    position: absolute;
    top: 75%;
    left: 20%;
    transform: translate(-50%, -50%);
}
/* HOME POINTER */

.home::after{
    content:'';

    position:absolute;

    top:56px;

    width:0;
    height:0;

    border-left:14px solid transparent;
    border-right:14px solid transparent;
    border-top:22px solid rgba(255,210,130,0.95);
}

/* ================================= */
/* ANIMATIONS */
/* ================================= */

@keyframes rotateOuter{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes rotateInner{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(-360deg);
    }

}

/* ================================= */
/* RESPONSIVE */
/* ================================= */

@media(max-aspect-ratio:1/1){

    .bg-image{
        width:100vw;
        height:auto;
    }

    .outer-ring{
        width:77vw;
        height:77vw;
    }

    .inner-ring{
        width:43vw;
        height:43vw;
    }

}

@media(max-width:900px){

    .nav .text{
        font-size:18px;
    }

    .nav .roman{
        font-size:13px;
    }

}