/* the goal is to create a top bar (horizontal) on the top of the page */
/* this bar will only contain few buttons (later) */
/* the bar will be fixed on the top of the page */
/* the bar will be transparent */
/* the bar will be responsive */
/* the bar will be a rectangle */

.topbar {
    /* using a flex display instead of a grid */
    display: flex;
    flex-direction: row;
    justify-content: right;
    position: fixed;
    /* the bar will be transparent */
    background-color: transparent;
    /* the bar will be responsive */
    width: auto;
    /* the bar will be a rectangle */
    height: auto;

    /* TOP | RIGHT | BOTTOM | LEFT */
    margin: 0rem 1rem 0rem 0rem;
    right: 0rem;

    /* stay on top */
    z-index: 10;
}

#language-button {
    cursor: pointer;
}

.flag {
    /* the flag will be a rectangle */
    width: 2rem;
    height: 1.25rem;
    margin-right: 0rem;
    position: relative;
    overflow: hidden;

    /* add a border */
    border: 1px solid #9192ff7c;

    transition: transform 0.3s ease-in-out;
}

.flag:hover {
    transform: scale(1.05);
}

.flag-animation {
    /* set the scale to 0 progressively */
    transition: transform 0.3s ease-in-out;
    transform: scale(0);
    filter: blur(0.5rem);
}

.flag-animation-end {
    /* set the scale to 1 progressively */
    transition: transform 0.3s ease-in-out;
    transform: scale(1);
    filter: blur(0);
}

.france-flag {
    width: 100%;
    padding-bottom: 66.667%;
    background-color: white;
    position: relative;
    margin: 0;
}

.france-flag::before {
    content: ' ';
    position: absolute;
    background-color: #0055A4;
    width: 30%;
    height: 100%;
}

.france-flag::after {
    content: ' ';
    position: absolute;
    background-color:  	#EF4135;
    width: 37%;
    height: 100%;
    right: 0;
}

/*
.united-flag {
    width: 180px;
    height: 120px;
    overflow: hidden;
    border: 1px solid #efefef;
}

.the-united-kingdom {
    background: #00247D;
    background-size: 100px 100px;
    position: relative;
}

.the-united-kingdom:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, transparent 40%, #CC142B 40%, #CC142B 60%, transparent 60%), linear-gradient(to right, transparent 45%, #CC142B 45%, #CC142B 55%, transparent 55%), linear-gradient(to bottom, transparent 35%, white 35%, white 65%, transparent 65%), linear-gradient(to right, transparent 40%, white 40%, white 60%, transparent 60%), linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -65px 45px, linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 55px -45px, linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -75px -43px, linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 70px 46px, linear-gradient(146deg, transparent 45%, white 45%, white 55%, transparent 55%), linear-gradient(34deg, transparent 45%, white 45%, white 55%, transparent 55%);
    width: 180px;
    height: 120px;
    background-repeat: no-repeat;
}
*/

.united-flag {
    width: 2rem; /* Utilisation de % pour rendre la taille relative */
    position: relative;
    overflow: hidden;
    border: 1px solid #efefef;
}

.the-united-kingdom {
    background: #00247D;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 16.67% 33.33%; /* Utilisation de % pour la taille du motif */
}

.the-united-kingdom:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 40%, #CC142B 40%, #CC142B 60%, transparent 60%),
                linear-gradient(to right, transparent 45%, #CC142B 45%, #CC142B 55%, transparent 55%),
                linear-gradient(to bottom, transparent 35%, white 35%, white 65%, transparent 65%),
                linear-gradient(to right, transparent 40%, white 40%, white 60%, transparent 60%),
                linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -16.67% 11.11%,
                linear-gradient(146deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 16.67% -11.11%,
                linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) -25% -11.58%,
                linear-gradient(34deg, transparent 50%, #CC142B 50%, #CC142B 53%, transparent 53%) 23.33% 11.76%,
                linear-gradient(146deg, transparent 45%, white 45%, white 55%, transparent 55%),
                linear-gradient(34deg, transparent 45%, white 45%, white 55%, transparent 55%);
    background-repeat: no-repeat;
}