/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
    font-family: 'Comic';
    src: url('../assets/comic-webfont.woff2') format('woff2'),
         url('../assets/comic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root,

/* Frost Colums (aka default) theme*/

[data-selected-theme="Frost"]{
  --color-background: rgba(51, 153, 255, 0.4);
  --color-border: lightblue;
  --color-text-body: red;
  --color-text-restofthingslol: white;
  --literallybg:url("../assets/RCZWLL4.png");
  --justthehr: lightblue;
  --tableheader: darkblue;
}

/* Infernal Cavern theme*/

  [data-selected-theme="Infernal"]{
  --color-background: rgba(147, 39, 39, 0.4);
  --color-border: maroon;
  --color-text-body: darkorange;
  --color-text-restofthingslol: white;
  --literallybg:url('assets/Backgrounds/icz.png');
  --justthehr: darkorange;
  --tableheader: darkorange;
}

/* Zombie escape 2 theme*/

[data-selected-theme="ZE2"]{
  --color-background: rgba(51, 51, 51, 0.7);
  --color-border: #4d4d4d;
  --color-text-body: darkgreen;
  --color-text-restofthingslol: white;
  --literallybg:url('assets/Backgrounds/ze2bg.png');
  --justthehr: darkgreen;
  --tableheader: darkgreen;
}

button[aria-pressed="true"] { 
  border:rgba(51, 153, 255, 0.0);
  background:rgba(51, 153, 255, 0.0);

}

button[aria-pressed="false"] { 
  border:rgba(51, 153, 255, 0.0);
  background:rgba(51, 153, 255, 0.0);

}

hr {
  border: 1px dashed var(--justthehr);
}
.sidenavb {
  width: 150px;
  position: absolute;
  z-index: 1;
  top: 390px;
  left:40px;
  overflow-x: hidden;
  padding: 8px 0;
  display: inline-block;
  overflow-y: scroll;
  height:240px;
}

.sidenavb a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 15px;
  display: flex;
  flex-direction: column;
}
    div {
  background-color: var(--color-background);
  width: 700px;
  border: 10px solid var(--color-border);
  padding: 50px;
  margin: 20px;
   position: relative;
}

table{
  border: 10px solid var(--color-border);
 border-collapse: collapse;
 background-color: rgba(0,0,0,0.2);
}

th{
    border: 5px solid var(--color-border);
 border-collapse: collapse;
 color: var(--tableheader);
}
td {
  border: 5px solid var(--color-border);
 border-collapse: collapse;
 color: var(--color-text-restofthingslol);
}

.div2 {
  width: 800px;
  padding: 20px;
  margin: 15px;
  position: relative;
  left:-505px;
  display:block;
  background:none;
  border:none;
  bottom:60px;
  
}

.container {
  background-color: rgba(51, 153, 255, 0.0);
  width: 820px;
  border: none;
  position: absolute;
  margin-top:-50px;
    left: 50%;
    right:50%
    margin-left: -550px;
  }

ul{
  text-align:left;
  color: var(--color-text-restofthingslol);
}
.sidenav {
  width: 150px;
  z-index:1;
  position: absolute;
  top: 45px;
  left:40px;
  padding: 8px 0;
  display: inline-block;
  flex-direction: column;
}

small {
  text-align:left
}
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  color: var(--color-text-restofthingslol);
}

.imageflex { display: flex; }
.imageflexcontent { margin-left: 5px; margin-top: 0; }

  body {
  background-image: var(--literallybg);
  background-repeat:repeat;
  max-width: 800px;
  margin: auto;
  text-align:center;
  font-family: "Comic";
  color: var(--color-text-body);
  overflow-x:hidden;
      padding:20px;
    margin:15px;
}

h1 {text-align:center;
}

h2 {
  font-family: "Comic";
  color: var(--color-text-restofthingslol);
}

p {
  font-size:14px;
  color: white;
}
a{
text-decoration: none;
  color:cyan;
}
li{
  font-size:14px;
}
details{
color: var(--color-text-restofthingslol);
}

summary{
 color: var(--color-text-restofthingslol);
}
iframe{
  border: 10px solid var(--color-border);
  background-color: var(--color-background);
}

    .menu{
    height:1px;
    width:800px;
    padding:1px;
    margin:1px;
    justify-content: center;
    align-items: center;
    background:none;
    border:none;
    }