@font-face {
    font-family: 'DURFfont';
    src: url("../fonts/DURFont.otf") format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Berlin Sans FB';
    src: url("../fonts/BRLNSR.TTF") format('truetype');
    font-weight: bold;
    font-style: normal;
}
* {
    font-family: "Berlin Sans FB";
    margin: 0;
}

body {
    overflow-x: hidden;
}

:root {
    --BG-color: rgb(196, 244, 224);
    --border-color: rgb(88, 112, 102);
}

.hidden {
    display: none !important;
}

.center-content {
    display: flex;
    align-items: center;

    flex-flow: column;
}

.main-content {
    width: 100vw;
    height: 100vh;
}

.row-flow {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-flow: row;
}

pad-box {
    padding: 10px;
}

button {
    padding: 10px;
    background-color: var(--BG-color);
    border: 4px solid var(--border-color);
    border-radius: 5px;
    min-width: 100px;

    transition: transform .1s;
}

button:hover {
    filter: brightness(80%);
    transition: .05s;
}
button:active {
    filter: brightness(60%);
    transform: scale(95%);
}

h1,h2,h3,h4 {
    font-family: "DURFfont", sans-serif;
}

h1 {
    color: var(--border-color);
}

#categories {
    text-align: center;
}
.title {
    text-align: center;
}
.selected {
    outline: solid 5px var(--border-color) !important;
}
.clicked-animation {
    transform: scale(.95);
}

table {
    
    user-select: none;
}


table tr:first-child th:first-child {
    border-top-left-radius: 8px !important;
}
  
table tr:first-child th:last-child {
    border-top-right-radius: 8px !important;
}
  
table tr:last-child td:first-child {
    border-bottom-left-radius: 8px !important;
}
  
table tr:last-child td:last-child {
    border-bottom-right-radius: 8px !important;
}


table tr:nth-child(2n) {
    background-color: var(--BG-color);
}