/* General css. */
body {
    --background-color: #02000a;
    --font-color: #bdbdbd;

    background: var(--background-color);


    color: var(--font-color);

    font-family: "Open Sans", sans-serif;

    overflow-x: hidden;
}

/* Title on top of the page. */
#title {
    font-size: 80px;
    text-align: center;
    margin-bottom: 0px;
}

/******************************************************************************
 * CSS for the configuration row.
 *****************************************************************************/
#config-container {
    padding-left: 1%;

    --bs-accordion-btn-color: var(--font-color);
    --bs-accordion-bg: var(--background-color);
    --bs-accordion-color: var(--font-color);
    --bs-accordion-border-color: 0;
    --bs-accordion-active-color: var(--font-color);
    --bs-accordion-active-bg: var(--background-color);
    --bs-accordion-border-width: 0;
}

#config-strip {
    height: 100%;
    width: 100%;
}

.config-entry {
    height: 200px;
    position: relative;
}

#file-submit {
    height: 100%;
}

#file-select-box {
    height: 78%;
    position: relative;
    border: 4px dashed #fff;
}

#save-row {
    text-align: left;
}

#create-use-wheelname {
    float:left;
    margin-right: 1%;
}

#use-filename-label {
    float: left;
    width: 44%;
    height: 100%;
}

#create-filename {
    float: right;
    width:50%;
}
/* File input "dotted square". */
#config {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
}

/* Text in "dotted square". */
form#file-submit p {
    width: 90%;
    height: 90%;
    margin: 0;
    padding: 5%;
    text-align: center;
    color: #ffffff;
}

/* Load button css. */
#load {
    margin: 0;
    color: #fff;
    background: #16a085;
    border: none;
    width: 100%;
    height: 20%;
    margin-top: 2%;
    border-radius: 4px;
    border-bottom: 4px solid #117A60;
    transition: all .2s ease;
    outline: none;
}

#load:hover {
    background: #149174;
    color: #0C5645;
}

#load:active {
    border: 0;

}

#load {
    display: block;
}

/* The OR word between file selection and new wheel creator. */
#config-strip h2 {
    padding-top: 80px;

    text-align: center;
}

/* The new wheel creator */
.moving {
    height: 250px;
    display: block;
    right: 0;
}

/* Container wrapping wheel creation. */
#create-container {
    right: 0;
    height: 250px;
    position: relative;

    background: #02000a;
    background: -webkit-linear-gradient(110deg, #02000a, #02000a);
    background: linear-gradient(110deg, #02000a, #02000a);
}

#config-container button {
    background: inherit;
    color: inherit;
}

/* The button for opening the creation wheel. */
#create-handler {
    float: left;
    height: 100%;
    width: 200px;
    display: block;
    position: absolute;

    font-size: 20px;
    color: #bdbdbd;
    text-decoration: none;
    padding: 10px;

    align-items: center;
}

.closed:hover {
    padding: 0px;
}

#create-text {
    font-size: 21px;
}

/* Chevron left. */
#chevron {
    margin: 0;
    font-size: 50px;

    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* The form for creating a new wheel. */
.collapse {
    z-index: 1;
}

.form-group button {
    margin-right: 1%;
    float: right;

}

textarea {
    margin-bottom: 1%;
}

.hide-filename {
    visibility: hidden;
}

#create-form {
    text-align: center;
}

/*****************************************************************************
 * CSS for the wheel of fortune itself.
 *****************************************************************************/
#wheel-container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 50%;
    margin-right: 50%;

    -moz-transform: translateX(-250px);
    -ms-transform: translateX(-250px);
    transform: translateX(-250px);

    height: 570px;
    width: 100%;
    overflow-y: hidden;
    /* overflow-x: visible; */

    position: relative;
    margin-top: 5%;
    display: block;
}

#wheel-name {
    width: 500px;

    font-size: 50px;
    margin: 1%;
    text-align: center;
}

/* Wheel canvas. */
.canvas {
    visibility: hidden;
    display: block;
    position: absolute;
}

#wheel-canvas {
    --old-rotate-amount: 0deg;

    /* -moz-transform: translateX(-50%) rotate(var(--rotate-amount));
    -webkit-transform: translateX(-50%) rotate(var(--old-rotate-amount));
    transform: translateX(-50%) rotate(var(--old-rotate-amount)); */

    -moz-transform: rotate(var(--rotate-amount));
    -webkit-transform: rotate(var(--old-rotate-amount));
    transform: rotate(var(--old-rotate-amount));
}

#result {
    position: absolute;
    margin-top: 250px;
    margin-left: calc(50% + 300px);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.shake {
    animation: shake 0.5s;
}

/******************************************************************************
 * ANIMATIONS
 *****************************************************************************/
@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}