/* React ONLINE CSSS */

/* Common styles */

@font-face {
    font-family: "pricedown";
    src: url(pricedown.ttf);
}

body {
    background-color: powderblue;
    font-family: Garamond, serif;

}
h1 {
    display: flex;
    align-content: center;
    justify-content: center;
    color: #FAFAFF;
    font-size: 6rem;
    font-family: pricedown, Garamond, Sans-Serif;
}
h2 {
    display: flex;
    /* align-content: center;
    justify-content: center; */
    color: black;
    font-size: 5rem;
}
h3 {
    display: flex;
    align-content: center;
    justify-content: center;
    color: black;
    font-size: 4rem;
}
h4 {
    display: flex;
    align-content: center;
    justify-content: center;
    color: #FAFAFF;
    font-size: 3rem;
}
h5 {
    display: flex;
    align-content: center;
    justify-content: center;
    color: black;
    font-size: 2rem;
}
h6 {
    display: flex;
    align-content: center;
    justify-content: center;
    color: black;
    font-size: 2rem;
}

h1.gta {
    font-family: 'Pricedown B1', Garamond, serif;
    color: red;
    
}
/* This should be superceeded by the dynamic buttons and checkboxe */
label {
    display: flex;
    align-content: center;
    justify-content: center;
    color: black;
    font-family: Garamond, serif;
    font-size: 1rem;
}

.red_text {
    color: red;
}
.orange_text {
    color: orange;
}
.yellow_text {
    color: yellow;
}
.green_text {
    color: green;
}
.cyan_text {
    color: cyan;
}
.blue_text {
    color: blue;
}
.purple_text {
    color: purple;
}
.black_text {
    color: black;
}
.white_text {
    color: white;
}
.rg_letter {
    font-family: Garamond, serif;
}
.rg_letter span:nth-child(2n+1) {
    color: red;
}
.rg_letter span:nth-child(2n+2) {
    color: green;
}

/* Radio and checkbox styles in setup code */

.radio-toolbar {
    margin: 10px;
}

.radio-toolbar input[type="radio"],
.radio-toolbar input[type="checkbox"] {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-toolbar label {
    display: inline-block;
    background-color: silver;
    padding: 10px 20px;
    font-size: 26px;
    border: 2px solid black;
    border-radius: 4px;
    color: black;
    font-weight: bold;
}

.radio-toolbar label:hover {
    background-color: #dfd;
}

.radio-toolbar input[type="radio"]:focus + label,
.radio-toolbar input[type="checkbox"]:focus + label {
    border: 2px solid black;
}

.radio-toolbar input[type="radio"]:checked + label,
.radio-toolbar input[type="checkbox"]:checked + label {
    background-color: gray;
    border-color: black;
}

.centered {
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}




/* slider check boxes */
/* this is the 'dot' */
.button-cover {
    height: 100px;
    margin: 20px;
    background-color: cyan;
    box-shadow: 0 10px 20px -8px #c5d6d6;
    border-radius: 4px;
}

.button-cover:before {
    counter-increment: button-counter;
    content: counter(button-counter);
    position: absolute;
    right: 0;
    bottom: 0;
    color: #d7e3e3;
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.button-cover,
.knobs,
.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button {
    position: relative;
    top: 50%;
    width: 74px;
    height: 36px;
    margin: -20px auto 0 auto;
    overflow: hidden;
}

.button.r,
.button.r .layer {
    border-radius: 100px;
}
/*
    .button.b2 {
        border-radius: 2px;
    }
*/
.checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.knobs {
    z-index: 2;
}

.layer {
    width: 100%;
    background-color: silver;
    /* slot colour when unchecked */
    transition: 0.3s ease all;
    z-index: 1;
}

/* Button 1 */
/* uncheck style of dot */
#button-red .knobs:before,
#button-orange .knobs:before,
#button-yellow .knobs:before,
#button-green .knobs:before,
#button-cyan .knobs:before,
#button-blue .knobs:before,
#button-purple .knobs:before,
#button-black .knobs:before,
#button-white .knobs:before {
    /* content */
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;

    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    /* color of dot when unchecked */
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}


#button-red .knobs:before {
    content: "RED";
    background-color: red;
    color: white;
    /* colour of text in dot */
}
#button-orange .knobs:before {
    content: "ORA";
    background-color: orange;
    color: white;
    /* colour of text in dot */
}
#button-yellow .knobs:before {
    content: "YEL";
    background-color: yellow;
    color: black;
    /* colour of text in dot */
}
#button-green .knobs:before {
    content: "GRE";
    background-color: green;
    color: white;
    /* colour of text in dot */
}
#button-cyan .knobs:before {
    content: "CYN";
    background-color: cyan;
    color: black;
    /* colour of text in dot */
}
#button-blue .knobs:before {
    content: "BLU";
    background-color: blue;
    color: white;
    /* colour of text in dot */
}
#button-purple .knobs:before {
    content: "PUR";
    background-color: purple;
    color: white;
    /* colour of text in dot */
}
#button-black .knobs:before {
    content: "BLA";
    background-color: black;
    color: white;
    /* colour of text in dot */
}
#button-white .knobs:before {
    content: "WHI";
    background-color: white;
    color: black;
    /* colour of text in dot */
}

