@font-face {
    font-family: "ComicSans"; 
    src: url("../fonts/ComicSans.ttf") 
} 
label {
    font-size: large;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100%;
    background-color: #FF5C5C;
}
#container {
    height: 92vh;
    max-width: 600px;
    padding: 5vw;
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: start; */
    flex-direction: column;
}
#successMessage {
    height: 92vh;
    width: 600px;
    display: flex;
    justify-content: center;
    /* align-items: start; */
    flex-direction: column;
}
#topBar {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr; 
    grid-template-areas: "logo buttons";

    background-color: #b6423a;
    width: 100vw; 
    height: 8vh; 
    display: grid;  
    align-items: center;
    font-family: "ComicSans";
    gap: 10px;
    padding-left: 1vh
} 
#logo { 
    height: 6vh;
    grid-area: "logo";
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0)); /* Adds the shadow */ 
    justify-items: start;
} 
#buttons {
    grid-area: "buttons";
    justify-self: end;
}
#buttons button {
    border: none;
    background-color: transparent;
}
svg {
    max-height: 8%;
}
#footer {
    padding: 20px;
    background-color: #D83F34;
    width: 100%;
    color: black;

    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: auto auto; 
    grid-template-areas: "links description emails" "bottom bottom bottom";
    gap: 20px;
}
#links {
    grid-area: links;
    display: flex;
    flex-direction: column;
}
#description {
    grid-area: description;
}
#emails {
    grid-area: emails;
}
#bottom {
    grid-area: bottom;
    font-family: "ComicSans";
}