/*ROBOTO MONO*/
@font-face {
    font-family: 'ROBOTO'; /*a name to be used later*/
    src: url('fonts/Roboto/RobotoMono-Regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'ROBOTO'; /*a name to be used later*/
    src: url('fonts/Roboto/RobotoMono-Bold.ttf'); /*URL to font*/
    font-weight: bold;
}

@font-face {
    font-family: 'ROBOTO'; /*a name to be used later*/
    src: url('fonts/Roboto/RobotoMono-Italic.ttf'); /*URL to font*/
    font-style: italic;
}

@font-face {
    font-family: 'ROBOTO'; /*a name to be used later*/
    src: url('fonts/Roboto/RobotoMono-BoldItalic.ttf'); /*URL to font*/
    font-weight: bold;
    font-style: italic;
}


/* top | right | bottom | left */

:root {
  --color-bg:        27, 44, 38;     /* #101c18 */
  --color-primary:   22, 36, 31;     /* #2e513c */
  --color-secondary: 19, 26, 20;    /* #3f6b52 */
  --color-accent:    105, 178, 140;  /* #69b28c */
  --color-text:      224, 255, 230;  /* #e0ffe6 */
  --color-muted:     36, 65, 55;     /* #244137 */
}

.vhr{
    border:         none;
    border-left:    1px solid hsla(200, 10%, 50%,100);
    height:         100vh;
    width:          1px;    
}

a{
    color: rgb(var(--color-text));
    text-decoration: none;
    transition: color 0.1s ease, transform 0.1s ease;
}

a:hover{
    color: #d96735;
}

.bug{
    color: #000;
}
.bug: hover{
    color: #d96735;
}


header {
    z-index: 1000;
    position: fixed;
    width: 100%;
    backdrop-filter: blur(5px);
    height:80px;
    font-size: 15px;

    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);

    color: rgb(var(--color-text));
    background-color: rgba(var(--color-primary), 0.95);
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  width: 100%;
}

nav ul li {
  margin: 0 1rem;
}


nav ul li a {
  text-decoration: none;
}

body {
    /*font: normal 13px daydream, Verdana, Arial, sans-serif;*/
    font-family: 'ROBOTO';
    background-image: url("bg.png");
    background-repeat: repeat-xy;
    background-position: 0 0;
    margin: 0;
    padding: 0;

    color: rgb(var(--color-text));
}

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.1s ease;
  color: rgb(var(--color-text));
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0);
}

button:hover{
    color: #d96735;
}

.navbox{
    margin: 50px;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


input, select {
  width: 100%;
  padding: 7px 10px;
  display: inline-block;
  border: 0px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: rgba(var(--color-bg), 1);
   color: rgb(var(--color-text));
}

.clear{
    clear: both;
    padding:0px;
    margin:0px;
}

.gameBackground{
    background-color: rgba(var(--color-secondary), 0.8);
    padding: 20px;
    box-shadow: inset 0px -5px 5px 0px rgba(0, 0, 0, 0.1);
 
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.gameBorder{
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.00);
    /*border-radius: 10px;*/
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    /*box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2);*/
    padding: 5px;
    text-align: center;
}

.boxBorder{
    overflow: hidden;
    border-top: 0px solid rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    /*box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2);*/
    padding: 25px;
    text-align: center;
}

.colorStyle {
    background-color: rgba(var(--color-bg), 1);
    backdrop-filter: blur(5px);
}

.textBox{
    /*background-color: rgba(0, 0, 0, 0.01);*/
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.05);
     border-radius: 20px;
    padding: 20px;
    text-align: left;
    max-width: 1280px;
    margin: auto;
}

.section-underline {
  border: none;
  height: 2px;
  background-color: rgba(var(--color-accent), 0.4);
  width: 1000px;
  margin: 0 auto 2em;
  border-radius: 1px;
}

/*Thank you :) https://stackoverflow.com/questions/35329581/how-to-make-a-dropdown-login-menu-in-html-css*/
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;

    position: absolute;
    top:20px;
    background-color: rgba(var(--color-primary), 0.9);
    min-width: 160px;
    padding: 12px 16px;
    z-index: 1;
    border-radius: 4px;
    border:1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}