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

html{

scroll-behavior:smooth;

}

body{

font-family:
"Yu Gothic UI",
sans-serif;

background:

#0b1020;

color:white;

overflow-x:hidden;

}

/* ---------- */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

background-image:

linear-gradient(

rgba(0,0,0,.55),

rgba(0,0,0,.7)

),

url("images/hero.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

}

/* ---------- */

.overlay{

backdrop-filter:blur(8px);

background:

rgba(0,0,0,.35);

padding:60px;

border-radius:25px;

box-shadow:

0 20px 60px rgba(0,0,0,.4);

}

/* ---------- */

h1{

font-size:70px;

margin-bottom:20px;

}

.hero p{

font-size:24px;

line-height:1.8;

color:#d8ddff;

margin-bottom:40px;

}

/* ---------- */

.join-button{

display:inline-block;

padding:

18px 45px;

background:#5865F2;

border-radius:15px;

color:white;

text-decoration:none;

font-size:20px;

transition:.3s;

}

.join-button:hover{

background:#7380ff;

transform:

translateY(-5px);

}

/* ---------- */

section{

max-width:1100px;

margin:auto;

padding:120px 20px;

}

section h2{

font-size:40px;

margin-bottom:20px;

}

section p{

font-size:20px;

color:#c7ccff;

margin-bottom:40px;

}

/* ---------- */

.video{

aspect-ratio:16/9;

border-radius:20px;

background:#1b2140;

border:2px solid

rgba(255,255,255,.08);

}

/* ---------- */

@media(max-width:768px){

h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.overlay{

padding:35px;

margin:20px;

}

section h2{

font-size:30px;

}

}

/* -------------------- */
/* YouTube */

.video iframe{

width:100%;

height:100%;

border:none;

border-radius:20px;

}

/* -------------------- */
/* スクロール表示 */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* -------------------- */
/* 星空 */

#stars{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

z-index:-1;

}

.star{

position:absolute;

width:2px;

height:2px;

background:white;

border-radius:50%;

animation:twinkle linear infinite;

opacity:.6;

}

@keyframes twinkle{

0%{

transform:translateY(0);

opacity:.3;

}

50%{

opacity:1;

}

100%{

transform:translateY(-120px);

opacity:.3;

}

}

/* ---------------- */

.logo{

width:520px;

max-width:90%;

margin-bottom:35px;

filter:drop-shadow(0 0 25px rgba(170,180,255,.4));

}

/* ---------------- */

.card-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(240px,1fr));

gap:30px;

}

.card{

background:rgba(255,255,255,.07);

backdrop-filter:blur(12px);

padding:35px;

border-radius:20px;

transition:.35s;

border:1px solid rgba(255,255,255,.08);

}

.card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.11);

}

.card h3{

margin-bottom:15px;

font-size:24px;

}

.card p{

font-size:18px;

color:#d2d6ff;

}

/* ---------------- */

.gallery-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:25px;

}

.gallery-grid img{

width:100%;

border-radius:20px;

cursor:pointer;

transition:.3s;

}

.gallery-grid img:hover{

transform:scale(1.03);

}

/* ---------------- */

.join{

text-align:center;

}

.join h2{

margin-bottom:25px;

}

footer{

padding:50px;

text-align:center;

color:#999;

}

/* ---------------- */

@media(max-width:768px){

.hero{

background-attachment:scroll;

}

.logo{

width:300px;

}

.gallery-grid{

grid-template-columns:1fr;

}

.card-grid{

grid-template-columns:1fr;

}

.join-button{

display:block;

width:100%;

}

}

.gallery-placeholder{

height:260px;

border:2px dashed rgba(255,255,255,.2);

border-radius:20px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

background:rgba(255,255,255,.04);

backdrop-filter:blur(8px);

transition:.3s;

}

.gallery-placeholder:hover{

background:rgba(255,255,255,.07);

transform:translateY(-5px);

}

.gallery-placeholder span{

font-size:60px;

margin-bottom:15px;

}

.gallery-placeholder h3{

margin-bottom:10px;

font-size:24px;

}

.gallery-placeholder p{

color:#cfd6ff;

line-height:1.6;

}

/* ---------------- */

.carousel{

display:flex;

align-items:center;

gap:20px;

margin-top:40px;

}

.carousel-track{

overflow-x:auto;

    overflow-y:hidden;

display:flex;

flex:1;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -ms-overflow-style:none;

    scroll-snap-type:
    x mandatory;

}


.carousel-track::-webkit-scrollbar{

    display:none;

}


