/* --- MAIN CSS --- */
/* --- Messy asl pls ignore mistakes--- */

/* ---Inter Font Setup--- */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

/* --- General Styles --- */

* {
    box-sizing: border-box !important;
}

html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    margin: 0;
    gap: 10px;
    background-color: #141414;
    align-items: flex-start;
    justify-content: center;
    overflow: scroll;
}

h1, h2, h3, h4, h5, h6 {
    color: #AFAFAF;
    font-family: 'InterVariable', sans-serif !important;
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
}

p {
    font-family: 'InterVariable', sans-serif !important;
    color: #AFAFAF;
    line-height: 1.6;
    font-size: 16px;
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
}

main {
    padding: 50px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 820px;
    height: fit-content;
    align-self: center;
    align-items: center;
    justify-self: center;
    text-align: center;
}

.Title {
    text-align: left;
    font-size: 48px;
    font-weight: 700;
}

.Description {
    text-align: left;
    font-size: 20px;
    font-weight: 300;
}

.helloTitle {
    text-align: left;
    font-size: 20px;
    font-weight: 300;
    transition: opacity 0.3s ease;
}

footer {
    align-items: end;
    justify-content: end;
}

.footerTitle {
    text-align: center;
    font-style: italic;
    font-size: 20px;
    font-weight: 900;
    height: 24px !important;
}

.footerTitle:hover {
    cursor: pointer;
}

.footerDescription {
    text-align: center;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    height: 24px !important;
}


.top {
    display: flex;
    flex-direction: row;
    gap : 10px;
}

.top.text {
    background-color: transparent;
    all: unset;
    cursor: pointer;
}

        #helloText {
            display: inline-block;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
        }

        /* Animation States */
        .slide-out {
            transform: translateX(20px); /* Moves right */
            opacity: 0;
        }

        .prepare-slide {
            transform: translateX(-20px); /* Starts from left */
            opacity: 0;
            transition: none !important; /* Jump instantly */
        }