/*@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&family=Vesper+Libre:wght@400;500;700;900&display=swap');
*/

@font-face {
  font-family: 'Vesper Libre';
  src: url('./fonts/VesperLibre-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Vesper Libre';
  src: url('./fonts/VesperLibre-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Gray */
:root {
    --bg-color: #000000;
    --frame-color: #1a1a1a;
    --card-color: #0e0e0e;  /*#0e0e0e; */
    --text-title: #f0f0f0;
    --text-main: #808080;
    --text-muted: #424242;

    --font-xl: 4rem;
    --font-large: 2rem;
    --font-medium: 1.2rem;
    --font-small: 1rem;
}

/*@media (max-width: 768px) {
    :root {
        --font-xl: 3rem;
        --font-large: 1rem;
        --font-medium: 0.8rem;
        --font-base: 0.6rem;
    }
}*/

* {
    margin: 0;
    padding: 0;
}

body {
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-title);
}

.ss-container {
    /* height: 100dvh; */
    width: calc(100vw - 64px);
    height: calc(100dvh - 64px);
    margin: 32px;

    box-shadow: 0px 0px 12px 12px rgb(7, 7, 7);

    overflow-y: scroll;
    scroll-snap-type: y mandatory;

    /*overflow-x: hidden;*/
}

section {
    /*border: 1px solid red;*/
    /* width: calc(100vw - 64px); */
    /* height: calc(100dvh - 64px); */
    margin: 32px 0;

    width: calc(100vw - 64px);
    height: calc(100dvh - 64px);

    /* margin: 32px; */
    background-color: var(--frame-color);

    position: relative;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    overflow-x: hidden;
}

@media (orientation: portrait) {

    body {
        background-color: var(--frame-color);
    }

    .ss-container {
        width: 100vw;
        height: 100dvh;

        margin: 0;
    }

    section {
        width: 100vw;
        height: 100dvh;
    }
}

@media (orientation: portrait) {
    .section {
        margin: 0;
    }
}

.container {
    padding: 2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h2 {
    font-family: "Vesper Libre", serif;
    font-weight: 200;
    font-style: bold;
    font-size: var(--font-xl);
    color: var(--text-title);
}

h3 {
    font-family: "Vesper Libre", serif;
    font-weight: 600;
    font-style: bold;
    font-size: var(--font-large);
    color: var(--text-title);
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes SlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ScaleIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}