html {
    background-color: rgb(255, 254, 246);
}

body {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    margin: 0;
    min-height: 100vh;
}

p, li {
    color: #024136;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    max-width: 500px;
}

a {
    color: #5A7FBD;
    font-family: Helvetica, Arial, sans-serif;
}

ol {
    padding: 0;
}

li {
    text-align: left;
    margin: 15px;
}

div:first-of-type {
    margin-top: 20px;
}

.logo-big {
    width: 400px;
    max-width: 50vw;
}

div.image-heading {
    margin-bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: clamp(20px, 10vh, 200px);
}

.icon-logo {
    height: 30px;
    margin-top: 0.8em;
}

.print-only {
    display: none;
}

#image-footer {
    margin-top: auto;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
}

#image-footer p {
    margin: 0;
}

.heading-image {
    width: 400px;
    max-width: 80vw;
    margin-top: 20px;
}

#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10vw;
    margin-right: 10vw;
}

#nav {
    display: flex;
}

#nav img {
    max-width: min(25vw, 200px);
    border-radius: 15px;
    cursor: pointer;
    rotate: -1deg;
    transition: rotate 0.2s;
    padding: 20px 10px;
}

#nav img:hover {
    rotate: 15deg;
}

#meal-card {
    border-radius: 15px;
    width: 300px;
    max-width: 90vw;
    box-shadow: 2px 2px 2px #00000044, -1px -1px 2px #DDDDDD;
    cursor: pointer;
}

#drawn-cards {
    margin: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

#drawn-cards .card-and-day {
    position: relative;
    margin: 0;
}

#drawn-cards .card {
    border-radius: 15px;
    width: 120px;
    box-shadow: 2px 2px 2px #00000044, -1px -1px 2px #DDDDDD;
    cursor: pointer;
    rotate: 0deg;
    transition: rotate 0.2s;
}

#drawn-cards .card:hover {
    rotate: 1deg;
}

#drawn-cards .day {
    width: 50px;
    position: absolute;
    right: -15px;
    top: -15px;
}

#bd-email {
    font-family: Helvetica, Arial, sans-serif;
    border-radius: 10px;
    border: solid 1px #00000022;
    padding: 0.2rem 0.5rem;
}

#bd-email:hover,
#bd-email:focus {
    outline: none;
    outline: solid 2px cornflowerblue;
}

#bd-submit {
    font-family: Helvetica, Arial, sans-serif;
    border-radius: 10px;
    border: solid 1px #00000022;
    padding: 0.2rem 0.5rem;
    transition: background-color 0.3s, color 0.3s;
}

#bd-submit:hover,
#bd-submit:focus {
    background-color: cornflowerblue;
    color: #ffffffdd;
    outline: none;
}