* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/fonts/outfit/static/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/fonts/outfit/static/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'Young Serif';
    src: url('assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
    font-weight: 400;
}

h1, h2 {
    font-family: 'Young Serif', serif;
    font-weight: 400;
}

h1 {
    color: hsl(24, 5%, 18%);
}

h2,
main .sec3 ::marker,
main .sec4 ::marker {
    color: hsl(14, 45%, 36%);
}

h3, main .sec2 h3, main .sec2 ::marker {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: hsl(332, 51%, 32%);
}

p, li, td {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    color: hsl(30, 10%, 34%);
}

li {
    padding: 5px 15px;
}

a {
    color: blue;
}

td {
    padding: 10px 40px;
    border-bottom: 2px solid hsl(30, 18%, 87%);
}

td:last-child {
    font-weight: 700;
    color: hsl(14, 45%, 36%);
}

tr:last-child td {
    border-bottom: 0;
}

body {
    width: 100%;
    background-color: hsl(30, 54%, 90%);
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    width: 70%;
    background-color: hsl(0, 0%, 100%);
    border-radius: 15px;
    padding: 30px;
}

main div {
    margin: 30px 0;
}

ul, ol {
    padding-left: 30px;
}

.sec3, .sec4 {
    border-bottom: 2px solid hsl(30, 18%, 87%);
}

main .sec2 {
    background-color: hsl(330, 100%, 98%);
    padding: 5px 20px;
    border-radius: 15px;
}

main .image {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0;
}

main .image img {
    width: 100%;
    border-radius: 15px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.attribution {
    margin: 20px 0 5px 0;
    text-align: center;
}

@media screen and (max-width: 800px) {
    body {
        width: 100%;
        background-color: white;
    }

    main {
        width: 100%;
        padding: 20px;
    }

    td {
        padding: 10px 20px;
    }

    main .image img {
        border-radius: 1rem;
    }
}