@import url("main.css");
@import url("carosuel.css");

#carosuel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: 60vh;
    min-width: 100%;
    overflow: hidden;
}

.carosuel_member {
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
}

main {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.reason {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2vh;
}

.reason .icon {
    width: min(40%, 20vh);
    height: auto;
    filter: invert(1);
    transition: width 0.5s;
}

.reason .content {
    width: 40%;
}

.reason .content h2 {
    font-size: max(2vh, 1.5vw);
    font-weight: 600;
    transition: font-size 0.5s,  font-weight 0.5s;
}

.reason:hover .content h2 {
    font-size: max(2.5vh, 2vw);
    font-weight: 700;
}

.reason:hover .icon {
    width: min(50%, 25vh);
}

.reason:nth-child(even) {
    text-align: right;
}
.reason:nth-child(odd) {
    text-align: left;
}

.links {
    background-color: rgb(139, 21, 21);
    font-family: "Alfa Slab One";
    font-weight: 600;
    width: 100%;
    margin-bottom: 3vh;

    display: flex;
    flex-direction: row;
    justify-content:space-evenly;
    align-items: center;

    padding-top: 1vh;
    padding-bottom: 1vh;

    transition: padding-top 0.5s, padding-bottom 0.5s;
}

.links:hover {
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.links * {
    color: white;
    text-decoration: none;
    font-size: 3.5vh;
}

.links a {
    transition: font-size 0.5s;
}

.links a:hover {
    font-size: 3.7vh;
}

@media (aspect-ratio < 1){
    .links {
        flex-direction: column;
    }
    .links i {
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
    }
}