@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root {
    --tearColor: #4d8cc9;
    --noseColor: #2e2e2e;
    --faceColor: #59bbff;
    --bambooColor:#8c70a7;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--noseColor);
}

header{
    background-image: url(../assets/bamboo-919052_600.webp);
    background-position: 100% 10%;
    background-size: 120%;
}

.content {
    background-color: var(--noseColor);
}

.content h2 {
    color: white;
}

.flip-card-inner {
    color: var(--noseColor);
    border-radius: 1vw;
}

.flip-card-front, .flip-card-back {
    background-color: var(--bambooColor);
    border-radius: 1vw;
}

.flip-card-front {
    color: white;
}

.flip-card-front h3 {
    color: var(--noseColor);
    background-color: var(--bambooColor);
    border-radius: 1vw 1vw 0 0;
}

.flip-card-front .preview {
    background-color: white;
}

.flip-card-front .tec {
    background-color: white;
    border-radius: 0 0 1vw 1vw;
}

.flip-card-front i {
    color: var(--noseColor);
}

.flip-card-back {
    background-color: white;
    color: var(--noseColor);
}
.flip-card-back .source a {
    color: white;
    background-color: var(--tearColor);
    border-radius: 50%;
    transition: background-color 1s, color 1s, font-size .7s;
}

.flip-card-back .source a:hover {
    background-color: white;
    color: var(--noseColor);
}

footer {
    color: var(--bambooColor);
}

#version li {
    background-color: var(--noseColor);
    color: white;
    border-radius: 1vw;
    border: 1px solid white; 
    cursor: pointer;
}

#version li:hover {
    color: var(--noseColor);
    background-color: var(--tearColor);
}

@media only screen and (max-width: 600px) {
    .flip-card-inner, .flip-card-front, .flip-card-back{
        border-radius: 5vw;
    }

    .flip-card-front h3, .flip-card-back p{
        border-radius: 5vw 5vw 0 0;
    }
    .flip-card-front .tec, .flip-card-back .source{
        border-radius: 0 0 5vw 5vw;
    }

}