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

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    background: url("img/fond1.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

a {
    text-decoration: none;
}

.content {
    display: flex;
    gap: 3em;
}

.content img {
    width: 300px;
    border-radius: 50%;
    transition: border-radius .3s;
}

.ev6,
.frvelo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    background: rgb(255, 255, 255, 1);
    padding: 1em;
    border-radius: 166px 166px 50px 50px;
    transition: background .3s, border-radius .3s;
}

.content h1 {
    padding: 0.3em 0.5em 0.3em 0.5em;
    font-family: "Inter", sans-serif;
    color: black;
    transition: color .3s;
}

.ev6:hover,
.frvelo:hover {
    background: rgb(0, 0, 0, 0.5);
    border-radius: 20px;
}

.ev6:hover h1,
.frvelo:hover h1 {
    color: white;
}

.ev6:hover img,
.frvelo:hover img {
    border-radius: 14px;
}

@media screen and (orientation: portrait) {
    body {
        background-size: 1000%;
        background-repeat: no-repeat;
    }

    .content {
        flex-direction: column;
    }

    .content img {
        width: 180px;
    }

    .content h1 {
        font-size: 1.3em;
    }
}