@import url('https://fonts.googleapis.com/css2?family=Bitcount+Single:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    /*--main-font: 'Bitcount Single';*/
    --main-font: 'Special Elite';
    --bt-font: 'Bitcount Single';
    --vt-font: 'VT323';


    --spacing: 0.25rem;
    --text-base: 1rem;
    --bigger-text: 25px;
    --text-xs: 0.75rem;
    --main-text-color: #d4c5ba;
    --lighter-text-color: #f5f0e8;
    --dark-bg: #100d0f;
    --lighter-bg: #3a2f32;
    --border-color: #5a4f52;
    --border-color-dark: #3a3234;
}

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

body {
    font-family: var(--main-font), sans-serif;
    box-sizing: border-box;
    background-color: #1a1216;
    overflow-x: hidden;
    min-height: 100vh;
    color: var(--main-text-color);
}

/*header*/
.header_container {
    background: linear-gradient(45deg, #2a2226 25%, transparent 25%, transparent 75%, #2a2226 75%, #2a2226), linear-gradient(45deg, #2a2226 25%, transparent 25%, transparent 75%, #2a2226 75%, #2a2226);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-color: #1f1a1e;
    padding: calc(var(--spacing) * 6) 0;
    border-bottom: 8px solid var(--border-color);
}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 20px;
}

.marquee_content {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.marquee_content span {
    flex-shrink: 0;
    padding-right: 25px;
    font-weight: 500;
    font-size: var(--bigger-text);
}

.text_center {
    text-align: center;
}

.text_center h1 {
    font-family: 'Press Start 2P', var(--main-font), 'sans-serif';
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--lighter-text-color);
}

.blinking_star {
    animation: blinking 1.5s steps(1, end) infinite;
}

.glow_text {
    text-shadow: 0 0 15px rgba(245, 240, 232, 0.4), 0 0 30px rgba(232, 223, 208, 0.2);
}

.text_center p {
    font-size: 20px;
}

.visitors_container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.visitors_wrapper {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--spacing) * 2);
    gap: calc(var(--spacing) * 2);
    background-color: var(--dark-bg);
    border: 4px solid var(--border-color);
}

.visitors_wrapper span {
    font-family: var(--vt-font), var(--main-font), sans-serif;
    font-size: 20px;
    text-transform: uppercase;
}

.visitors_components {
    display: flex;
    gap: calc(var(--spacing) * 0.5);
}

.visitors_digit{
    display: flex;
    font-family: 'Press Start 2P', var(--main-font);
    color: var(--lighter-text-color);
    font-size: var(--text-xs);
    background-color: var(--lighter-bg);
    line-height: calc(1 / 0.75);
    border: 1px solid var(--border-color);
    justify-content: center;
    align-items: center;
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 8);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes blinking {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*nav*/
.nav_container {
    padding-block: calc(var(--spacing) * 4);
    background-color: var(--dark-bg);
    border-bottom: solid 4px var(--border-color-dark);
}

nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--spacing) * 4);
    padding-inline: calc(var(--spacing) * 4);
}

.nav_button {
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
    font-family: var(--main-font), sans-serif;
    color: #c4b5aa;
    text-transform: uppercase;
    border: 4px solid var(--border-color-dark);
    background-color: #221c1f;
    padding-inline: calc(var(--spacing) * 6);
    padding-block: calc(var(--spacing) * 2);
    transition-property: all;
    transition-timing-function: 0.4, 0, 0.2, 1;
    transition-duration: 150;
}

.active_button {
    color: var(--lighter-text-color);
    border: 4px solid var(--border-color);
    background-color: var(--lighter-bg);
}

.nav_button:hover {
    background-color: #2a2226;
}

.active_button:hover {
    background-color: var(--lighter-bg);
}

/*main*/
.main_container {
    position: relative;
    z-index: 10;
    padding-block: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 4);
    max-width: 72rem;
    margin-inline: auto;
}

.main_introduction_container {
   border: 4px ridge #5a5352;
   box-shadow: 0 0 15px rgba(245, 240, 232, 0.15), inset 0 0 10px rgba(245, 240, 232, 0.05);
   text-align: center;
   padding: calc(var(--spacing) * 6);
   background-color: var(--dark-bg);
}

.main_introduction_container h2 {
    font-family: 'Press Start 2P', var(--main-font), 'sans-serif';
    text-transform: uppercase;
    color: #e8dfd0;
    font-size: 1.5rem;
    line-height: calc(2/1.5);
    margin-bottom: calc(var(--spacing) * 4);
    animation: blinking 1.5s steps(1, end) infinite;
}

.main_introduction_text {
    font-size: 1.125rem;
    line-height: calc(1.75/1.125);
}

.main_introduction_text p {
    margin-bottom: calc(var(--spacing) * 3);
}

.main_introduction_pics_wrapper {
    display: flex;
    justify-content: center;
    gap: calc(var(--spacing) * 8);
    margin-block: calc(var(--spacing) * 6);
}

.main_introduction_pics_wrapper img {
    width: 48px;
    height: 48px;
    margin-bottom: calc(var(--spacing) * 2);
    margin-inline: auto;
    vertical-align: middle;
}