#button-red .checkbox:checked + .knobs:before {
    content: "RED";
    left: 42px;
    background-color: red;
    /* color of dot when checked */
}
#button-orange .checkbox:checked + .knobs:before {
    content: "ORA";
    left: 42px;
    background-color: orange;
    /* color of dot when checked */
}
#button-yellow .checkbox:checked + .knobs:before {
    content: "YEL";
    left: 42px;
    background-color: yellow;
    /* color of dot when checked */
}
#button-green .checkbox:checked + .knobs:before {
    content: "GRE";
    left: 42px;
    background-color: green;
    /* color of dot when checked */
}
#button-cyan .checkbox:checked + .knobs:before {
    content: "CYN";
    left: 42px;
    background-color: cyan;
    /* color of dot when checked */
}
#button-blue .checkbox:checked + .knobs:before {
    content: "BLU";
    left: 42px;
    background-color: blue;
    /* color of dot when checked */
}
#button-purple .checkbox:checked + .knobs:before {
    content: "PUR";
    left: 42px;
    background-color: purple;
    /* color of dot when checked */
}
#button-black .checkbox:checked + .knobs:before {
    content: "BLA";
    left: 42px;
    background-color: black;
    /* color of dot when checked */
}
#button-white .checkbox:checked + .knobs:before {
    content: "WHI";
    left: 42px;
    background-color: white;
    /* color of dot when checked */
}
#button-red .checkbox:checked ~ .layer,
#button-orange .checkbox:checked ~ .layer,
#button-yellow .checkbox:checked ~ .layer,
#button-green .checkbox:checked ~ .layer,
#button-cyan .checkbox:checked ~ .layer,
#button-blue .checkbox:checked ~ .layer,
#button-purple .checkbox:checked ~ .layer,
#button-black .checkbox:checked ~ .layer,
#button-white .checkbox:checked ~ .layer {
    background-color: gray;
    /* slot colour when checked */
}

#button-red .knobs,
#button-red .knobs:before,
#button-red .layer,
#button-orange .knobs,
#button-orange .knobs:before,
#button-orange .layer,
#button-yellow .knobs,
#button-yellow .knobs:before,
#button-yellow .layer,
#button-green .knobs,
#button-green .knobs:before,
#button-green .layer,
#button-cyan .knobs,
#button-cyan .knobs:before,
#button-cyan .layer,
#button-blue .knobs,
#button-blue .knobs:before,
#button-blue .layer,
#button-purple .knobs,
#button-purple .knobs:before,
#button-purple .layer,
#button-white .knobs,
#button-white .knobs:before,
#button-white .layer,
#button-black .knobs,
#button-black .knobs:before,
#button-black .layer {
    transition: 0.3s ease all;
}



.grid-container-colour {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}


.pill-button {
    background-color: silver;
    border: black solid 2px;
    color: black;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 20px;
}

.pill-button:hover {
    background-color: #dfd;
    border: white solid 2px;
}


/* Game styles, for react.php */

.game_over {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 20rem;
}
.maths_game_over {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 5rem;
    color: purple;
    /* add a fade in so maths answer doesnt show straight away at game over */
    animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
     }
}


/* How the numbers for the Maths game are shown */
.sum_add {
    display: flex;
    color: green;
    font-size: 5rem;
    align-content: center;
    justify-content: center;
}
.sum_minus {
    display: flex;
    color: red;
    font-size: 5rem;
    align-content: center;
    justify-content: center;
}

/* Symbol shown in game style */

        .red_text_game {
            display: flex;
            color: red;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .orange_text_game {
            display: flex;
            color: orange;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .yellow_text_game {
            display: flex;
            color: yellow;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .green_text_game {
            display: flex;
            color: green;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .cyan_text_game {
            display: flex;
            color: cyan;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .blue_text_game {
            display: flex;
            color: blue;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .purple_text_game {
            display: flex;
            color: purple;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .black_text_game {
            display: flex;
            color: black;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }
        .white_text_game {
            display: flex;
            color: white;
            font-size: 20rem;
            align-content: center;
            justify-content: center;
        }

.xmas_icon {
    display: flex;
    font-size: 7rem;
}