body:before {
 content: "";
 position: fixed;
 left: 0; right: 0;
 top: 0; bottom: 0;
 background: linear-gradient(45deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.56) 90%);
 /*filter: blur(8px);*/
 z-index: -1;
}

/* USE THIS TO CHANGE COLOR SCHEME*/
:root {
    --main-color:darkorange;
    --secondary-color:black;
    --hovercolor:orange;
    --textcolor:white;
    --borders:white;
  }

body{
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  text-align: center;
  padding: 0;
  text-decoration: none;
  margin:0;
  background-color: white;
  color:var(--textcolor);
  background-image:url('https://cdn.discordapp.com/attachments/708459350649340034/709192289779580988/thumb-1920-1029784.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

body a {text-decoration: none;}

body {
  margin: 0;
  font-family: sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: var(--secondary-color);
  position:fixed;
  z-index:10;
  width:100%;
}

.navbar a {
  float: right;
  display: table;
  color: var(--textcolor);
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: var(--hovercolor);
  color: var(--textcolor);
}



.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a {display: none;}
  .navbar a.icon {
    z-index:11;
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {position: fixed; z-index:10;}
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.container{
  width: 100%;
  margin: auto;
  overflow: hidden;
  justify-content: center;

}

.containerb{
  width: 75%;
  margin: auto;
  overflow: hidden;
  justify-content: center;
}

.containerc{
  width: 99%;
  margin: auto;
  overflow: hidden;
  justify-content: center;
}


.centerh {

        position: absolute;
        top:25%;

}


.button {
  /*background-color: var(--main-color);*/
  border: none;
  color: var(--textcolor);
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-top: 2px solid var(--borders);
  border-bottom: 2px solid var(--borders);
  border-right: 2px solid var(--borders);
  border-left: 2px solid var(--borders);
}

.navbar .logo {
  display: table;
  float: left;
  font-size: 2.2em;
  padding: 0px 10px;
  text-decoration: none;
}


.c-box {
    font-family: 'Roboto', sans-serif;
    position: relative;
    top:65px;
    border-top: var(--main-color) 3px solid;
    border-bottom: var(--main-color) 3px solid;
    border-left: var(--main-color) 3px solid;
    border-right: var(--main-color) 3px solid;
    background: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 1px 2px 3px #000;
    -moz-box-shadow: 1px 2px 3px #111;
    box-shadow: 1px 2px 3px #1d1d1d;
    -webkit-border-radius: .9em;
    -moz-border-radius: .9em;
    border-radius: .9em;
    overflow:hidden;

}

.c-box h1 {
    margin: 0 0 12px 0;
    padding: 12px 0;
    font-size: 24px;
    color: #ffffff;
    border-bottom: 2px dotted #ffffff;
}

.c-box p {
    margin: 0 0 12px 0;
    line-height: 1.5em;
    font-size: 15px;
    color: #ffffff;
}

.c-box span {
    font-weight: bold;
}

.c-box a {color:white;}

.d-box {
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding: 20px 40px;
    margin-top:63px;
    background: rgba(50, 50, 50, 0.4);
    border-top: var(--main-color) 3px solid;
    border-bottom: var(--main-color) 3px solid;
    border-left: var(--main-color) 3px solid;
    border-right: var(--main-color) 3px solid;
    -webkit-box-shadow: 1px 2px 3px #000;
    -moz-box-shadow: 1px 2px 3px #111;
    box-shadow: 1px 2px 3px #1d1d1d;
    -webkit-border-radius: .9em;
    -moz-border-radius: .9em;
    border-radius: .9em;
}

.d-box h1 {
    margin: 0 0 12px 0;
    padding: 12px 0;
    font-size: 24px;
    color: #ffffff;
    border-bottom: 2px dotted #ffffff;
}

.d-box p {
    margin: 0 0 12px 0;
    line-height: 1.5em;
    font-size: 15px;
    color: #ffffff;
}

.d-box span {
    font-weight: bold;
}




cctb {
    display: inline-block;
    border-radius: 10px;
    min-width: 65px;
    color:white;
    border: 1px solid var(--borders);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--main-color);
    text-rendering: optimizeLegibility;
}


.selbuttons {border:none;border-radius: 5px;padding:10px;width:48px;background:var(--main-color);;color:#fff;font-weight:bold;}
.selbuttonsbigger {border:none;border-radius: 5px;padding:10px;width:55px;background:var(--main-color);;color:#fff;font-weight:bold;}

/*tabbed browsing portion

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Style the tab */


/* Style the buttons that are used to open the tab content */
.tab button {
 background-color: inherit;
 float: left;
 border: none;
 outline: none;
 cursor: pointer;
 padding: 14px 16px;
 transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
 background-color: #ddd;
}



/* Style the tab content */
.tabcontent {
 display: none;
 padding: 6px 12px;
 border-top: none;
}