/* BODY - flex column */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;           /* full viewport height */
    margin: 0;
    background-image: url("images/galaxy.webp");
    background-size: cover;
    background-position: center;
}

/* HERO WRAPPER - centers hero vertically */
#hero-wrapper {
    flex:1;                 /* fills remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center;     /* horizontal center */
    align-items: center;         /* vertical center */
}

/* HERO CONTENT */
#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:190px;
    /*justify-content: flex-start; /* starts below logo offset */
    justify-content: center;
    text-align: center;
    color: #82a5ca;
    font-family: "Orbitron", sans-serif;
    font-size: x-large;
    text-shadow: 0px 1px black;
}

/* BUTTON */
.btn {
    width: 200px;
    padding: 15px;
    font-size: large;
    font-weight: bold;
    color: #82a5ca;
    background-color: white;
    border: 2px solid black;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.btn:hover {
    transform: scale(1.05);
    background-color: #38414a;
    color: #82a5ca;
}

/* UNDERLINE */
.underline {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
    text-decoration-color: #82a5ca;
}

/* LOGO */
#mainlogo {
    display: block;          /* allows margin auto to work */
    margin: 40px auto 0 auto; /* 40px top, auto left/right, 0 bottom */
    width: 200px;            /* adjust as needed */
}

/* FOOTER */
#tnc {
    width: 100%;
    background-color: white;
    text-align: center;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    padding: 20px 0;
    color: #82a5ca;
    text-shadow: 0px 0px black;
}

#tnc h3 {
    margin: 0;
}