@font-face {
    font-family: "National 2 Condensed-extrabold";
    src: url("../assets/fonts/national-2-condensed-extrabold.woff2")
    format("woff");
}

@font-face {
    font-family: "National 2 Condensed-bold";
    src: url("../assets/fonts/national-2-condensed-bold.woff2")
    format("woff");
}
  
@font-face {
    font-family: "National 2 Condensed-regular";
    src: url("../assets/fonts/national-2-condensed-regular.woff2")
        format("woff");
}

@font-face {
    font-family: "National 2 Condensed-medium";
    src: url("../assets/fonts/national-2-condensed-medium.woff2")
        format("woff");
}

@font-face {
    font-family: "National 2 Condensed-light";
    src: url("../assets/fonts/national-2-condensed-light.woff2")
        format("woff");
    }
  
@font-face {
    font-family: "National 2 Condensed-extraLight";
    src: url("../assets/fonts/national-2-condensed-extralight.woff2")
        format("woff");
}

@font-face {
    font-family: "National 2 extraLight";
    src: url("../assets/fonts/national-2-extralight.woff2")
        format("woff");
}

:root {
    --variable-collection-KFC-red: rgba(238, 45, 41, 1);
    --variable-font-condensed-extraBold: "National 2 Condensed-extrabold";
    --variable-font-condensed-bold: "National 2 Condensed-bold";
    --variable-font-condensed-regular: "National 2 Condensed-regular";
    --variable-font-condensed-medium: "National 2 Condensed-medium";
    --variable-font-condensed-light: "National 2 Condensed-light";
    --variable-font-condensed-extraLight: "National 2 Condensed-extraLight";
    --variable-font-extraLight: "National 2 extraLight";
}

/* COMMON STYLES */

html, body {
    margin: 0;
    padding: 0;
    position: absolute;
    -webkit-font-smoothing: antialiased;
    font-family: var(--variable-font-condensed-bold);
    overflow: hidden;

}

#container {
    color: #000;
}

#container.ln {
    color: white;
}

.kfc-red {
    color:var(--variable-collection-KFC-red);
}

.white {
    color: #FFF !important;
}

.background {
    z-index: 1 !important;
    position: absolute;
    top: 0;
    left: 0;
}

.foreground {
    z-index: 500 !important;
    position: absolute;
    top: 0;
    left: 0;
}

.media-wrapper {
    position: absolute;
    z-index: 50;

    &.custom-width{
        img {
            width: 100%;
        }
    } 
}

.section {
    z-index: 200;
    position: relative;
}

.badge {
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    

    &.flip {
        animation: flip 10s ease-in-out infinite;
        perspective: 1000px;
        transform-style: preserve-3d;

        & .front, & .back {

            position: absolute;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            backface-visibility: hidden;
        }
    
        & .back {
            transform: rotateY(180deg);
        }
    }

    & img {
        width: 100%;
    }
}

.guidelines {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;

    & img {
        width: 100%;
    }
}