:root {
    --bg: #111318;
    --surface: #1C2027;
    --primary: #B58A52;
    --primary-hover: #C9A16B;
    --text: #E8E5DF;
    --muted: #858B95;
    --border: #30343C;
    --white: #FFFFFF;

    --font-heading: "Barlow Condensed", sans-serif;
    --font-body: "Inter", sans-serif;
}

html, body{
    scroll-behavior: smooth;
    margin: 0; padding: 0; width: 100%;
    height: 100%;
    font-family: "Barlow Condensed", sans-serif;
    overflow-x: hidden !important;
    background-color: var(--bg);
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.head-img {
    position: relative;
    width: 200px;
    height: 200px;
    filter: invert(61%) sepia(10%) saturate(1831%) hue-rotate(354deg) brightness(91%) contrast(91%);

    transition: 0.1s all ease-in-out ;
}

.head-img:hover {
    filter: invert(78%) sepia(34%) saturate(579%) hue-rotate(343deg) brightness(84%) contrast(84%);
}

.title {
    font-size: 3rem;
    font-weight: bold;
    color: var(--text);
}

.back-link {
    font-size: 2rem;
    color: var(--text);
    text-decoration: underline;
    cursor: pointer;

    transition: 0.1s all ease-in-out ;
}

.back-link:hover {
    color: var(--primary);
}

footer {
    height: 5vh;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface);
}

.footer-text {
    font-size: 2rem;
    color: var(--text);
    align-items: center;
    justify-content: center;
}

.footer-text a {
    font-size: 1em;
    color: var(--text);
    transition: 0.1s all ease-in-out ;
}

.footer-text a:hover {
    color: var(--primary);
}