.carousel-track img{

    flex:
    0 0 100%;

    width:100%;

    min-width:100%;

    scroll-snap-align:start;

    border-radius:20px;

}

.carousel-track img:hover{

transform:scale(1.02);

}

.arrow{

background:#5865F2;

border:none;

width:55px;

height:55px;

border-radius:50%;

font-size:24px;

color:white;

cursor:pointer;

transition:.3s;

}

.arrow:hover{

background:#7480ff;

}

/* ---------------- */

.modal{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.85);

display:flex;

justify-content:center;

align-items:center;

z-index:999;

opacity:0;

pointer-events:none;

transition:.3s;

}

.modal.active{

opacity:1;

pointer-events:auto;

}

.modal img{

max-width:90%;

max-height:90%;

border-radius:20px;

}


/* ---------- */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 8%;

background:rgba(0,0,0,.35);

backdrop-filter:blur(12px);

z-index:999;

}

.nav-links{

display:flex;

gap:25px;

}

.nav-links a{

color:white;

text-decoration:none;

transition:.3s;

}

.nav-links a:hover{

color:#8ea4ff;

}

/* ---------- */

.scroll-down{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

font-size:40px;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:

translate(-50%,0);

}

50%{

transform:

translate(-50%,12px);

}

}

/* ---------- */

#topButton{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#5865F2;

color:white;

font-size:22px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.4);

}

#topButton:hover{

background:#7480ff;

}

/* ---------- */

.card{

box-shadow:

0 15px 40px rgba(0,0,0,.25);

}

/* ---------- */

.card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:

linear-gradient(

90deg,

#5865F2,

#8eb2ff

);

}

/* ---------- */

@media(max-width:768px){

.nav-links{

display:none;

}

}

/* ================================= */
/* Ver.2.0 運営紹介ページ */
/* ================================= */


/* ---------- */
/* サブページのヒーロー */
/* ---------- */

.subpage-hero{

min-height:55vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:120px 20px 70px;

background:

linear-gradient(

rgba(5,8,20,.65),

rgba(5,8,20,.85)

),

url("images/hero.jpg");

background-size:cover;

background-position:center;

}

.subpage-content{

background:

rgba(255,255,255,.06);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

padding:50px 60px;

border-radius:25px;

border:1px solid

rgba(255,255,255,.1);

box-shadow:

0 20px 60px

rgba(0,0,0,.35);

}

.subpage-content h1{

font-size:52px;

margin-bottom:20px;

}

.subpage-content p{

font-size:20px;

line-height:1.8;

color:#d8ddff;

}


/* ---------- */
/* ナビゲーションのロゴ */
/* ---------- */

.nav-logo a{

color:white;

text-decoration:none;

font-weight:bold;

}


/* ---------- */
/* 運営セクション */
/* ---------- */

.members-section{

max-width:1100px;

margin:auto;

padding:110px 20px;

text-align:center;

}

.members-section h2{

font-size:38px;

margin-bottom:20px;

}

.section-description{

font-size:19px;

color:#c7ccff;

line-height:1.8;

margin-bottom:60px;

}


/* ---------- */
/* 運営カード */
/* ---------- */

.member-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:35px;

}


/* ---------- */
/* 個別カード */
/* ---------- */

.member-card{

position:relative;

background:

rgba(255,255,255,.07);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

border:1px solid

rgba(255,255,255,.1);

border-radius:25px;

padding:40px 35px;

box-shadow:

0 15px 40px

rgba(0,0,0,.25);

transition:

transform .35s,

background .35s;

}

.member-card:hover{

transform:translateY(-8px);

background:

rgba(255,255,255,.10);

}


/* ---------- */
/* 運営アイコン */
/* ---------- */

.member-image{

width:150px;

height:150px;

margin:0 auto 25px;

border-radius:50%;

overflow:hidden;

border:3px solid

rgba(255,255,255,.15);

box-shadow:

0 10px 30px

rgba(0,0,0,.35);

}

.member-image img{

width:100%;

height:100%;

object-fit:cover;

}


/* ---------- */
/* 名前 */
/* ---------- */

.member-card h3{

font-size:28px;

margin-bottom:10px;

}


/* ---------- */
/* 役職 */
/* ---------- */

.member-role{

display:inline-block;

padding:6px 16px;

border-radius:30px;

background:#5865F2;

font-size:14px;

margin-bottom:25px;

}


/* ---------- */
/* 自己紹介 */
/* ---------- */

.member-card p{

font-size:17px;

line-height:1.9;

color:#d2d6ff;

}


/* ---------- */
/* 参加セクション */
/* ---------- */

.member-join{

text-align:center;

padding:100px 20px 130px;

background:

rgba(255,255,255,.02);

}

