/* =========================================
   BASIC SETTINGS
========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {

    font-family: Georgia, "Times New Roman", serif;

    background: #111;

    color: #f4f1e8;

    overflow-x: hidden;

}


/* =========================================
   BACKGROUND IMAGE
========================================= */

.background {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        linear-gradient(
            rgba(10, 10, 15, 0.35),
            rgba(10, 10, 15, 0.45)
        ),
        url("images/main.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: -5;

}


/* =========================================
   GRAIN / INDIE WEB TEXTURE
========================================= */

.grain {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 50;

    opacity: 0.08;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");

}


/* =========================================
   HEADER
========================================= */

.top-header {

    position: fixed;

    top: 20px;
    right: 25px;

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 14px;

}


.site-title {

    color: white;

    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 17px;

    letter-spacing: 1px;

    text-shadow:
        0 0 10px rgba(255,255,255,0.4);

    transition: 0.2s ease;

}


.site-title:hover {

    letter-spacing: 2px;

}


.menu-button {

    width: 34px;

    height: 34px;

    border: 1px solid rgba(255,255,255,0.7);

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

    color: white;

    cursor: pointer;

    font-size: 18px;

    backdrop-filter: blur(8px);

}


.menu-button:hover {

    background: rgba(255,255,255,0.15);

}


/* =========================================
   SIDE MENU
========================================= */

.side-menu {

    position: fixed;

    top: 0;
    right: -340px;

    width: 320px;

    height: 100vh;

    background:
        rgba(15,15,18,0.94);

    backdrop-filter: blur(15px);

    border-left:
        1px solid rgba(255,255,255,0.25);

    z-index: 200;

    transition:
        right 0.35s ease;

}


.side-menu.open {

    right: 0;

}


.close-menu {

    position: absolute;

    top: 20px;

    right: 22px;

    background: none;

    border: none;

    color: white;

    font-size: 30px;

    cursor: pointer;

}


.menu-inner {

    display: flex;

    flex-direction: column;

    padding: 100px 40px;

    gap: 28px;

}


.menu-link {

    color: white;

    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 17px;

    transition: 0.2s ease;

}


.menu-link:hover {

    padding-left: 8px;

    opacity: 0.65;

}


.loading {

    opacity: 0.35;

    cursor: default;

}


/* =========================================
   MAIN PAGE
========================================= */

.main-page {

    position: relative;

    min-height: 100vh;

    width: 100%;

    overflow: hidden;

}


/* =========================================
   MEMBER LINKS
========================================= */

.member {

    position: absolute;

    color: white;

    text-decoration: none;

    z-index: 10;

    font-family:
        "Courier New",
        monospace;

    font-size: 16px;

    letter-spacing: 0.5px;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease,
        letter-spacing 0.25s ease;

    text-shadow:
        0 1px 10px rgba(0,0,0,0.8);

}


.member:hover {

    transform: scale(1.12) rotate(-1deg);

    letter-spacing: 1px;

    opacity: 0.7;

}


/* =========================================
   KOREAN + ENGLISH
========================================= */

.korean {

    font-family:
        "Noto Sans KR",
        "Arial",
        sans-serif;

}


.english {

    font-family:
        "Courier New",
        monospace;

}


/* =========================================
   MEMBER POSITIONS
========================================= */

/*
   ЭТИ ЗНАЧЕНИЯ МОЖНО МЕНЯТЬ.

   left = расстояние слева
   top = расстояние сверху
*/


.keita {

    left: 11%;

    top: 21%;

}


.hanbin {

    left: 27%;

    top: 42%;

}


.jeonghyeon {

    right: 13%;

    top: 27%;

}


.jihoo {

    left: 13%;

    bottom: 23%;

}


.junghyun {

    right: 25%;

    bottom: 18%;

}


.seungeon {

    right: 8%;

    top: 53%;

}


.yunseo {

    left: 46%;

    top: 14%;

}


/* =========================================
   CENTER MESSAGE
========================================= */

.etoiles {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: min(620px, 70vw);

    text-align: center;

    z-index: 5;

}


.etoiles-small {

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    letter-spacing: 5px;

    margin-bottom: 14px;

    opacity: 0.75;

}


.etoiles h1 {

    margin: 0;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(27px, 4vw, 50px);

    font-weight: normal;

    font-style: italic;

    line-height: 1.1;

    text-shadow:
        0 3px 20px rgba(0,0,0,0.8);

}


.etoiles p {

    margin-top: 25px;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;

    line-height: 1.8;

    max-width: 550px;

    margin-left: auto;

    margin-right: auto;

    text-shadow:
        0 2px 12px rgba(0,0,0,0.9);

}


/* =========================================
   DECORATIVE STARS
========================================= */

.tiny-star {

    position: absolute;

    color: white;

    opacity: 0.75;

    z-index: 3;

}


.star-1 {

    left: 35%;

    top: 25%;

}


.star-2 {

    right: 32%;

    top: 38%;

}


.star-3 {

    left: 22%;

    bottom: 38%;

}


.star-4 {

    right: 18%;

    bottom: 30%;

}


/* =========================================
   FLOATING NOTES
========================================= */

.floating-note {

    position: absolute;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    opacity: 0.5;

    z-index: 2;

}


.note-1 {

    left: 4%;

    top: 52%;

    transform: rotate(-8deg);

}


.note-2 {

    right: 4%;

    top: 80%;

    transform: rotate(5deg);

}


.note-3 {

    left: 55%;

    bottom: 7%;

    transform: rotate(-3deg);

}


/* =========================================
   FOOTER
========================================= */

.footer {

    position: fixed;

    bottom: 12px;

    left: 20px;

    z-index: 20;

    display: flex;

    gap: 12px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    opacity: 0.6;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {


    .top-header {

        top: 15px;

        right: 15px;

    }


    .site-title {

        font-size: 13px;

    }


    .member {

        font-size: 12px;

    }


    .etoiles {

        width: 80vw;

    }


    .etoiles h1 {

        font-size: 29px;

    }


    .etoiles p {

        font-size: 10px;

        line-height: 1.7;

    }


    .keita {

        left: 8%;

        top: 18%;

    }


    .hanbin {

        left: 8%;

        top: 34%;

    }


    .jeonghyeon {

        right: 7%;

        top: 28%;

    }


    .jihoo {

        left: 8%;

        bottom: 22%;

    }


    .junghyun {

        right: 8%;

        bottom: 18%;

    }


    .seungeon {

        right: 7%;

        top: 55%;

    }


    .yunseo {

        left: 38%;

        top: 11%;

    }


    .side-menu {

        width: 85vw;

    }


    .footer {

        display: none;

    }

}