/* One-liners */

body { margin: 0px; }
h1 { margin: 4px 0px; }
h2 { margin: 0px; }
p { margin: 0px; }
form.marginless { margin: 0px; }
table.pad td { padding: 4px; }
table.border td { border: 1px solid #fff; }
.inline { display: inline; }

/* Uncategorised */

a.nodeco {
    text-decoration: none;
    color: var(--text-col);
}

a.nocur {
    cursor: default;
}

.fakelink {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

.absolute-centre {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Fonts */

body, form, input, textarea, button {
    font-family: 'Ubuntu', 'VL Pゴシック', 'Calibri', 'Arial', 'unifont';
}

/* Navbar */

.navbar-editor {
    background-image: linear-gradient(180deg, transparent, var(--bg-col)),
                      radial-gradient(at top, transparent, var(--bg-col)),
                      repeating-linear-gradient(-45deg, var(--accent) 0 8px, transparent 8px 16px) !important;
}

/* Buttons */

button, input.button {
    color: var(--text-col);
    background-color: transparent;
    font-size: 16px;
    border: 2px solid var(--accent);
    border-radius: 4px;
    transition: 0.5s background-color, 0.5s color;
}

button:hover, input.button:hover {
    color: #fff;
    background-color: var(--accent-dark);
    transition: 0.5s background-color, 0.5s color;
}

button.dangerous, input.button.dangerous {
    color: #f00;
    background-color: transparent;
    font-size: 16px;
    border: 2px solid #f00;
    border-radius: 4px;
    transition: 0.5s background-color, 0.5s color;
}

button.dangerous:hover, input.button.dangerous:hover {
    color: #fff;
    background-color: #800000;
    transition: 0.5s background-color, 0.5s color;
}

/* Forms */

.formbg {
    transform: translate(-50%, -50%);
    background-color: var(--bg-col);
    border: 2px solid var(--bg-almost);
    border-radius: 8px;
    padding: 8px;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form textarea {
    color: var(--text-col);
    background-image: linear-gradient(90deg, var(--bg-col), transparent, transparent, transparent),
                      linear-gradient(270deg, var(--bg-col), transparent, transparent, transparent),
                      linear-gradient(0deg, var(--bg-almost), var(--bg-col));
    border: none;
    border-bottom: 2px solid var(--text-col);
}

form input[type="number"] {
    width: 4em;
    margin-right: 8px;
    color: var(--text-col);
    background-color: transparent;
    border: 2px solid var(--accent);
    border-radius: 4px;
    font-size: 1em;
}

/* List table */

table.list th { border-bottom: 2px solid var(--text-col); }
table.list th, table.list td { border-right: 1px solid var(--text-col); }
table.list th:last-child, table.list td:last-child { border-right: none; }
table.list tr:nth-child(even) { background-color: var(--bg-almost); }

/* Navbar */

.navbar a {
    float: left;
    text-align: center;
    padding: 10px 8px;
}

.navbar a.current {
    color: #fff;
    padding: 6px 10px 6px 10px;
    border-radius: 8px;
    background-color: var(--accent);
    border: 4px solid var(--accent-light);
}

.navbar span.user {
    float: right;
    font-weight: bold;
    padding: 10px 16px 10px 8px;
}

/* Subnav */

.subnav {
    color: var(--text-col);
    padding: 4px;
    margin: 4px;
}

.subnav.current {
    color: #fff;
    text-decoration: none;
    background-color: var(--accent);
    box-shadow: 0px 0px 16px var(--accent-light);
    border-radius: 4px;
}

/* Dropdown */

.dropdown a:last-child { border-bottom: none; }
.dropdown a:hover { background-color: var(--accent); }

.dropdown a {
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    /* After tons of experimenting, I finally learned that by default, any padding is added to the width of an element instead of it being accounted for
       from the beginning. To change this, you need to set the box-sizing property to border-box. */
}

.dropdown-trig:hover .dropdown {
    opacity: 100%;
    display: flex;
    flex-direction: column;
    /* Displaying the dropdown as a block felt right at first, but that ended up in the options not being on one line.

       I fixed this problem by displaying the dropdown as flex, with its direction set to column, but this centred the text horizontally
       instead of aligning it to the left.

       That was also very easy to fix by setting the text-align property of the links to left.

       After changing the logout option from a debug PHP file to a proper logout in common/usr.php, I ran into another problem: the background colour of the
       logout link wasn't changing along the full width. This happened due to the link no longer being in the flexbox, because it was now a child of a form
       in the flexbox. I solved this by explicitly setting the width of all .dropdown class child a elements to 100%, which introducet yet another problem.

       This problem was the fact that the links were now overflowing the page width.*/
    animation: dropdown 250ms;
}

@keyframes dropdown {
    from {
        opacity: 0%;
    }
    to {
        opacity: 100%;
    }
}

/* Lesson viewer */

.ltitle {
    display: inline;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: underline;
}

.qtitle {
    margin-top: 16px;
}

.qtext {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
}

.qansdiv {
    position: absolute;
    left: 0%;
    bottom: 0%;
    width: 100%;
}

.qansinfof {
    margin: 0px;
    width: 100%;
}

.qansduof {
    margin: 0px;
    width: 50%;
}

.qansquadf {
    margin: 0px;
    width: 25%;
}

.qansbtninfo {
    color: white;
    width: 100%;
    margin: 0px;
    font-size: 1.5em;
    border: none;
    background: linear-gradient(180deg, var(--bg-col) 0%, var(--accent-dark) 75%);
}

.qansbtninfo:hover { background: linear-gradient(180deg, var(--bg-col) 0%, var(--accent) 75%); }

.qansbtnduo {
    color: white;
    width: 50%;
    margin: 0px;
    font-size: 1.5em;
    border: none;
    background: linear-gradient(180deg, var(--bg-col) 0%, transparent 75%);
}

.qansbtnquad {
    color: white;
    width: 25%;
    margin: 0px;
    font-size: 1.5em;
    border: none;
    background: linear-gradient(180deg, var(--bg-col) 0%, transparent 75%);
}

.qansbtn-0 { background-color: #400040; }
.qansbtn-0:hover { background-color: #800080; }
.qansbtn-1 { background-color: #004040; }
.qansbtn-1:hover { background-color: #008080; }
.qansbtn-2 { background-color: #004000; }
.qansbtn-2:hover { background-color: #008000; }
.qansbtn-3 { background-color: #402040; }
.qansbtn-3:hover { background-color: #804080; }