.container .url_b {
    text-align: center;
}
.container h1{
font-size:36px;
}


p.ctr{
text-align:center;
font-weight:500;
font-size:22px;
}

.url_b {
    text-decoration: none;
}
.positive-effects-link, .negative-effects-link {
color:#dba300;
text-decoration:underline;
}
.rec_p{
font-size:16px;
font-weight:500;
}

#combination-effects ul li a.url_b:hover .effect-text {
    color: #dba300;
    transition: .3s color;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
    box-sizing: border-box;
}

th, td {
font-size:14px;
    border: 1px solid #ddd;
    padding: 5px;
    text-align: center;
    align-content: center;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 8px;
    background-color: #fff;
    color: #231d21;
}

td.selected, th.selected, th:hover, td:hover {
    background-color: #f8d260;
    color: #fff;
}

@media (min-width: 1500px) {
    td.selected, th.selected {
        transform: scale(1.1);
    }
}

#combination-effects {
    margin-top: 20px;
    border-radius: 8px;
    color: #231d21;
    display: none;
    overflow: hidden;
    opacity: 0;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate__fadeIn {
    animation-name: fadeIn;
}

.positive-effects, .negative-effects {
    width: 100%;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
}

.positive-effects {
    background-color: #eaffea;
}

.positive-effects h3 {
    color: #2e8b57;
    margin: 0;
}

.negative-effects {
    background-color: #ffe5e5;
    margin-top: 20px;
}

.negative-effects h3 {
    color: #b22222;
    margin: 0;
}

#combination-effects ul li {
    display: flex;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

#combination-effects ul li div {
    margin-right: 1.1%;
    display: flex;
    flex-direction: column;
	margin-bottom:5px;
}
#combination-effects ul li div:hover {
    color: #dba300;
}
#combination-effects ul li img {
    margin-bottom: 4%;
    width: 150px;
    transition: transform 0.3s ease;
}

#combination-effects ul li img:hover {
    transform: scale(1.1);
}

#combination-effects > ul > li > .effect-text, .last-odd > .effect-text {
    width: 65%;
}

#combination-effects ul li .effect-text {
    display: block;
    color: #231d21;
    font-weight: 600;
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    th, td {
        margin-top: 4px;
        padding: 12px;
    }

    table td, th {
        flex: 1 1 50%;
    }

    table tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
}
@media (min-width: 769px) and (max-width: 1040px) {
#combination-effects ul li div{
		width: 32%;
	}

}
@media (min-width: 1040px) {
#combination-effects ul li div{
		width: 30%;
	}

}



@media (max-width: 769px) {
    table {
        font-size: 14px;
    }

    th, td {
        padding: 8px;
    }

    #combination-effects ul li {
        justify-content: space-around;
        align-content: space-between;
        border-bottom: solid #dba300 2px;
        margin-bottom: 2%;
    }

    #combination-effects ul li img {
        width: 120px;
    }

    #combination-effects > ul > li > .effect-text {
        width: 100%;
        text-align: center;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    #combination-effects ul li img {
        width: 80px;
    }

    #combination-effects > ul > li > .effect-text {
        width: 100%;
        text-align: center;
        align-self: end;
    }
}

#effects-list, #negative-effects-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

#effects-list li, #negative-effects-list li {
    flex: 1 1 45%;
    margin: 5px;
    box-sizing: border-box;
}

#effects-list li div a, #negative-effects-list li div a {
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.last-odd {
    max-width: 49.24%;
}

.discl {


    font-size: 18px;
    font-weight: 600;
    padding: 7px;
    text-align: center;
    border-radius: 7px;
    justify-self: center;
}