:root{
    --color: black;
    --background-color: white;
    --body-copy: 1rem;
    --heading-copy: 2rem;
    --gutter: 2rem
}

body{
    color: var(--background-color);
    color: var(--color);
    font-size: var(--body-copy);
}

/* I hadn't used a .ttf file before and needed to know how to load it. This lets me add the custom font pointing it to the file path and specifying the type of format which I found from https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face*/

@font-face {
font-family: "New-Yorker";
src: url('./fonts/New-Yorker-6Y46.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


main{
    padding: var(--gutter);
}
h1{
    font-size: 6rem;
    font-family: "New-Yorker", sans-serif;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 2rem 1rem; */

}

h2{
flex-direction: column;
font-size: 2rem ;
    display: flex;
    justify-content: center;
    align-items: center; 
    text-align: center;  
}

h3{
 font-family: "Libre Caslon Text", sans-serif;
 font-size: 1.5rem;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center; 
    text-align: center;  
}
#user-form{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#form-button{
    background-color: lightgray;
    padding: .5rem 1rem;
    border-radius: 8px;
    width: 10%;
    text-align: center;
    min-width: 150px;
}

select{
    background: lightgray;
    padding: .5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}
#selected-restaurant ul {
    display: flex;
    justify-content: center;
}
.restaurant-card{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}

footer{
    color: var(--color);
    background-color: var(--background-color);
    padding-inline: var(--gutter);
}

/* Media Query for small desktops */
/* I pulled these key breakpoints from https://dev.to/gerryleonugroho/responsive-design-breakpoints-2025-playbook-53ih */
@media (width >= 769px) {

}
/* Media Query for large desktops */
/* I pulled these key breakpoints from https://dev.to/gerryleonugroho/responsive-design-breakpoints-2025-playbook-53ih */
@media (width >= 1025px) {


}