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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #000000;
    background-image: url("../assets/skygradientbg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

::selection {
    background-color: #EE6300;
    color: #000000;
}

/* Full-screen background */
.landing {
    width: 100%;
    height: 100vh;
    height: 100svh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

/* Centered graphic + text composition */
.center-content {
    position: relative;

    height: 60svh;
    width: auto;
    aspect-ratio: 1 / 1; /* Adjust to match your SVG proportions */

    container-type: inline-size;
}

/* SVG */
.main-graphic {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* HTML text overlay */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

/* Typography */
  @font-face {
  font-family: 'Literatura Past';
  src: url('../webfonts/LiteraturaPastRegular1.00.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
  @font-face {
  font-family: 'Kommuna Normal';
  src: url('../webfonts/KommunaNormal1.10.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

h1 {
    font-family: Literatura Past, serif;
    line-height: 120%;
    font-weight: normal;
}
p {
    font-family: Kommuna Normal, monospace;
    line-height: 110%;
    font-weight: normal;
}

.overlay-text h1 {
    font-size: 6.25cqw;
    color: black;
}

.overlay-text p {
    font-size: 2.8cqw;
    color: black;
}

@media only screen and (min-width: 64em) {
    .center-content {
        height: 65svh;
    }
}