@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=DM+Serif+Display:ital@0;1&family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
main {
  background-image: url("/static/images/background-green-media_gallery..3b025259f830.jpg");
  background-size: cover;
  background-attachment: scroll;
  background-position: 30%;
}

.bigtext-title {
    font-family: "Lora";
    font-size: 1.4rem;
    font-weight: 900;
    text-shadow: 1px 1px #484747;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    width: 95%;
    margin: 0.5rem auto;
}

.panel-buttons__container > * {
    flex: 1;
}

.panel-buttons__container {
    display: flex;
    width: 100%;
    grid-column: span 12;
}

.panel-buttons__container button {
    justify-content: center;
    align-items: center;
    color: #d7d7d7;
    border: 0;
    font-family: "Cormorant Garamond";
    font-weight: 700;
    font-size: 1.4rem;
    text-shadow: 1px 1px #484747;
}

.V-color {
    background-color: #0d4404;
}

.V-color__2 {
    background-color: #0d4404;
}

.V-color__2:hover,
.V-color__2:active {
    background-color: #126106;
    color: white;
}

.V-color__3 {
    background-color: #092f03;
}

.media-container {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-column: span 12;
}

.visible {
    display: flex !important;
}

.highlight-button {
    background-color: #126106;
    color: white;
}

.media-container__title {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 1.4rem;
    color: white;
    background-color: black;
    font-family: "Crimson Pro";
    text-shadow: 1px 1px #484747;
}



.buttons-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  grid-column: span 12;
  justify-content: space-around;
  flex-direction: row;
  padding-bottom: 0.4rem;
  margin: 0.5rem auto;
}

.buttons-container a {
    display: flex;
    width: 40%;
    justify-content: center;
    margin: 1rem auto 0.5rem auto;
    color: #c9c9c9;
    padding: 0.4rem 0;
    border: 0;
    border-radius: 10px;
    box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.3);
    text-shadow: 1px 1px #484747;
    font-size: 1.4rem;
}

.buttons-container a:hover,
.buttons-container a:active {
  text-decoration: none;
  color: white;
}

.media-link__container {
    display: flex;
    width: 95%;
    justify-content: center;
    align-items: center;
}

.video-image__preview {
    max-width: 100%;
    border: 3px inset rgb(56, 56, 56);
}

.video-menu__container {
    display: grid;
    width: 100%;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(12,1fr);
}

.media-link__container {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    grid-column: span 10;
}
.video-button {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
}

.flex-visible {
    display: flex !important;
}

.no-media__container {
    display: flex;
    width: 90%;
    margin: 1rem auto;
    flex-direction: column;
    grid-column: span 12;

}

.no-media__icon {
    display: flex !important;
    width: 100%;
    font-size: 10rem;
    padding: 1rem 0;
    justify-content: center;
    align-items: center;
    background-color: rgb(62, 62, 62);
    color: white;
}

.no-media__text {
    display: flex;
    width: 100%;
    margin: 0 auto;
    background-color: black;
    color: white;
    align-items: center;
    justify-content: center;
}


@media (min-width: 50rem) {
    .bigtext-title {
        font-size: 1.8rem;
    }
    .grid-container {
        width: 60%;
    }

    .media-container__title {
        font-size: 1.7rem;
    }

    .no-media__icon {
        font-size: 12rem;
    }

    .no-media__text {
        font-size: 1.2rem;
        text-align: center;
    }
    .panel-buttons__container button {
        font-size: 1.6rem;
        text-shadow: 2px 2px #484747;
    }
    .buttons-container {
        width: 60%;
    }
    .buttons-container a {
        font-size: 1.8rem;
    }
}
@media (min-width: 80rem) {
    .bigtext-title {
        font-size: 2rem;
    }
    .grid-container {
        width: 40%;
    }

    .media-container__title {
        font-size: 1.9rem;
    }

    .no-media__icon {
        font-size: 14rem;
    }
    .no-media__text {
        font-size: 1.4rem;
        text-align: center;
    }
    .panel-buttons__container button {
        font-size: 1.8rem;
    }
    .buttons-container {
        width: 40%;
    }
    .buttons-container a {
        font-size: 2rem;
        padding: 0.6rem 0;
    }
}