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


* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    min-height: 100%;

    background: #020202;

}


body {

    color: #eee;

    font-family:
        "Special Elite",
        "Courier New",
        monospace;

    overflow-x: hidden;

}


/* =========================
   INTRO
========================= */

#intro {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #030303;

    cursor: pointer;

    transition:
        opacity .9s ease,
        visibility .9s ease;

}


#intro.hide {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


.intro-bg {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(rgba(0, 0, 0, .45),
            rgba(0, 0, 0, .86)),
        url("assets/bg.jpg") center / cover no-repeat;

    filter:
        contrast(1.25) brightness(.65);

}


.intro-bg::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, .035) 0 1px,
            transparent 1px 4px);

}


.intro-content {

    position: relative;

    z-index: 2;

    text-align: center;

    color: #d71920;

}


.intro-small {

    font-size: 8px;

    letter-spacing: .55em;

    margin-bottom: 25px;

}


.intro-content h1 {

    margin: 0;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(32px, 5vw, 70px);

    line-height: 1.15;

    letter-spacing: .14em;

    text-shadow:
        0 0 30px rgba(215, 25, 32, .4);

}


.intro-content h1 span {

    font-size: .72em;

}


.intro-line {

    margin: 28px 0;

    opacity: .5;

}


.intro-enter {

    font-size: 8px;

    letter-spacing: .5em;

}


/* =========================
   SITE
========================= */

#site {

    min-height: 100vh;

    opacity: 0;

    transform: scale(1.03);

    transition:
        opacity 1s ease,
        transform 1s ease;

}


#site.show {

    opacity: 1;

    transform: scale(1);

}


body {

    background:
        linear-gradient(rgba(0, 0, 0, .40),
            rgba(0, 0, 0, .88)),
        url("assets/bg.jpg") center / cover fixed no-repeat;

}


.vignette {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 20;

    background:
        radial-gradient(circle at 50% 40%,
            transparent 0 34%,
            rgba(0, 0, 0, .75) 100%);

}


.grain {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 31;

    opacity: .13;

    background:
        url("assets/grain.png") repeat;

    mix-blend-mode: screen;

}


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

header {

    text-align: center;

    padding:
        25px 14px 35px;

    color: #d71920;

}


.tiny {

    font-size: 8px;

    letter-spacing: .45em;

    opacity: .85;

    margin-bottom: 7px;

}


.title {

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(28px, 4vw, 55px);

    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;

    text-shadow:
        0 0 18px rgba(215, 25, 32, .25);

}


.line {

    margin-top: 5px;

    font-size: 9px;

    opacity: .5;

    letter-spacing: .2em;

}


/* =========================
   PROFILES
========================= */

#profiles {

    width:
        min(1100px, 94vw);

    margin:
        0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 28px;

    padding:
        0 0 130px;

}


.card {

    position: relative;

    overflow: hidden;

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

    border:
        1px solid rgba(215, 25, 32, .38);

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

    animation:
        cardIn .8s ease both;

}


.card:nth-child(2) {

    animation-delay: .15s;

}


@keyframes cardIn {

    from {

        opacity: 0;

        transform:
            translateY(30px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================
   BANNER
========================= */

.card-banner {

    height: 285px;

    position: relative;

    overflow: hidden;

    background: #080808;

}


.banner-img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        grayscale(.18) contrast(1.18) brightness(.72);

}


.banner-dark {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,
            rgba(0, 0, 0, .65),
            transparent 58%,
            rgba(0, 0, 0, .45)),

        linear-gradient(0deg,
            rgba(0, 0, 0, .85),
            transparent 65%);

}


.mini-code {

    position: absolute;

    left: 14px;

    top: 13px;

    color: #d71920;

    font-size: 7px;

    letter-spacing: .28em;

}


/* =========================
   AVATAR
========================= */

.avatar-wrap {

    width: 138px;

    height: 138px;

    margin:
        -69px auto 0;

    position: relative;

    z-index: 5;

}


.avatar {

    width: 138px;

    height: 138px;

    display: block;

    object-fit: cover;

    border-radius: 50%;

    border:
        3px solid #030303;

    background: #111;

    box-shadow:

        0 0 0 1px rgba(255, 255, 255, .18),

        0 18px 42px rgba(0, 0, 0, .95);

}


/* =========================
   STATUS
========================= */

.status {

    position: absolute;

    right: 1px;

    bottom: 5px;

    width: 21px;

    height: 21px;

    border-radius: 50%;

    background: #ef3c43;

    border:
        3px solid #030303;

    box-shadow:
        0 0 16px rgba(215, 25, 32, .65);

}


.status.offline {

    background: #777;

    box-shadow: none;

}


/* =========================
   IDENTITY
========================= */

.identity {

    text-align: center;

    padding:
        12px 25px 32px;

}


.identity h2 {

    margin: 0;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size:
        clamp(22px, 2.4vw, 31px);

    letter-spacing: .12em;

    text-transform: uppercase;

}


.username {

    margin-top: 6px;

    color: #999;

    font-size: 10px;

    letter-spacing: .13em;

}


.status-label {

    margin-top: 9px;

    color: #d71920;

    font-size: 7px;

    letter-spacing: .3em;

}


.identity p {

    min-height: 42px;

    margin:
        13px auto 0;

    max-width: 480px;

    color: #d4d4d4;

    font-size: 11px;

    line-height: 1.7;

}


/* =========================
   MUSIC
========================= */

.music {

    position: fixed;

    right: 18px;

    bottom: 18px;

    z-index: 60;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        7px 8px 7px 12px;

    border:
        1px solid rgba(215, 25, 32, .55);

    border-radius: 20px;

    background:
        rgba(5, 5, 5, .92);

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

}


.music span {

    color: #d71920;

    font-size: 9px;

}


.music b {

    color: #d71920;

    font-size: 8px;

    letter-spacing: .18em;

}


.music button {

    width: 30px;

    height: 25px;

    border-radius: 14px;

    border:
        1px solid #581015;

    color: #d71920;

    background: #090909;

    cursor: pointer;

}


.music button:hover {

    background: #d71920;

    color: #050505;

}


/* Hide YouTube iframe */

#youtubePlayer {

    position: fixed;

    width: 1px;

    height: 1px;

    left: -10px;

    bottom: -10px;

    opacity: 0;

    pointer-events: none;

}


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

@media (max-width: 780px) {

    #profiles {

        grid-template-columns: 1fr;

        max-width: 650px;

    }

}


@media (max-width: 520px) {

    .title {

        letter-spacing: .08em;

    }

    .card-banner {

        height: 220px;

    }

    .music {

        right: 10px;

        bottom: 10px;

    }

}