body {
    /* BACKGROUND */
    background: url(/silvestria/images/wood-pattern.png), #FFC18C;

    /* FONT AND COLOR */
    font-family: "blanket", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #66493A;
}

h1,
h2,
h3 {
    /* FONT AND COLOR */
    font-family: "lemongrass-script", sans-serif;
    font-weight: 400;
    font-style: normal;

    text-align: center;
}

footer {
    background-color: #D73502;
}

.title {
    animation: fadeIn 2s;
    padding: 15px;
}

@keyframes fadeIn {

    /* help https://blog.hubspot.com/website/css-fade-in */
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.navbar-nav>li {
    text-align: center;
    padding-left: 75;
    padding-right: 75px;
}

.orderbutton {
    width: 100%;
    font-size: 50px;
    background-color: #DA6D42;

    font-family: "timberline", sans-serif;
    font-weight: 400;
    font-style: normal;

    margin: auto;
    text-align: center;
}

.orderbutton:hover {
    background-color: #66493A;
    color: #FFC18C;
}

.displaycarousel {
    width: 90% !important;
    height: auto !important;
    object-fit: cover;

    /* round edges */
    border-radius: 10px;
    overflow: hidden;
}

.carousel-caption>h3 {
    font-size: 70px;
}

.carousel-caption>p {
    font-size: 40px;
}

.carousel-caption>a {
    font-size: 40px;
    padding: 0px;
    margin: 0px;
    color: #D73502;
}

.carousel-caption>a:hover {
    color: #FFC18C;
}

.carousel-item>img {
    /* help from https://www.gavsblog.com/blog/change-the-aspect-ratio-of-an-image-using-css */
    aspect-ratio: 16/9;
    filter: brightness(60%);
    object-fit: cover;
}

.col-md>p {
    font-size: 25px;
}

.importantbox {
    background-color: #66493A;
    color: #FFC18C;
    width: 90%;
}

.importantbox>h1 {
    color: #D73502;
    font-size: 50px;
}

.importantbox>h3 {
    color: #FFC18C;
    font-size: 35px;
}

.importantbox>p {
    color: #FFC18C;
    font-size: 30px;
    padding: 10px;
}

li {
    color: #FFC18C;
    font-size: 30px;
    padding: 10px;
}

li>a {
    color: #FFC18C;
}

li>a:hover {
    color: #D73502;
}

.importantbox>p>a {
    color: #FFC18C;
}

.importantbox>p>a:hover {
    color: #D73502;
}

.list-subtitle {
    font-size: 50px;
    padding: 20px;
}

.cofounders {
    padding-left: 100px;
    padding-right: 100px;
}

.normalize {
    font-family: "blanket", sans-serif;
    font-weight: 400;
    font-style: normal;
}

form>label {
    /* FONT AND COLOR */
    font-family: "blanket", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #FFC18C;

    /* help from https://stackoverflow.com/questions/638347/text-aligncenter-wont-work-with-form-label-tag */
    font-size: 30px;
    display: block;
    text-align: center;
}

/* help from https://stackoverflow.com/questions/3580063/how-to-center-a-textarea-using-css */

form>input {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFC18C;
    color: #563232;
    font-size: 20px;
}

form>textarea {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFC18C;
    color: #361212;
    font-size: 20px;
}

.submitbutton {
    width: 25%;
    color: #FFC18C;
    background-color: #D73502;
    font-size: 30px;
}

.ordercontainer {
    width: 50%;
}

.navlogo{
    width: 90px;
    height: 90px;
}

.nav-link > h3 {
    font-size: 30px;
}