@font-face{
    font-family:Caviar;
    src:url(Caviar.ttf);
}

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;

    background:#050505;
    color:white;

    font-family:Caviar,sans-serif;
}

.bg-gif{
    position:fixed;
    inset:0;

    background:
        url("about.GIF")
        center center
        / cover
        no-repeat;

    opacity:.3;

    z-index:0;
}

.grass-wrap{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:30vh;

    overflow:hidden;

    z-index:1;
}

.grass-wrap img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:top center;

    opacity:.4;
}
.nav{
    position:fixed;

    top:28px;
    left:0;
    right:0;

    padding:0 48px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    z-index:100;
}

.logo img{
    width:220px;
    display:block;
}


nav{

    display:flex;
    align-items:center;
    gap:70px;

    padding-bottom:18px;

    border-bottom:
        1px solid rgba(255,255,255,.25);

    min-width:730px;
}


nav a{

    color:
        rgba(255,255,255,.85);

    text-decoration:none;

    font-size:13px;

    font-weight:300;

    letter-spacing:.08em;

    text-transform:uppercase;

    display:flex;
    align-items:center;

    transition:
        opacity .25s ease;
}

nav a:hover{
    opacity:1;
}


nav a.active{

    color:white;
}


.nav-marker{

    width:12px;
    height:12px;

    margin-right:8px;

    flex-shrink:0;

    object-fit:contain;
}


nav a.active img{

    width:12px;

    margin-right:8px;

    display:block;
}


.dot{

    width:5px;
    height:5px;

    border-radius:50%;

    background:white;

    margin-right:8px;

    flex-shrink:0;
}


@media (max-width:1200px){

    nav{
        gap:40px;
        min-width:auto;
    }

    .logo img{
        width:180px;
    }
}

#scene{
    position:relative;
    width:100%;
    height:100vh;
}

.wing{
    position:absolute;

    top:50%;

    width:18vw;
    max-width:280px;

    transform:translateY(-50%);

    mix-blend-mode:screen;

    z-index:10;
}

.left{
    left:51%;
    margin-left:-257px;
}

.right{
    right:51%;
    margin-right:-257px;
}

#text{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    max-width:760px;

    text-align:center;

    opacity:0;
    filter:blur(12px);

    z-index:20;
}

#text p{
    font-size:22px;
    line-height:1.6;

    margin-bottom:18px;
}

#particles{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:15;
}

.particle{
    position:absolute;

    width:12px;
    height:12px;

    border-radius:50%;

background:
radial-gradient(
circle,
rgba(221, 226, 245, 0.6) 80%,
rgba(245,240,221,.2) 40%,
transparent 88%
);
    filter:blur(8px);

    pointer-events:none;

    will-change:
        transform,
        opacity;
}
.decor-1{
 left:2%;
 top:22%;
 width:420px;
 height:260px;
 transform:rotate(-8deg);
}

.decor-2{
 left:0%;
 top:42%;
 width:320px;
 height:180px;
 transform:rotate(12deg);
}

.decor-3{
 right:4%;
 top:40%;
 width:260px;
 height:180px;
}

.decor-4{
 right:6%;
 bottom:6%;
 width:650px;
 height:320px;
 transform:rotate(-12deg);
}
@media (max-width:768px){.nav{top:22px;left:0;right:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px}.logo img{width:150px}nav{width:min(82vw,480px);min-width:0;max-width:none;gap:0;display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.32)}nav a{font-size:10px;letter-spacing:.055em;white-space:nowrap}.nav-marker,nav a.active img{width:8px;height:8px;margin-right:4px}}
@media (max-width:430px){.nav{top:20px;gap:22px}.logo img{width:138px}nav{width:86vw}nav a{font-size:9px;letter-spacing:.04em}}
#text p{font-size:18px;line-height:1.52;margin-bottom:16px}.wing{width:15vw;max-width:230px}.left{margin-left:-230px}.right{margin-right:-230px}
@media (max-width:768px){#text{width:76vw;max-width:420px;top:52%}#text p{font-size:14px;line-height:1.48;margin-bottom:13px}.wing{width:26vw;max-width:145px;opacity:.78}.left{left:50%;margin-left:-150px}.right{right:50%;margin-right:-150px}.grass-wrap{height:24vh}.bg-gif{opacity:.3}}
@media (max-width:430px){#text{width:82vw;top:53%}#text p{font-size:12.5px;line-height:1.45;margin-bottom:11px}.wing{width:24vw;max-width:110px}.left{margin-left:-118px}.right{margin-right:-118px}}