@import url("https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&family=Montserrat:wght@300;400;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    text-align: center;
}


#content {
    width: 100vw;
    height: 100vh;
    background: url("img/pastry.jpg");
    background-size: 100% 150%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* header.js */
a {
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    margin: 20px;
}

a:hover {
    text-decoration: underline #fcb103;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.footer,
.main-page,
.header {
    width: 100%;
}

.header {
    height: 100px;
    border-bottom: 1px solid #fcb103;
}


/* home.js */
.main-page {
    height: 700px;
}

.intro-color {
    color: #fcb103;
}

.intro {
    margin-top: 200px;
    font-size: 2.5rem;
}

.intro-text {
    color: white;
    font-size: 0.95rem;
    margin-bottom: -20px;

}

hr {
    width: 300px;
    border: 2px solid #fcb103;
    margin: 24px auto;
}

.intro>h3 {
    color: white;
    margin-top: -75px;
    text-transform: uppercase;
    font-size: 2.5rem;
}

/* menu.js */
.menu-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu {
    display: grid;
    grid-template-areas:
        "menu menu"
        "pastry cupcake"
        "cookie drink";
    width: 700px;
    height: 65vh;
    border: 2px solid black;
    padding: 20px;
    align-content: center;
    justify-content: center;
    column-gap: 150px;
    row-gap: 50px;
    background-color: #fcb103;
    box-shadow: 1px 1px 2px;
}

.menu-title {
    display: grid;
    grid-area: menu;
    align-content: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: -10px;
}

.menu-subtitle {
    font-size: 1.2rem;
    text-align: left;
}

th {
    text-align: left;
}

td {
    padding: 3px;
    text-align: left;
}


.pastry-menu {
    grid-area: pastry;
}

.cupcake-menu {
    grid-area: cupcake;
}

.cookie-menu {
    grid-area: cookie;
}

.drink-menu {
    grid-area: drink;
}

/* contact.js */
.contact-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contactContent {
    display: grid;
    grid-template-areas:
        "menu menu"
        "contact location"
        "contact location";
    border: 2px solid black;
    height: 65vh;
    width: 700px;
    background-color: #fcb103;
    box-shadow: 1px 1px 2px;
}

.contact-title {
    display: grid;
    grid-area: menu;
    align-content: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: -10px;
}

.contact-links {
    grid-area: contact;
    padding-left: 50px;
    padding-top: 100px;
}

.contact-link-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.location {
    grid-area: location;
}

.location-img {
    height: auto;
    width: 300px;
}


/* footer.js */
.footer {
    height: 100px;
    border-top: 1px solid #fcb103;
}

.footer-text {
    font-weight: 600;
}

.navbar,
.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}