.header{
    background: linear-gradient(to top, #3b709f97, #3b709f97), url("https://static.igem.wiki/teams/5311/assets/education/claret-2.jpeg") no-repeat center/cover;
}

.container-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0px;
}

.objective-box {
    padding: 1em;
    margin: 1em;
    width: 100%;
}

@media (min-width: 800px) {
    .objective-box {
        width: calc(50% - 2em);
    }
}

.learning-style, .objective-box, a.fill-div:hover {
    border-radius: 20px;
}

.learning-style,
.objective-box {
    box-shadow: #3b719f 0px 7.5px 13.5px -2.5px, #3b719f 0px 4px 8px -4px;
}

#toolsmethodology p {
    padding-top: 10px;
}

.type-learning{
    padding-top: 20px;
    width: 20%;
    text-align: center;
}
.type-learning:nth-child(2){
    margin-top: 30px;
}

.type-learning img{
    width: 100%;
}

#conclusions p {
    padding-top: 10px;
}
.centered-image{
    height: 200px;
}
.centered-image img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}


/* LEARNING STYLES */

svg.icon{
    width: 30px;
    height: 20px;
}

.learning-styles{
    margin-top: 10px;
    margin-bottom: 25px;
    /* row-gap: 10px; */
}

.learning-style{
    padding: 1em;
    width: 26%;
}

.icon-title {
    display: flex;
    align-items: left;
    gap: 10px;
}

@media (max-width: 1230px) {
    .learning-style {
        width: calc(50% - 2em);
        margin-bottom: 20px;
    }
}

@media (max-width: 852px) {
    .learning-style {
        width: calc(60% - 2em);
        margin-bottom: 20px;
    }
}
/*Video settings*/

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden; /* Clearfix */
}

.video-container {
    float: left;
    width: 30%; /* Adjust this value to change video width */
    margin-right: 20px;
    margin-bottom: 20px;
}

.video-container {
    position: relative;
    padding-bottom: 53.4%; /* 16:9 aspect ratio for vertical video */
    height: 0;
    margin-top:10px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}



@media (max-width: 768px) {
    .video-container {
        float: none;
        width: 100%;
        margin-right: 0;
        padding-bottom: 177.78%; /* 9:16 aspect ratio for vertical video */
    }
}

.popup {
    position: relative;
    display: inline;
    cursor: pointer;
    padding-bottom: 2px;
    background-image: linear-gradient(to right, #eed894 50%, transparent 50%);
    background-size: 200% 8px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-position 0.3s ease-out;
}

.popup:hover {
    background-size: 200% 100%;
}

.popup .popup-content {
    visibility: hidden;
    width: 500px;
    min-width: none;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -250px;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
        "header header"
        "img text";
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.popup:hover .popup-content {
    visibility: visible;
    opacity: 1;
}

.popup-content .popup-text {
    grid-area: text;
    padding-left: 10px;
}

.popup-content .popup-img {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: img;
}

.popup-content img {
    height: auto;
    width: 100px;
}

.popup-content .popup-header {
    font-size: 1.17em;
    font-weight: bold;
    display: block;
    grid-area: header;
    text-align: center;
}

.popup .popup-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

@media (max-width: 1200px) { 
    .popup .popup-content {
        width: 400px;
    }
}

.image-center{
    height:300px;
    padding-right:10px;
    text-align: center;
}

.image-center img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.image-center-big-footer {
    text-align: center;
    font-size: 0.9em;
    color: #555;
    margin-top: 8px;
    font-style:italic;
  }