@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300&display=swap');

:root {
    --back-color: #F5F5DC;
    --select-color: lightblue
}

* { 
    margin: 0; 
    padding: 0;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Azeret Mono', monospace;
    text-align: center;
    background-color: var(--back-color);
}

::-moz-selection { /* Code for Firefox */
    color: black;
    background: var(--select-color);
}

::selection {
    color: black;
    background: var(--select-color);
}

::placeholder {
    color: black;
    opacity: 1; /* Firefox */
  }
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: black;
}
  
::-ms-input-placeholder { /* Microsoft Edge */
    color: black;
}

textarea, input, select {
    outline: none;
    border: black solid 4px;
    padding: 8px;
}

textarea {
    width: 60%;
    height: 100px;
}

option:checked {
    background-color: var(--select-color) !important;
}

button {
    cursor: pointer;
    border: black solid 4px;
    padding: 8px;
}

hr {
    height: 4px;
    background-color: black;
    border: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* ** Titles ** */
.title { font-size: 40px; }
h1 { font-size: 35px; }
h2 { font-size: 30px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }

/* ** Margins ** */
.mgt-40 { margin-top: 40px; }
.mgb-100 { margin-bottom: 150px; }
.mgb-40 { margin-bottom: 40px; }
.mgb-20 { margin-bottom: 20px; }