:root {
    --epitech-primary: rgb(63, 81, 181);
    --epitech-secondary: rgb(48, 63, 159);
}

body, input {
    background-color: #1D1D1D;
    color: white;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

a {
    text-decoration: none;
    color: var(--epitech-primary);
}

a:hover {
    transition: color .1s ease-in-out;
    text-decoration: underline;
    color: var(--epitech-secondary);
}

input {
    border: none;
    padding: 3px;
    border-radius: 6px;
    outline: none;
    font-size: inherit;
}

button.button, input.button {
    border: none;
    outline: none;
    cursor: pointer;
}

.button {
    text-decoration: none;
    background-color: var(--epitech-primary);
    padding: 10px;
    border-radius: 4px;
    color: white;
    font-size: inherit;
}

.button:hover {
    text-decoration: none;
    transition: background-color .1s ease-in-out;
    background-color: var(--epitech-secondary);
    color: white;
}

#main_progressbar_outer {
    margin: 0 5%;
    height: 20px;
    padding: 10px;
    border-radius: 20px;
    background-color: #222;
    border: 4px solid #333;
    position: relative;
    overflow: clip;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#main_progressbar_inner {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    border-radius: 5px;
    background-color: #36d225;
    z-index: 1;
}

#main_progressbar_text {
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    padding: 3px;
    background-color: #1D1D1D88;
    border-radius: 3px;
    z-index: 2;
}

#tests {

}

.test {
    display: inline-flex;
    flex-direction: column;
    margin: 10px;
    border-radius: 10px;
    border-width: 2px;
    border-top-width: 1px;
    border-bottom-width: 3px;
    padding: 10px;
    border-style: solid;
}

.test span:nth-child(1) {
    margin-bottom: 5px;
}

.test.pass {
    border-color: #36d225;
}

.test.fail {
    border-color: #d22525;
}

pre {
    border-radius: 10px;
    background-color: #111010;
    padding: 10px;
    text-align: left;
}

code {
    position: relative;
    background-color: #111010;
    padding:2px;
    border-radius: 2px;
    font-family: monospace;
    cursor: pointer;
    user-select: none;
    transition: background-color .1s ease-in-out;
}

code::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(0%);
    bottom: 100%;
    padding: 2px 5px;
    background-color: #006d00;
    content: "Copied!";
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

code.copied::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-10%);
}

code:hover {
    background-color: #333;
}