* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'cstm';
    src: url('./YoungSerif-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cstm2';
    src: url('./Outfit-VariableFont_wght.ttf');
    font-weight: normal;
    font-style: normal;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 233, 213);
    font-family: 'cstm', sans-serif;
    font-size: 12px;
}

.recipe-page {
    width: 650px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    list-style-position: inside;
    margin: 50px;
}

.recipe-img {
    width: 100%;
    border-radius: 10px;
}

.prep-time {
    background-color: rgb(255, 240, 255);
    padding: 10px;
    border-radius: 10px;
    width: 80%;
}

.ingredients {
    width: 100%;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

.instructions {
    width: 100%;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}

.nutrition {
    width: 100%;
}

.description {
    width: 100%;
}

.clr {
    color: hsl(14, 45%, 36%);
}

.clr2 {
    color: hsl(30, 10%, 34%);
}

.clr3 {
    color: darkred;
}

.clr4 {
    color: hsl(332, 51%, 32%);
    font-family: 'cstm2', sans-serif;
}

ul {
    padding: 5px 0;
    font-family: 'cstm2', sans-serif;
}

ol {
    padding: 5px 0;
    font-family: 'cstm2', sans-serif;
}

li {
    padding: 5px 0;
}

td {
    padding: 5px 0;
    width: 325px;
    border-bottom: 1px solid hsl(30, 18%, 87%);
    font-family: 'cstm2', sans-serif;
    color: hsl(30, 10%, 34%);
}

th {
    padding: 5px 0;
    width: 325px;
    border-bottom: 1px solid hsl(30, 18%, 87%);
    font-family: 'cstm2', sans-serif;
}

table {
    border-collapse: collapse;
}

h2 {
    color: hsl(14, 45%, 36%);
    margin: 5px 0;
}

h1 {
    color: hsl(24, 5%, 18%);
    font-size: 1.6rem;
}

p {
    padding: 5px 0;
    font-family: 'cstm2', sans-serif;
    color: hsl(30, 10%, 34%);
}

@media (max-width: 768px) {
    .recipe-page {
        padding: 40px;
        margin: 0;
        width: 100vw;
    }
}