h1 {
    color: black;
}

ul {
    color: blueviolet;
    font-size: medium;
}

ol {
    color: cadetblue;
    font-size: large;
}

body {
    background-color: whitesmoke;
}

img {
    width: 100px;
}

header.border {
    border-bottom-style: outset;
}

nav,
footer {
    background-color: lightskyblue;
    text-align: center;
}


/* form styles */
input {
    width: 200px;
}

fieldset {
    width: fit-content;
}

input,
select {
    display: block;
}

input,
select,
fieldset {
    margin-bottom: 5px;
    border-radius: 3px;
}

/* color #010764: bit-academy blue */
.button {
    width: 100px;
    margin-top: 20px;
    background-color: #010764;
    color: white;
}

.radio,
.check {
    width: auto;
}

/* - focus selector: Dit is een zogenaamde pseudo-klasse. Pseudo-klassen worden gebruikt om een bepaalde staat 
     van elementen aan te spreken.
   - outline: Sommige browsers voegen automatisch Outline styling toe aan input en textarea elementen. 
     Hierdoor is je border niet altijd zichtbaar. Je kan dit voorkomen door 'outline: none;' 
     toe te voegen aan je element.
 */
textarea {
    border-color: red;
    border-width: 2px;
}

textarea:focus {
    outline: none;
    border-color: green;
    border-width: 2px;
}

input {
    border: 2px solid black;
    padding: 15px;
}


/* Table elements styling */
th,
td {
    min-width: 50px;
    padding: 15px;
    text-align: center;
}

/* only td's have a border */
td {
    border: 2px solid #010764;
    font-weight: bold;
}

/* th: row and column headers */
.header {
    background-color: lightgray;
}

/* td: empty cells */
.empty {
    background-color: white;
}

/* td: other cells */
.group1 {
    background-color: orange;
}

.group2 {
    background-color: plum;
}

.group3 {
    background-color: lightskyblue;
}

/* - hover selector: Dit is een zogenaamde pseudo-klasse. Pseudo-klassen worden gebruikt om een bepaalde staat 
     van elementen aan te spreken.
   - The :not() CSS pseudo-class represents elements that do not match a list of selectors (a.k.a. negation pseudo-class).
     In this specific case the 'hover specific properties' only apply if the class of the td is not the empty class,
     i.e. the empty cells of the table. 
 */
td:hover:not(.empty) {
    background-color: greenyellow;
    cursor: pointer;
}