html {
    font-size: 16px;
    width: 100vw;
    overflow-x: hidden;
}

ul, ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
}   

a {
    text-decoration: none;
    color: #000;
}

figure {
    margin: 0;
}

/*     PRIVACY POLICY     */

.container {
    margin: auto;
    margin-top: 4rem;
    padding: 1rem 0;  
    box-sizing: border-box;
    width: 90vw;
}

.container a {
    color: #9F2842;
}

.container a:hover {
    cursor: pointer;
    text-decoration: underline;
}

.privacyPolicy__main-title {
    width: 100%;
    font-size: 3rem;
    text-align: center;
    font-family: Cunia, sans-serif;
    color: #EA0029;
    margin-bottom: 4rem;
}

.privacyPolicy__title {
    width: 80%;
    margin: 3rem 0 1rem;
    font-size: 1.6rem;
    text-align: left;
    font-family: Avenir, sans-serif;
    color: #282828;
}

.privacyPolicy__introduction, .privacyPolicy__text {
    font-size: 1rem;
    font-family: Avenir, sans-serif;
    text-align: justify;
}
.privacyPolicy__list{
    padding-left: 3rem;
}

.privacyPolicy__list li {
    margin: .5rem 0;
}

.privacyPolicy__list li::before{
    content: "\2022";
    font-weight: 700;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

.privacyPolicy__update {
    margin-top: 3rem;
    font-family: Avenir, sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 1rem;
    color: #282828;
}

@media only screen and (min-width: 768px) {
    .privacyPolicy__title {
        font-size: 2rem;
    }
}



/*       ANIMATIONS        */

.slide-in {
    -webkit-animation-name: slide-in;
    -webkit-animation-duration: .5s;
    animation-name: slide-in;
    animation-duration: .5s;
    animation-fill-mode: forwards; 
}

@keyframes slide-in {
    from {
        transform: translateX(-100vw);
    }
    
    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes slide-in {
    from {
        transform: translateX(-100vw);
    }
    
    to {
        transform: translateX(0);
    }
}

.slide-out {
    -webkit-animation-name: slide-out;
    -webkit-animation-duration: .5s;
    animation-name: slide-out;
    animation-duration: .5s;
    animation-fill-mode: forwards; 
}

@keyframes slide-out {
    from {
        transform: translateX(0);
    }
    
    to {
        transform: translateX(-100vw);
    }
}

@-webkit-keyframes slide-out {
    from {
        transform: translateX(0);
    }
    
    to {
        transform: translateX(-100vw);
    }
}

.slide-down {
    -webkit-animation-name: slide-down;
    -webkit-animation-duration: 1s;
    animation-name: slide-down;
    animation-duration: 1s;
    animation-fill-mode: forwards; 
}

@keyframes slide-down {
    from {
        max-height: 0%;
    }
    
    to {
        max-height: 100%;
    }
}

@-webkit-keyframes slide-down {
    from {
        max-height: 0%;
    }
    
    to {
        max-height: 100%;
    }
}

.slide-up {
    -webkit-animation-name: slide-up;
    -webkit-animation-duration: 1s;
    animation-name: slide-up;
    animation-duration: 1s;
    animation-fill-mode: forwards; 
}

@keyframes slide-up {
    from {
        max-height: 100%;
    }
    
    to {
        max-height: 0%;
    }
}

@-webkit-keyframes slide-up {
    from {
        max-height: 100%;
    }
    
    to {
        max-height: 0%;
    }
}

.fade-in {
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: .5s;
    animation-name: fade-in;
    animation-duration: .5s;
    animation-fill-mode: forwards; 
}

@-webkit-keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

.fade-out {
    -webkit-animation-name: fade-out;
    -webkit-animation-duration: .5s;
    animation-name: fade-out;
    animation-duration: .5s;
    animation-fill-mode: forwards; 
}

@-webkit-keyframes fade-out {
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fade-out {
    from {opacity: 1;}
    to {opacity: 0;}
}


.roulette-out {
    animation: roulette-out 1s ease-in-out;
    animation-fill-mode: forwards; 
}

.roulette-in {
    animation: roulette-in 1s ease-in-out;
    animation-fill-mode: forwards; 
}

@keyframes roulette-out {

    to {
        transform: translateY(-1.5rem);
        opacity: 0;
    }
}

@keyframes roulette-in {
    from {
        transform: translateY(1.5rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes color-change {

    to {
        color: #50acab;
    }
}


/*     FONTS     */

@font-face {
    font-family: 'Avenir';
    font-weight: 900;
    font-style: normal;
    src: url(../assets/fonts/Avenir-Black.ttf);
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    font-weight: 500;
    font-style: normal;
    src: url(../assets/fonts/Avenir-Medium.ttf);
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    font-weight: 400;
    font-style: normal;
    src: url(../assets/fonts/Avenir-Roman.ttf);
    font-display: swap;
}

@font-face {
    font-family: 'Cunia';
    font-weight: 700;
    font-style: normal;
    src: url(../assets/fonts/Cunia.ttf);
    font-display: swap;
}