.member-join h2{

font-size:38px;

margin-bottom:20px;

}

.member-join p{

font-size:19px;

color:#c7ccff;

margin-bottom:35px;

}


/* ---------- */
/* スマホ */
/* ---------- */

@media(max-width:768px){

.subpage-hero{

min-height:60vh;

padding:110px 20px 60px;

}

.subpage-content{

width:100%;

padding:40px 25px;

}

.subpage-content h1{

font-size:38px;

}

.subpage-content p{

font-size:17px;

}

.members-section{

padding:80px 20px;

}

.members-section h2{

font-size:30px;

}

.member-grid{

grid-template-columns:1fr;

}

.member-card{

padding:35px 25px;

}

.member-join{

padding:80px 20px 100px;

}

.member-join h2{

font-size:30px;

}

}

/* ================================= */
/* 運営紹介への案内 */
/* ================================= */

.about-owners{

max-width:900px;

margin:0 auto;

padding:100px 30px;

text-align:center;

}

.about-owners h2{

font-size:38px;

margin-bottom:25px;

}

.about-owners p{

font-size:18px;

line-height:1.9;

color:#cfd5ff;

margin-bottom:35px;

}


/* ---------- */
/* 運営紹介ボタン */
/* ---------- */

.owners-button{

display:inline-block;

padding:16px 35px;

border-radius:50px;

background:

rgba(255,255,255,.08);

border:1px solid

rgba(255,255,255,.2);

color:white;

text-decoration:none;

font-size:17px;

transition:

transform .3s,

background .3s,

box-shadow .3s;

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

}

.owners-button:hover{

transform:translateY(-5px);

background:

rgba(88,101,242,.8);

box-shadow:

0 10px 30px

rgba(88,101,242,.3);

}


/* ---------- */
/* スマホ */
/* ---------- */

@media(max-width:768px){

.about-owners{

padding:80px 20px;

}

.about-owners h2{

font-size:30px;

}

.about-owners p{

font-size:16px;

}

.owners-button{

width:100%;

max-width:320px;

}

}

/* ================================= */
/* 画面左中央に固定する戻るボタン */
/* ================================= */

.back-home-button{

position:fixed;

left:15px;

bottom:80px;

transform:translateY(-50%);

z-index:1000;

padding:12px 18px;

border-radius:30px;

background:rgba(10,15,35,.45);

border:1px solid
rgba(255,255,255,.15);

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

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

text-decoration:none;

font-size:14px;

box-shadow:
0 8px 25px
rgba(0,0,0,.2);

transition:

background .3s,

color .3s,

transform .3s;

}

.back-home-button:hover{

background:rgba(88,101,242,.75);

color:white;

transform:
translateY(-50%)
translateX(4px);

}


/* ================================= */
/* スマホ */
/* ================================= */

@media(max-width:768px){

.back-home-button{

left:10px;

padding:10px 14px;

font-size:13px;

background:rgba(10,15,35,.55);

}

}

/* ================================= */
/* Ver.2.0 流れ星 */
/* ================================= */

#shooting-stars{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

z-index:5;

}


/* ---------- */
/* 流れ星本体 */
/* ---------- */

.shooting-star{

position:absolute;

width:4px;

height:4px;

border-radius:50%;

background:white;

box-shadow:

0 0 6px white,

0 0 14px rgba(180,200,255,.9),

0 0 25px rgba(140,170,255,.6);


}


/* ---------- */
/* 流れ星の尾 */
/* ---------- */

.shooting-star::after{

content:"";

position:absolute;

right:2px;

top:50%;

width:120px;

height:2px;

transform:

translateY(-50%);

background:

linear-gradient(

to left,

rgba(255,255,255,.8),

rgba(180,200,255,.4),

transparent

);

}


/* ---------- */
/* アニメーション */
/* ---------- */

.shooting-star{

animation:

shootingStar 1.2s

linear forwards;

}


@keyframes shootingStar{

0%{

opacity:0;

transform:

translate(0,0)

rotate(145deg)

scale(.8);

}

10%{

opacity:1;

}

100%{

opacity:0;

transform:

translate(-350px,350px)

rotate(145deg)

scale(1);

}

}

/* ================================= */
/* Ver.2.0 BGMボタン */
/* ================================= */

.bgm-toggle{

position:fixed;

left:20px;

bottom:20px;

z-index:1000;

padding:12px 18px;

border-radius:30px;

background:

rgba(10,15,35,.55);

border:1px solid

rgba(255,255,255,.15);

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

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

font-size:14px;

cursor:pointer;

box-shadow:

0 8px 25px

rgba(0,0,0,.25);

transition:

background .3s,

transform .3s,

color .3s;

}

