/* Huisstijl */

:root {
    --black: black;
    --white: white;
    --grey: grey;
    --lightgrey: lightgrey;
    --red: #FF3333;
    --orange: #FF9900;
    --yellow: #FFEE33;
    --green: #00E600;
    --cyan: #00DFFF;
    --blue: #6688FF;
    --violet:#bc6cfd;
    --pink: #FF66B2;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: Arial, sans-serif;
    background-color: lightgrey;
    text-align: left;
}

section {
    border: 1px solid black;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 5px 5px darkgrey;
    min-width: 300px;
}

.container {
    display: grid;
    box-sizing: border-box;
    padding: 20px;
    margin: 0px;
    grid-template-areas: 
    'inf music'
    'chinese credits';
    gap: 20px;
}

@media (max-width: 1000px) {
    .container {
        grid-template-areas: 
        'file-system credits'
        'metadata metadata'
        'fat fat'
        'changelog changelog'
    }
}

@media (min-width: 1600px) {
    .container {
        grid-template-areas: 
        'file-system metadata credits'
        'fat fat fat'
        'changelog changelog changelog';
    }
}

.file-system {
    grid-area: file-system;
}

.metadata {
    grid-area: metadata;
    min-width: 550px;
    width: 100%;
}

.fat {
    grid-area: fat;
    min-width: 700px;
}

.reset {
    text-align: center;
}

.credits {
    grid-area: credits;
    text-align: left;
}

.changelog {
    grid-area: changelog;
}

h3, h4 {
    font-variant: small-caps;
    background-color: black;
    color: white;
    padding: 3px;
    text-align: center;
    border-radius: 20px;
}

span {
    font-weight: bold;
}

.info h3, h4, 
.changelog h3, h4 {
    background-color: rgb(178, 178, 178);
    border: 1px solid black;
    color:black;
}

strong {
    font-variant: small-caps;
    font-size: 15px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

th,
td {
    padding: 5px;
    text-align: center;
    min-width: 20px;
    height: 20px;
}

.grey {
    color: grey;
    background-color: white;
}

select {
    font-weight: bold;
}

button {
    font-variant: small-caps;
    margin: 10px;
    border-radius: 10px; 
    font-weight: bold;  
}

button:hover {
    color: green;
    box-shadow: 2px 2px 5px green;
}

input {
    font-weight: bold;
    padding-left: 5px;
    border-radius: 5px;
}

input[type="checkbox"] {
    outline-offset: -2px;
    outline: 2px solid var(--green);
    accent-color: var(--green);
}

input[type="checkbox"]:disabled {
    outline: 2px solid var(--grey);
    outline-offset: -2px;
}

input[type="checkbox"]:disabled:checked {
    outline: 6px solid var(--green);
    outline-offset: -8px;
}

label {
    font-weight: bold;
}

#reset:hover, 
#hideSolutions:hover,
#delete:hover,
#sound:hover, 
#badsector:hover {
    color: red;
    box-shadow: 2px 2px 5px red;
}

#reset:active {
    color: green;
    box-shadow: 2px 2px 5px green;
}

.credits img {
    border-radius: 20px;
    border: 2px solid black;
}

#reset:active {
    color: green;
    box-shadow: 2px 2px 5px green;
}