html {
    transition: background-color 0.3 ease, color 0.3 ease;
}

article {
    display: none;
}

article.active {
    display: block;
    animation: fade 0.5s ease backwards;
}

p {
    text-indent: 2ch;
}

#btn-back-to-top {
    display: none;
}

/* Navbar */
.nav-link:hover {
    cursor: pointer;
}


[data-about-link] {
    cursor: pointer;
}

/* About landing page */

#blog-header {
    font-size: 2.25rem !important;
}

/* Contacts */


#submitButton {
    justify-self: end;
    background-color: var(--bs-body-bg);
}

/* Outdoors */

.outdoor-image {
    width: -webkit-fill-available;
}

.read-more:hover {
    cursor: pointer;
}

/* Cooking */

#recipeHeader {
    display: none !important;
}

#recipeHeader.active {
    display: block !important;
}


.recipe-border.active,
.recipe-border:hover {
    background-color: beige;
}


#intro-image {
    aspect-ratio: 1;
    background: url(./images/personal-photo.jpg) 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
}

#outdoors-image {
    background: url(./images/outdoors.jpg) 50% 50%;
    background-size: cover;
    overflow: hidden;
}

#programming-image {
    background: url(./images/programming.jpg) 50% 50%;
    background-size: cover;
    overflow: hidden;
}

#cooking-image {
    background: url(./images/cooking.jpg) 50% 50%;
    background-size: cover;
    overflow: hidden;
}


/* Cooking */



.card:hover {
    cursor: pointer;
}

.card-text {
    text-indent: 2ch;
}

.full-recipe {
    display: none !important;
}

.full-recipe>div>div>img {
    aspect-ratio: 16/9;
}

.full-recipe.active {
    display: flex !important;
    animation: fade 1s ease backwards;
}

@media screen and (min-width:320px) {

    #outdoors-container,
    #programming-container,
    #cooking-container {
        border: none !important;
    }

    #outdoors-image-container,
    #programming-image-container,
    #cooking-image-container {
        border: none !important;
    }

    #intro-image {
        min-width: 200px;
    }

    #outdoors-image,
    #programming-image,
    #cooking-image {
        min-height: 300px;
        min-width: 300px;
    }

    #outdoors-image #programming-image,
    #cooking-image {
        min-height: 300px;
        min-width: 300px;
    }
}

@media screen and (min-width:576px) {}

@media screen and (min-width:768px) {

    .rounded-md-4{
        border-radius: 2rem;
    }

    .card {
        min-height: 40vw !important;
        max-height: 40vw !important;
    }

    .card-img-top {
        min-height: 20vw !important;
        max-height: 20vw !important;
    }
}

@media screen and (min-width:992px) {

    #outdoors-container,
    #cooking-container {
        border: 2px solid var(--bs-border-color) !important;
        border-right: none !important; 
    }

    #programming-container,
    #outdoors-image-container,
    #cooking-image-container {
        border-right: 2px solid var(--bs-border-color) !important;
    }

    #programming-image-container {
        border-left: 2px solid var(--bs-border-color) !important;
    }
    

    .card {
        min-height: 30vw !important;
        max-height: 30vw !important;
    }

    .card-img-top {
        min-height: 15vw !important;
        max-height: 15vw !important;
    }
}

@media screen and (min-width:1200px) {
    
    .card {
    min-height: 25vw !important;
    max-height: 25vw !important;
}

.card-img-top {
    min-height: 13vw !important;
    max-height: 13vw !important;
}
}

@media screen and (min-width:1400px) {
    
    .card {
        min-height: 18vw !important;
        max-height: 18vw !important;
    }

    .card-img-top {
        min-height: 10vw !important;
        max-height: 10vw !important;
    }
}