* {

    font-family: Vremena, Arial, Helvetica, sans-serif;
    text-align: center;
}

body {
    background-color: #fffded;
}


#centred-table {
    margin: 0px auto;
    border-collapse: collapse;
}


/* Index */

#index-table {
    /* This merges double borders into single lines */
    border-collapse: collapse;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 20px 10px;
}

#index-table tr{
    height: 32px;
}

#index-table tr:nth-child(even){
    background-color: palegoldenrod;
}
#index-table tr:nth-child(odd){
    background-color: burlywood;
}

#index-table th,
#index-table td {
    /* border: thickness style color; */
    border: 1px solid black;
}


/* #index-table {
    margin-left: auto;
    margin-right: auto;
    border-spacing: 20px 10px;
}

#index-table table{
    border-collapse: collapse;
    border: 1px solid black;
    width: 100%
}

#index-table th, #index-table td{
    border: 1px solid black;

}


#index-left {
    text-align: left;
}

#index-right {
    text-align: right;
} */

/* View */

#answer-table {
    margin: 0px auto;
    border-collapse: collapse;
    width: calc(100vw - 100px);
    table-layout: fixed;

}

[id^="fake-button-"],
[id^="real-button-"],
#submit,
#return-button {
    margin: 10px;
    border-radius: 32px;
    text-transform: uppercase;
    color: black;
    background-color: white;
    border: none;
    font-size: 20px;
    padding: 15px 32px;
    box-shadow: 0px 5px 0px 1px black, 0 0 0 2px black;

}

.nav a {
    text-decoration: none;
    padding: 2px 5px;
    background-color: white;
    border: solid 2px black;
    border-radius: 32px;
    color: black;

}

#submit {
    padding: 7px 16px;
}

[id^="fake-button-"]:hover,
[id^="real-button-"]:hover,
#submit:hover,
#return-button:hover {
    background-color: khaki;
}

[id^="fake-button-"]:active,
[id^="real-button-"]:active,
#submit:active,
#return-button:active {
    box-shadow: 0 0 0 2px black;
    transform: translateY(3px);
}

/* 
[id^="fake-button-"] {

} */


[id^="rf-row-"] {
    border-bottom: 1px solid black;
}

[id^="rf-name-"],
[id^="rf-tick-"],
[id^="rf-truth-"] {
    height: 32px;
}



[id^="rf-name-"] {
    text-transform: uppercase;
}


.real,
.fake {
    display: inline-block;
    font-family: Peppa;
    rotate: -10deg;
    width: 40px;
    height: 22px;
    border-radius: 5px;
    translate: 0 5px;
}

.real {
    text-transform: lowercase;
    background-color: cornflowerblue;
}

.fake {
    text-transform: uppercase;
    color: white;
    background-color: black;
}


#topic-heading {

    text-transform: uppercase;
    font-weight: bold;
    font-size: 32px;
}

#candidate-container {
    position: relative;
    width: 380px;
    max-width: calc(100vw - 100px);
    height: 250px;
    margin: 0px auto;
}

.candidate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#candidate-label {
    background: rgb(var(--c));
    width: 380px;
    max-width: calc(100vw - 100px);
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px auto;
    font-size: min(40px, 10vw);
    text-transform: uppercase;
    font-weight: bold;
    font-family: Vremena;
    overflow: visible;

    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out 0.7s
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-10px);
    }

    40% {
        transform: translateX(10px);
    }

    60% {
        transform: translateX(-10px);
    }

    80% {
        transform: translateX(10px);
    }
}

.wrong {
    animation: shake 0.5s ease-in-out
}

.wrong #candidate-label {
    background: black;
    color: white;
}

.slide-left,
.slide-right {
    z-index: 2;
}

.slide-left #candidate-label {
    transform-origin: bottom center;
    transform: rotate(-15deg);
    opacity: 0;
}

.slide-right #candidate-label {
    transform-origin: bottom center;
    transform: rotate(15deg);
    opacity: 0;
}

#scribble {
    text-transform: lowercase;
    font-family: Peppa;
    font-size: 24px;

}


/* new.html */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    inset: 0;
    background-color: black;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.switch input:checked+.slider {
    background-color: cornflowerblue;
}

.switch input:checked+.slider::before {
    transform: translateX(30px);
}


@font-face {
    font-family: Vremena;
    src: url("fonts/vremena-grotesk/VremenaGrotesk.otf");
}

@font-face {
    font-family: Peppa;
    src: url("fonts/Peppa\ Pig-FontZillion/peppa\ pig.ttf");
}