*,
*: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%;
    font-size: 1.6rem;
}


/* Header */

.headerImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    width: 100%;
}

.headerTitle {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background: linear-gradient( #82fbff, #33ff00, #4aff6e, #82fbff);
    /* Change the colors above depending on the event*/
    text-align: center;
    font-size: 2.6rem;
    color: #000000;
    text-shadow: 2px 2px 3px #ffffff;
    padding: 1rem;
    border-radius: 3rem;
    font-weight: 800;
}


/* Fonts */

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

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

.akai {
    font-family: sans-serif;
    font-size: 2.4rem;
    margin: 0;
    color: #ff0808;
    font-weight: 700;
    text-align: center;
    padding: 0;
    margin: 0;
}

.akaiTitle {
    margin: 1rem 0;
    font-size: 2rem;
    background: -webkit-linear-gradient(#ff0808, #ff7a7a);
    border-radius: 2rem;
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 3px #00000099;
    font-weight: 500;
}

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

.aoiTitle {
    margin: 1rem 0;
    font-size: 2rem;
    background: -webkit-linear-gradient(#0821ff, #3ec8ff);
    border-radius: 2rem;
    text-align: center;
    font-weight: 600;
}

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

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

.higlight1 {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin: 3rem auto;
    text-align: center;
    font-size: 2.5rem;
    background: -webkit-linear-gradient(90deg, #2cff2c, #3c49ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

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

.chuui {
    text-align: left;
    background: transparent;
    color: #ff0808;
    font-size: 2.5rem;
    font-weight: 900;
    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: 1.0;
    }
}

.chuuiText {
    font-family: sans-serif;
    font-size: 1.6rem;
    color: #690000;
    font-weight: 700;
}

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


/* Responsive */

@media (min-width:768px) {
    .headerImage {
        width: 80%;
    }
    .headerImage {
        font-size: 5rem;
    }
    .headerTitle {
        font-size: 5rem;
    }
    .hizuke {
        font-size: 4rem;
    }
    .kuroi {
        font-size: 3.3rem;
    }
    .akai2 {
        font-size: 3.3rem;
    }
    .aoi {
        font-size: 3rem;
    }
    .aoiTitle {
        font-size: 5rem;
    }
    .akai {
        font-size: 3rem;
    }
    .akaiTitle {
        font-size: 4rem;
    }
    .midori {
        font-size: 3rem;
    }
    .midoriTitle {
        font-size: 5rem;
    }
    .chuuiText {
        font-size: 3rem;
    }
    .higlight1 {
        font-size: 4rem;
    }
    .higlight2 {
        font-size: 4rem;
    }
    .rank {
        font-size: 3rem;
        ;
    }
    .rankdiv {
        margin: 2rem 10rem;
    }
}