nav{
    display: flex; 
    justify-content: center;
    font-weight: bolder;
    font-size: 3em;
    gap: 32px;
    
}
nav a {
    margin-top: -96px;  /* 1. Make text slightly overlap the logo */
    -webkit-text-stroke: 1px black;
    color: orange;
    text-decoration: none;
}


body {
    background-color: black;
    margin-top: 0;
    display: flex; /* 1. Make the body a flex container that fills the whole screen */
    flex-direction: column; /* vertical display */
    min-height: 100dvh; /* dvh is more reliable than vh on mobile */
    font-family: 'Liberation Sans', sans-serif;
}

main {
    display: flex; 
    flex-direction: column; /* vertical stacking */
    /*justify-content: center;*/
    align-items: center;     /* centers horizontally */
    flex: 1;  /* 2. Tell the main content to take up all available empty space */
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    
}

a{
    color: orange;
}

h1{
    font-weight: bolder;
    color: white;
}
h2{
    color: orange;
    margin-top: -16px;
    font-weight: bold;
}

p{
    text-align: justify;
    max-width: 500px;
    color: lightgray;
}

button{
    background-color: orange;
    font-family: 'Liberation Sans', sans-serif;
    border-style: solid;
    border-width: 2px; /* Optional: set the border thickness */
    border-color: black; /* Change 'red' to your desired color */
    border-radius: 8px;
    height: 32px;
}

.hidden {
    display: none; /* Hides the message by default */
}

#error_msg {
    color: red; /* Makes the message stand out */
    margin-top: 10px;
}


#nav_logo{
    width: 100%;
    height: 256px;
}

#social_media_imgs{
    width: 100px;
    height: 100px;
}

#sign_up_td{
    text-align: right;
}

footer {
    display: flex;
    justify-content: center;
    color: gray;
    font-weight: 100;
    font-style: italic;
    padding: 20px;

}