.bgm-toggle:hover{

background:

rgba(88,101,242,.75);

color:white;

transform:

translateY(-3px);

}


/* ---------- */
/* スマホ */
/* ---------- */

@media(max-width:768px){

.bgm-toggle{

left:12px;

bottom:12px;

padding:10px 14px;

font-size:13px;

}

}

/* ================================= */
/* BGMコントロール */
/* ================================= */

.bgm-control{

position:fixed;

left:20px;

bottom:20px;

z-index:1000;

display:flex;

align-items:center;

gap:10px;

padding:10px 14px;

border-radius:30px;

background:

rgba(10,15,35,.55);

border:1px solid

rgba(255,255,255,.15);

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

box-shadow:

0 8px 25px

rgba(0,0,0,.25);

}


/* ---------- */
/* BGMボタン */
/* ---------- */

.bgm-control .bgm-toggle{

position:static;

padding:5px 4px;

border:none;

background:transparent;

box-shadow:none;

}


/* ---------- */
/* スライダー */
/* ---------- */

.bgm-volume{

width:100px;

cursor:pointer;

}


/* ---------- */
/* 音量表示 */
/* ---------- */

.bgm-volume-text{

font-size:12px;

color:

rgba(255,255,255,.75);

min-width:30px;

}


/* ---------- */
/* スマホ */
/* ---------- */

@media(max-width:768px){

.bgm-control{

left:10px;

bottom:10px;

padding:8px 10px;

gap:7px;

}

.bgm-volume{

width:75px;

}

.bgm-volume-text{

font-size:11px;

}

}

/* ================================= */
/* Ver.2.0 時間帯背景 */
/* ================================= */

#time-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:0;

background:rgba(0,0,0,0);

transition:

background 2s ease;

}


/* ================================= */
/* 朝 */
/* ================================= */

body.time-morning #time-overlay{

background:

rgba(255,190,120,.18);

}


/* ================================= */
/* 昼 */
/* ================================= */

body.time-day #time-overlay{

background:

rgba(255,255,220,.10);

}


/* ================================= */
/* 夕方 */
/* ================================= */

body.time-evening #time-overlay{

background:

rgba(255,120,70,.25);

}


/* ================================= */
/* 夜 */
/* ================================= */

body.time-night #time-overlay{

background:

rgba(20,30,90,.05);

}

/* ================================= */
/* カルーセル スマホ調整 */
/* ================================= */

@media(max-width:768px){

    .carousel{

        gap:8px;

        margin-top:30px;

    }


    .carousel-track{

        width:100%;

        gap:15px;

        border-radius:20px;

        touch-action:pan-x;

    }


    .carousel-track img{

        flex:0 0 100%;

        width:100%;

        min-width:100%;

    }


    .arrow{

        display:flex;

        position:absolute;

        z-index:10;

        width:42px;

        height:42px;

        font-size:18px;

        align-items:center;

        justify-content:center;

    }


    .carousel{

        position:relative;

    }


    .arrow.left{

        left:8px;

    }


    .arrow.right{

        right:8px;

    }

}

/* ================================= */
/* Ver.2.0 レイアウト改善 */
/* 縦方向の余白を整理 */
/* ================================= */


/* ------------------------- */
/* セクション全体 */
/* ------------------------- */

section{

    padding-top:60px;

    padding-bottom:60px;

}


/* ------------------------- */
/* ヒーロー */
/* ------------------------- */

.hero{

    min-height:calc(100vh - 70px);

    padding-top:40px;

    padding-bottom:50px;

}


/* ------------------------- */
/* セクション見出し */
/* ------------------------- */

section h2{

    margin-bottom:25px;

}


/* ------------------------- */
/* 説明文 */
/* ------------------------- */

section p{

    margin-top:10px;

    margin-bottom:20px;

}


/* ------------------------- */
/* 活動カード */
/* ------------------------- */

.activities{

    margin-top:20px;

}


/* ------------------------- */
/* 動画 */
/* ------------------------- */

.video{

    margin-top:25px;

    margin-bottom:25px;

}


/* ------------------------- */
/* カルーセル */
/* ------------------------- */

.carousel{

    margin-top:25px;

    margin-bottom:20px;

}


/* ------------------------- */
/* 運営紹介への案内 */
/* ------------------------- */

.about-link{

    margin-top:30px;

    margin-bottom:30px;

}


/* ------------------------- */
/* Discord参加エリア */
/* ------------------------- */

