@import url("https://mspfa.com/css/?s=41577&p=6");
.p1 #infobox tr:last-of-type td::after {
  content: "";

@import "tailwindcss";

  /*Main Stuff I did*/
    
}
    
    body {
      background-image: url("https://file.garden/Zs1zJ796OyyJ2paX/bnbg4.png");
      background-attachment: fixed;
      background-size: cover;
      background-color: black;
      font-family: courier new;
      font-weight: bold;
      color: white;
    }
    
.comic {
    display:flex;
    flex-wrap: wrap;
    font-family: 'Courier New';
    padding: 20px;
    
}

.panel {
  background-color:#000000;
  border:groove 25px #aaaaaa;
  box-shadow:0 -1px -1px -1px #000000;
  display:inline-block;
  margin: auto;
 
  
}

    .center {
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  width: auto;
}

/*SIDE BAR*/

.sidenavl {
  height: auto; /* Full-height: remove this if you want "auto" height */
  width: 350px; /* This is set to 500px + on main site idk why it doesnt work here */
  border-radius: 15px 50px;
  border: ridge 15px #2ca400c6;
  background-image: url("https://file.garden/Zs1zJ796OyyJ2paX/leftsidebar.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: relative; /* Fixed Sidebar (stay in place on scroll) */
  /*z-index: 1; Stay on top */
  /* top: 0;  Stay at the top */
  left: 0;
  background-color: #000000;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 300px;
}

/* The navigation menu links */
.sidenavl a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenavl a:hover {
  color: #f1f1f1;
}

.sidenavr {
  height: auto; /* Full-height: remove this if you want "auto" height */
  width: 350px; /* This is set to 500px + on main site idk why it doesnt work here */
  border-radius: 50px 15px;
  border: ridge 15px #2ca400c6;
  background-image: url("https://file.garden/Zs1zJ796OyyJ2paX/rightsidebar.png");
  background-position: center;
  background-size: auto 449px;
  background-repeat: no-repeat;
  position: relative; /* Fixed Sidebar (stay in place on scroll) */
  /*z-index: 1; Stay on top */
  /* top: 0;  Stay at the top */
  left: 0;
  background-color: #00009b;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 300px;
}

/* The navigation menu links */
.sidenavr a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenavr a:hover {
  color: #f1f1f1;
}

.graph {
  margin: auto;
  object-fit: contain;
  
}



/* SESE HELPED ME */

 #header {
        border: 2px solid #000000;
        height: 50px;
        width: 100%;
        text-align: center;
    }

    #nav {
        
        height: 40px;
        width: 100%;

        display: flex;
        margin: auto;
        gap: 5px;
    }

    .navImage {
        background-image: url("https://file.garden/Zs1zJ796OyyJ2paX/cassette_v001.png");
        object-fit: contain;
        background-color: black;
        width: 100px;
        height: 50px;
        flex: 0 0 auto;
    }

    #navBar {
        border: 2px solid #999;
        border-radius: 50% / 40%;
        background: linear-gradient(#222 0%, #777);
        width: 500px;
        overflow: hidden;
        flex: 1 1 auto;

        display: flex;
        gap: 1px;
    }

    .navButton{
        border: 2px solid #999;
        width: 0px;
        margin-top: -5px;
        margin-bottom: -5px;
        flex: 1 0 0px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navButton:hover {
        background-color: rgba(20, 20, 20, 0.5);
        cursor: pointer;
    }

/*Character Text*/

.centered {
  position: relative;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

p.DIRK {
    color: #ff7607;
    padding-left: 0;
} 

p.JANE {
color: #00d5f2;
padding-left: 20px;
}

p.ROXY {
color: #ff6ff2;
padding-left: 10px;
}

p.JAKE {
color: #1f9400;
padding-left: 30px;
    
}

.bottomnav {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  position: relative;
  
}
.arrowbk {
  position: relative;
  top: 2px;
  left: 40%;
  padding-left: 5px;
  padding-right: 5px;
}

/* Drop Down Text */


summary {
  display: flex;
  align-items: center;
}

summary::-webkit-details-marker { 
  display: block;
}

details > summary {
  padding: 6px;
  width: 77px;
  margin: auto;
  background-color: #108400;
  border: none;
  box-shadow: 1px 1px 2px #0b3401;
  cursor: pointer;
}

details > p {
  background-color: white;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}

.log {
	border: ridge 5px #0d9900;
	padding: 10px;
    margin: 10px;
    color: #ffffff
}

.log>div:last-child {
	margin: 12px 5%;
	padding: 3px;
	text-align: center;
}

/*.textbg {
    text-align: start;
    background-color: #dddddd;
    color:#5b5b5b;
    padding: 10px;
  
} */



/* Fun style */