@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');



body{
  background-color: #252322;
  margin: 0;
  padding: 0; 
  font-family: georgia, system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}

/* for collapsables */

.collapsable {
  display: none;
}


/* responsive experimenting */

.main {
   /* margin-left: 300px; */
   margin: 50px; 
   background: transparent; 
   padding: 15px;
}

.Rcontainer {/* CONTAINER div type */
 background: #DB5D3D;
 margin: 10px; 
 display: flex;
 flex-wrap: wrap;
 padding: 10px;
 justify-content: center;    /* ^^ + makes it so things center horizontally */
 border-radius: 5px;
 box-shadow: 1px 0px 10px #111111;
 border-color: #403B36;
}

.Rscroll {
  overflow: auto; 
  height: 300px;
}

.Rstacking { /* this is for dividers/ stuff that should stack veritcally on PC but horizontally on mobile */
  display: flex;
  flex-direction: column; 
}

.Rtopbar {
  height: 50px; 
  width: 100%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 2; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  overflow: hidden; /* Disable horizontal scroll */
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  box-sizing: border-box;
  background-image: url("backgroundswirl.gif");
  display: flex;
  align-items: flex-start;
  border-bottom: solid;
}

.RTBmini {
  height: 50px;
  margin: 0 auto; 
  justify-content: center;    /* ^^ + makes it so things center horizontally */
  align-items: center;   /* ^^ + makes it so things center verticlly */
  display: flex;
}

.Rtopbar img {
 padding:3px
}

.Rsidebar {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 300px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0; 
  overflow: hidden; /* Disable horizontal scroll */
  padding: 20px;
  margin-top: 50px;
  box-sizing: border-box;
  justify-content: center; 
  /* background-image: linear-gradient(to bottom, #4C4742, #403B36); */
  border-right: solid; 
}
.Rsidebar img {
  width: 90%; 
  margin: 5%;
}

.Rsidebar, .Rtopbar { /* sidebar/top bar stuff */
  border-width: 0.5px;
  border-color: #403B36;
  background-color: #1D1C1B;
  box-shadow: 1px 0px 10px #111111;
}

.Rbutton { /* image buttons */
  transition: all 0.1s ease-in-out;
  border: none; 
  background: transparent; 
}
.Rbutton:hover { /* image buttons */
  transform: scale(1.1); 
  cursor: pointer;
}

.RSBmini { /*copy of Rxx for button/hover functionality see below */
  width: 98%;
  transition: all 0.4s ease-in-out; /* for grow transition */
}

.RSBmini:hover {
  background-color: #DB5D3D;
  color: #252322; 
  transform: scale(1.05); 
  cursor: pointer;
}

.Rhundred {/*  all these Rxx are for scaling specific %s within boxes. prob could be optimized with flex boxes.... but im lazy  */
  width: 98%;
}
.Rsixty {
  width: 58%;
}
  .Rthirty {
  width: 28%; 
}
.Rtwenty {
  width: 18%; 
}
.Rten {
  width: 8%; 
}
.Rfourty {
  width: 38%; 
}
.Rseventy {
  width: 68%; 
}
.Rfifty {
  width: 48%; 
}
.R25 {
  width: 23%; 
}


/* when adding do not forget to add into mobile functionality section!! */

.RSBmini, .R25, .Rfifty, .R2070, .Rseven, .Rseventy, .Rhundred, .Rsixty, .Rthirty, .Rtwenty, .Rten, .Rfourty { /* all the R... divs */
    float: left;
    padding: 10px 3% 10px 3%; /* top right bottom left padding is inside, margin is outside  */
    margin: 0.5%;
    display: flex;
    flex-direction: column; /*makes it so things stack vertically */
    justify-content: center;    /* ^^ + makes it so things center horizontally */
    align-items: center;   /* ^^ + makes it so things center verticlly */
    background-color: white;
    box-sizing: border-box; /* makes it so padding doesnt make shapes different sizes, its incluvded in default height/wdith */
    border-radius: 5px;

}

.R2070 {
  width: 13.5%; 
  text-align: justify;
  border-radius: 0px;
  margin-right: 0px;
  margin-left: 0px;
}


/* A/P/H1/etc. */


.Rtopbar p {
  color: white; 
  font-size: 20px;
}

.Rsidebar p {
  color: #DB5D3D; 
  font-size: 20px;
}

.Rsidebar a {
  color: #DB5D3D; 
  font-size: 20px
}





/* MOBILE STUFF:!!!!!!!!: */

@media (max-width: 800px) {
    .R2070, .Rseven, .R25, .Rseventy, .Rhundred, .Rsixty, .Rthirty, .Rtwenty, .Rten, .Rfourty, .Rfifty {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .R2070 {
    margin:0px
  }
  .Rcontainer {
    width: 90%;
    margin-right: 5%;
    margin-left: 5%; 
  }
  .Rstacking {
    flex-direction: row; 
  }
  .Rtopbar p {
  font-size: 14px;
  }

  
}