.join{

    padding-top:60px;

    padding-bottom:70px;

}

/* ================================= */
/* スマホ用 レイアウト調整 */
/* ================================= */

@media(max-width:768px){

    section{

        padding-top:40px;

        padding-bottom:40px;

    }


    .hero{

        min-height:calc(100vh - 60px);

        padding-top:25px;

        padding-bottom:35px;

    }


    section h2{

        margin-bottom:18px;

    }


    section p{

        margin-top:8px;

        margin-bottom:15px;

    }


    .activities{

        margin-top:15px;

    }


    .video{

        margin-top:20px;

        margin-bottom:20px;

    }


    .carousel{

        margin-top:20px;

        margin-bottom:15px;

    }


    .about-link{

        margin-top:20px;

        margin-bottom:20px;

    }


    .join{

        padding-top:45px;

        padding-bottom:50px;

    }

}

/* ================================= */
/* 活動カード スマホ2列化 */
/* ================================= */

@media(max-width:768px){

    .activities{

        grid-template-columns:
        repeat(2, 1fr);

        gap:12px;

    }


    .activity-card{

        padding:20px 12px;

        min-height:120px;

    }


    .activity-card h3{

        font-size:16px;

    }


    .activity-card p{

        font-size:12px;

        line-height:1.6;

    }

}

/* ================================= */
/* Ver.2.0 ナビゲーション改善 */
/* ================================= */


/* ================================ */
/* PCナビゲーション */
/* ================================ */

.nav{

    display:flex;

    align-items:center;

    gap:6px;

    padding:6px;

    border-radius:18px;

    background:
    rgba(10,15,35,.45);

    border:
    1px solid
    rgba(255,255,255,.15);

    backdrop-filter:
    blur(12px);

    -webkit-backdrop-filter:
    blur(12px);

    box-shadow:
    0 8px 25px
    rgba(0,0,0,.20);

}


/* ナビゲーションの各ボタン */

.nav a{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
    9px 14px;

    border-radius:13px;

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

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


/* マウスを乗せたとき */

.nav a:hover{

    background:
    rgba(255,255,255,.12);

    color:white;

    transform:
    translateY(-1px);

}


/* 現在のページ */

.nav a.active{

    background:
    rgba(255,255,255,.16);

    color:white;

    box-shadow:
    inset 0 0 0 1px
    rgba(255,255,255,.08);

}


/* ================================= */
/* Ver.2.0 ナビゲーション改善 */
/* ================================= */


/* ================================ */
/* PCナビ */
/* ================================ */

.nav-links{

    display:flex;

    align-items:center;

    gap:6px;

    padding:6px;

    border-radius:16px;

    background:
    rgba(10,15,35,.45);

    border:
    1px solid
    rgba(255,255,255,.16);

    backdrop-filter:
    blur(12px);

    -webkit-backdrop-filter:
    blur(12px);

    box-shadow:
    0 8px 25px
    rgba(0,0,0,.25);

}


.nav-links a{

    display:block;

    padding:
    9px 15px;

    border-radius:11px;

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

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


.nav-links a:hover{

    background:
    rgba(255,255,255,.12);

    color:white;

    transform:
    translateY(-1px);

}


/* ================================ */
/* スマホボタン */
/* ================================ */

.mobile-nav-button{

    display:none;

    width:46px;

    height:46px;

    padding:0;

    border-radius:14px;

    border:
    1px solid
    rgba(255,255,255,.18);

    background:
    rgba(10,15,35,.55);

    color:white;

    font-size:23px;

    cursor:pointer;

    backdrop-filter:
    blur(12px);

    -webkit-backdrop-filter:
    blur(12px);

    box-shadow:
    0 8px 25px
    rgba(0,0,0,.25);

}

/* ================================= */
/* スマホナビゲーション */
/* ================================= */

@media(max-width:768px){

    .navbar{

        padding:
        12px 16px;

    }


    .nav-links{

        display:none;

        position:absolute;

        top:70px;

        right:16px;

        width:220px;

        padding:10px;

        flex-direction:column;

        align-items:stretch;

        gap:5px;

        border-radius:18px;

        background:
        rgba(10,15,35,.88);

        border:
        1px solid
        rgba(255,255,255,.16);

        backdrop-filter:
        blur(18px);

        -webkit-backdrop-filter:
        blur(18px);

        box-shadow:
        0 15px 40px
        rgba(0,0,0,.35);

    }


    .nav-links.mobile-open{

        display:flex;

    }


    .nav-links a{

        padding:
        14px 16px;

        font-size:15px;

        border-radius:12px;

    }


    .mobile-nav-button{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}