@font-face {
    font-family: PixelOperator;
    src: url("/assets/PixelOperator.ttf");
}

@font-face {
    font-family: PixelOperator;
    src: url("/assets/PixelOperator-Bold.ttf");
    font-weight: bold;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    min-height: 100%;
}


body {

    min-height: 100vh;

    color: #f0f0e0;

    font-family:
        PixelOperator,
        "Courier New",
        monospace;

    background:
        linear-gradient(
            rgba(0, 24, 20, 0.45),
            rgba(0, 16, 12, 0.75)
        ),
        url("/assets/BackgroundGespiegelt.png");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    image-rendering: pixelated;
}


a {
    color: inherit;
    text-decoration: none;
}


.page {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    align-items: center;
}


/* =========================
   HERO
   ========================= */

.hero {

    width: min(900px, 92%);

    min-height: 72vh;

    display: flex;
    flex-direction: column;

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

    text-align: center;
}


.logo {

    font-size: clamp(4rem, 12vw, 8rem);

    font-weight: bold;

    letter-spacing: 0.08em;

    color: #f0f0e0;

    text-shadow:
        4px 4px 0 #07130f,
        8px 8px 0 rgba(0, 0, 0, 0.6);
}


.logo.small {

    font-size: clamp(3rem, 8vw, 5rem);

    margin-bottom: 20px;
}


.subtitle {

    margin-top: 5px;
    margin-bottom: 50px;

    font-size: 1.4rem;

    color: #d4e6c0;

    letter-spacing: 0.1em;

    text-shadow:
        2px 2px 0 #07130f;
}


/* =========================
   BUTTONS
   ========================= */

.hero-buttons {

    display: flex;

    flex-direction: column;

    gap: 18px;

    width: min(400px, 100%);
}


.button {

    display: inline-flex;

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

    min-height: 56px;

    padding: 14px 24px;

    border: 3px solid #e8dfc0;

    font-family: inherit;

    font-size: 1.15rem;

    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.1s,
        box-shadow 0.1s,
        background 0.1s;
}


.button:hover {

    transform: translate(-3px, -3px);

    box-shadow:
        3px 3px 0 #07130f,
        6px 6px 0 rgba(0, 0, 0, 0.6);
}


.button:active {

    transform: translate(0, 0);

    box-shadow: none;
}


.button.primary {

    background: #315f38;

    color: #f0f0e0;
}


.button.primary:hover {

    background: #3f7947;
}


.button.secondary {

    background: rgba(5, 25, 20, 0.80);

    color: #f0f0e0;
}


.button.secondary:hover {

    background: rgba(20, 60, 45, 0.90);
}


/* =========================
   INFO
   ========================= */

.info {

    width: min(900px, 92%);

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

    margin-bottom: 80px;
}


.info-card {

    padding: 30px;

    border:
        2px solid rgba(220, 225, 190, 0.35);

    background:
        rgba(0, 15, 12, 0.70);

    backdrop-filter: blur(2px);

    box-shadow:
        5px 5px 0 rgba(0, 0, 0, 0.35);
}


.info-card h2 {

    margin-top: 0;

    color: #e8dfc0;

    font-size: 1.5rem;

    text-shadow:
        2px 2px 0 #07130f;
}


.info-card p {

    line-height: 1.6;

    color: #c9d8c0;

    opacity: 0.85;
}


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

footer {

    margin-top: auto;

    padding: 30px;

    font-size: 0.8rem;

    color: #c9d8c0;

    opacity: 0.65;

    text-shadow:
        1px 1px 0 #07130f;
}


/* =========================
   REGISTER
   ========================= */

.register-container {

    width: min(500px, 90%);

    margin-top: 8vh;
    margin-bottom: 8vh;

    padding: 35px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    background:
        rgba(0, 15, 12, 0.78);

    border:
        2px solid rgba(220, 225, 190, 0.35);

    box-shadow:
        8px 8px 0 rgba(0, 0, 0, 0.4);
}


.back-link {
    font-size: 1.1rem;
    font-weight: bold;

    align-self: flex-start;

    margin-bottom: 40px;

    color: #c9d8c0;

    opacity: 0.8;
}


.back-link:hover {

    color: #f0f0e0;

    opacity: 1;
}


.register-container .logo {

    align-self: center;

    text-align: center;
}


.register-container h1 {

    text-align: center;

    margin: 10px 0;

    font-size: 1.8rem;

    color: #e8dfc0;

    text-shadow:
        2px 2px 0 #07130f;
}


.description {
    font-size: 1.05rem;

    text-align: center;

    color: #c9d8c0;

    opacity: 0.85;

    margin-bottom: 40px;

    line-height: 1.6;
}


#registerForm {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


#registerForm label {
    margin-top: 12px;

    font-size: 1.15rem;
    font-weight: bold;

    color: #d4e6c0;

    text-shadow:
        1px 1px 0 #07130f;
}


#registerForm input {

    width: 100%;

    height: 54px;

    padding: 10px 14px;

    border:
        2px solid #496c52;

    outline: none;

    background:
        rgba(0, 10, 8, 0.85);

    color: #f0f0e0;

    font-family: inherit;

    font-size: 1.1rem;
}


#registerForm input:focus {

    border-color: #a8c98f;

    box-shadow:
        0 0 0 2px rgba(168, 201, 143, 0.15);
}


#registerForm button {

    margin-top: 25px;
}


.message {

    min-height: 30px;

    margin-top: 20px;

    text-align: center;

    line-height: 1.5;
}


.message.error {

    color: #e89a8c;
}


.message.success {

    color: #a8d59b;
}


.success-panel {

    margin-top: 25px;

    padding: 30px;

    border:
        2px solid rgba(220, 225, 190, 0.35);

    text-align: center;

    background:
        rgba(0, 15, 12, 0.65);
}


.success-panel h2 {

    margin-top: 0;

    color: #e8dfc0;
}


.success-panel p {

    color: #c9d8c0;

    line-height: 1.5;
}


.success-panel .button {

    margin-top: 20px;

    width: 100%;
}


.hidden {

    display: none;
}


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

@media (max-width: 650px) {

    .logo {

        font-size:
            clamp(3rem, 15vw, 5rem);
    }


    .subtitle {

        font-size: 1rem;

        margin-bottom: 35px;
    }


    .info {

        grid-template-columns: 1fr;
    }


    .register-container {

        margin-top: 30px;

        padding: 25px;
    }

}