*,
*:before,
*:after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    min-height: 100%;
    font-size: 62.5%;
}

body {
    font-family: sans-serif;
    background: #ffffff;
    padding: 0;
    min-height: 100%;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.6rem;
}


/* Header */

.headerimg {
    margin-top: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #0000009d;
    width: 100%;
}

.headerTitle {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient(#09bb00, #7bff00);
    /* Change the colors above depending on the event*/
    box-shadow: 3px 3px 20px #00992b9d;
    text-align: center;
    font-size: 2.4rem;
    color: #ffffff;
    text-shadow: 3px 1px 2px #0000008c;
    padding: 1rem;
    border-radius: 3rem;
    font-weight: 600;
    width: 100%;
}


/* Fonts */

.center {
    text-align: center;
    padding: 0.5rem 0;
}

.kuroi {
    font-family: sans-serif;
    margin: 0 0.5rem;
    font-size: 1.5rem;
    color: #000000;
    font-weight: 700;
}

.akai {
    font-family: sans-serif;
    margin: 0 1rem;
    font-size: 1.6rem;
    color: #ff0808;
    font-weight: 700;
}

.akaiTitle {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 1rem 0;
    padding: 0.5rem 0;
    font-size: 2rem;
    background: linear-gradient(#ff0808, #ff7a7a);
    border-radius: 2rem;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
}

.aoi {
    font-family: sans-serif;
    margin: 0 1rem;
    font-size: 1.8rem;
    color: #0821ff;
    font-weight: 700;
}

.aoiTitle {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 1rem 0;
    padding: 0.5rem 0;
    font-size: 1.6rem;
    background: linear-gradient(#0821ff, #3ec8ff);
    border-radius: 2rem;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
}

.midori {
    font-family: sans-serif;
    margin: 0 1rem;
    font-size: 1.4rem;
    color: #00d800;
    font-weight: 700;
}

.midoriTitle {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 1rem 0;
    font-size: 2rem;
    background: -webkit-linear-gradient(#057205, #00d800);
    border-radius: 2rem;
    text-align: center;
    font-weight: 600;
}

.higlightAkai {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 1rem auto;
    text-align: center;
    font-size: 2.2rem;
    background: -webkit-linear-gradient(180deg, #ff9100, #ff0808);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.higlightAoi {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 1rem auto;
    text-align: center;
    font-size: 1.6rem;
    background: linear-gradient(90deg, #0821ff, #3ec8ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.higlightMidori {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 1rem auto;
    text-align: center;
    font-size: 2.2rem;
    background: -webkit-linear-gradient(#0ec28c, #00d800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.hizuke {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: auto;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    background: -webkit-linear-gradient(#ff0808, #0821ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kiiroTitle {
    padding: 0.5rem;
    background: linear-gradient(#ffc74d7a, #ff5c5c00);
    margin: 1rem auto;
    color: #ee5300;
    font-weight: 600;
    font-size: 1.8rem;
}

.chuui {
    text-align: left;
    background: transparent;
    color: #ff0808;
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom: 0;
    animation-name: chuui;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes chuui {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    100% {
        opacity: ;
    }
}

.chuuiText {
    font-family: sans-serif;
    padding: 0 0.5rem;
    font-size: 1.3rem;
    color: #690000;
    font-weight: 500;
}

.purastaff {
    text-align: right;
    margin-right: 5rem;
    font-size: 2rem;
    color: #000000;
    font-weight: bold;
}


/* Points */

.pointimgdiv {
    display: flex;
    flex-direction: column;
}

.pointimg {
    height: 30px;
}

.pointNumber {
    margin: 0 1rem;
    font-size: 2rem;
    color: #0821ff;
    font-weight: 900;
}

.pointName {
    margin: 0 1rem;
    font-size: 2rem;
    color: #000;
    font-weight: 700;
}

.points {
    padding: 1rem 0;
    display: flex;
    align-content: center;
    justify-content: center;
}

.point {
    margin: 0 1rem;
    font-size: 2rem;
    color: #ff0808;
    font-weight: 700;
}


/* Animations */

#animals {
    display: flex;
    align-items: center;
}

.hiyoko {
    width: 100px;
    position: relative;
    -webkit-animation: infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 3s;
}

.panda {
    width: 60px;
    position: relative;
    -webkit-animation: infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 8s;
}

.usagi {
    width: 60px;
    position: relative;
    -webkit-animation: infinite;
    -webkit-animation-name: run;
    -webkit-animation-duration: 6s;
}

@-webkit-keyframes run {
    0% {
        right: -30%;
    }
    100% {
        right: 30%;
    }
}

.we400 {
    font-weight: 400!important;
}


/* Responsive */

@media (min-width:768px) {
    .headerimg {
        width: 80%;
    }
    .headerTitle {
        font-size: 4.5rem;
    }
    .kuroi,
    .akai,
    .aoi,
    .midori {
        font-size: 3rem;
    }
    .higlightAkai,
    .higlightAoi,
    .higlightMidori {
        font-size: 4rem;
    }
    .hizuke,
    .akaiTitle,
    .aoiTitle,
    .midoriTitle {
        font-size: 5rem;
    }
    .chuuiText {
        font-size: 3rem;
    }
}