* {
   font-family: 'Montserrat', sans-serif;
   margin-top: 0;
   margin-bottom: 0;
   user-select: none;
}

.scoreField {
   font-family: "Courier New" !important;
   font-weight: bold;
}

html, body {
   height: 100%;
   width: 100vw;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

body {
   background-color: var(--gray);
   display: flex;
   flex-direction: column;
   color: #000000;
   font-weight: 600;
}

header {
   background-color: var(--accent);
   position: relative;
   z-index: 100;
   color: white;
   display: flex;
   justify-content: center;
   padding: 1.25rem 2.75rem;
   box-shadow: var(--bs);
   font-size: 125%;
}

header.alt {
   background-color: var(--gray_darkest);
}

header .function:hover {
   color: var(--accent_lighter);
}

header .function:active {
   color: var(--accent_light);
}

header>div {
   width: 100%;
   max-width: var(--mw);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header>div>div, #wrapper_functions_l, #wrapper_functions_R {
   display: flex;
   max-width: var(--mw);
}

header .function {
   cursor: pointer;
}

a {
   text-decoration: none;
   color: var(--accent);
   font-weight: bold;
}

#wrapper_functions_l>.function {
   margin-right: 1rem;
}

#wrapper_functions_r>.function {
   margin-left: 1rem;
}

main {
   flex-grow: 1;
   height: 100%;
   padding: 1rem 2rem 0 2rem;
   overflow-y: auto;
}

.spreader {
   display: flex;
   justify-content: space-between;
}

.unbreakable, .unbreakable *{
   white-space: nowrap;
} 

.line{
   border-bottom: 1px solid var(--gray);
   margin-bottom: 1rem;
   margin-top: 1rem;
}

.line.thick{
   border-bottom: 1px solid var(--accent);
   margin-bottom: 1rem;
   margin-top: 1rem;
}

select{
   border-radius: 1rem;
   padding: 0.25rem 0.5rem;
}

@media screen and (max-width: 400px) {
   
   main {
      padding: 1rem 1rem 0 1rem;
   }
   header {
      padding: 1.25rem 1rem;
   }
}

@media screen and (max-width: 300px) {
   html {
      font-size: 85%;
   }
}

@media screen and (max-width: 350px) {
   .mid:not(.short), .full {
      display: none !important;
   }
}

@media screen and (max-width: 650px) and (min-width: 350px) {
   .short:not(.mid), .full:not(.mid) {
      display: none !important;
   }
}

@media screen and (min-width: 650px) {
   html {
      font-size: 125%;
   }
   .short, .mid:not(.full) {
      display: none !important;
   }
}