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

@font-face {
    font-family:Merienda Ligth ;
    src: url('../fonts/Merienda-VariableFont_wght.ttf') format('truetype');
}

.img-header {
    min-width: 100vw;
    height: auto;
    padding: 0
}

.quizBox,
h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 1em
}

.quizz_text {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center
}

.base {
    border: 3px solid #fff
}

.row {
    margin: 0!important
}

body {
    font-family: Merienda, cursive;
    background-image: url('../images/student2.webp');
    background-size: cover;
    background-repeat: no-repeat
}

.box-shadow-3d-white {
    box-shadow: 8px 8px 0 #fff, 3px 3px 0 #fff, 4px 4px 0 #fff, 5px 5px 0 #fff, 6px 6px 0 #fff, 7px 7px 0 #fff
}

.box-shadow-3d-red {
    box-shadow: 8px 8px 0 #f0060c, 3px 3px 0 #f0060c, 4px 4px 0 #f0060c, 5px 5px 0 #f0060c, 6px 6px 0 #f0060c, 7px 7px 0 #f0060c
}

.box-shadow-3d-blue {
    box-shadow: 8px 8px 0 #1d3681, 3px 3px 0 #1d3681, 4px 4px 0 #1d3681, 5px 5px 0 #1d3681, 6px 6px 0 #1d3681, 7px 7px 0 #1d3681
}

.counter,
.profil2 {
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1)
}

.box_multi,
.connect,
.insert,
.profil,
.register {
    background-color: #212529cf;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(10.2px);
    -webkit-backdrop-filter: blur(10.2px);
    border: 5px solid rgba(55, 49, 49, .51);
    color: beige
}

.profil2 {
    background-color: #e4e8ebcf;
    border-radius: 16px;
    backdrop-filter: blur(10.2px);
    -webkit-backdrop-filter: blur(10.2px);
    border: 5px solid rgba(55, 49, 49, .51);
    color: #000
}

.counter {
    background: rgba(150, 150, 150, .51);
    backdrop-filter: blur(10.2px);
    -webkit-backdrop-filter: blur(10.2px);
    border: 1px solid rgba(55, 49, 49, .51);
    color: beige;
    position: sticky;
    top: 0;
    z-index: 999
}

.navbar {
    width: 100vw;
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff
}

.img-category {
    border: 4px solid #212529;
    border-radius: 20px
}

.test {
    position: relative;
    height: 100vh;
    width: 100vw;
    background: #000
}

.img-profil,
.user_avatar {
    max-height: 10em;
    max-width: 20em
}

.form-check-input {
    color: #fff!important
}

.image-container img {
    transition: transform .2s ease-out
}

.user_avatar {
    border: 1px dotted #fff
}

.image-rotate {
    transform: rotateY(180deg)
}

@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.boom {
    opacity: 1;
    animation: none
}

.vibrate {
    animation: .5s ease-in-out infinite vibrate
}

@keyframes vibrate {
    0%,
    100% {
        transform: translate(0)
    }
    25%,
    75% {
        transform: translate(-.1px, 0) rotate(-.1deg)
    }
    50% {
        transform: translate(.1px, 0) rotate(.1deg)
    }
}