/* 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: 'mainFont'; /* set name */
  src: url('/NewRocker-Regular.ttf?#iefix') format('truetype');
}

.sideLStuff{
  display:table-cell;
  width: 14.5%;
  height: auto;
}

.sideRStuff{
  display:table-cell;
  width: 14.5%;
  height: auto;
}

.fastSocials{
  display:block;
  padding: 5% 5% 5% 5%;
  margin: auto;
}

.mainHeader{
  align-items:center;
  justify-content:center;
  display:inline-flex;
  flex-flow: row wrap;
  margin: auto;
  width: 19.5%;
  height: auto;
}

.mainLogo{
  padding: 3% 3% 0 3%;
  display: inline-flex;
}

.mainContainer{
  border: 2px solid #f1d663;
  border-radius: 5px;
  width: 70%;
  height: auto;
  display:table-cell;
  background-image: url('/texture.png');
  background-position: center;
}

.img{
  display:block;
}

.img-popinoutanim {
  -webkit-animation: pop 1s ease-in-out infinite alternate;
  animation: pop 1s ease-in-out infinite alternate;
  -moz-animation: pop 1s ease-in-out infinite alternate;
}

.img-floatinganim {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.img-saturatedhover {
  filter: saturate(100%);
  transition: .25s ease-out;
}

.img-saturatedhover:hover {
  filter: saturate(300%);
  transition: .15s ease-in;
}

.img-invertedhover {
  filter: invert(0%);
  transition: .25s ease-out;
}

.img-invertedhover:hover {
  filter: invert(100%);
  transition: .15s ease-in;
}


@keyframes floating {
  0% {
    transform: translate(0,  0px);
  }

  50%  {
    transform: translate(0, 15px);
  }
  100%   {
    transform: translate(0, 0px);
  }
}

@keyframes pop {
  from {
    transform:scale(0.95)
  }

  50% {
    transform:scale(1)
  }

  to {
    transform:scale(0.95)
  }
}


body {
  background-color: #67449b;
  background-image: url('https://files.catbox.moe/fse5qc.jpg');
  background-position: center;
  background-size: 100%;
  width:100%;
  height: auto;
  color: #d1d1d1;
  font-family: mainFont;
  display:table;
  justify-content:center;
  margin: auto;
  opacity: 0.9;
}

p {
  padding: 2% 10% 2% 10%;
  color: #d1d1d1;
  font-family: mainFont;
  align-items:center;
  justify-content:center;
  display:flex;
  text-shadow: 3px 3px 6px black;
  margin: auto;
}

h2 {
  padding: 2% 2% 2% 2%;
  background-color:#c45941;
  color: #f2d663;
  font-family: mainFont;
  align-items:center;
  justify-content:center;
  display:flex;
  text-shadow: 3px 3px 6px black;
  margin: auto;
}

.sideBar {
  height: 100%;
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed;
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  border: 0px solid #f1d663;
  border-radius: 5px;
  background-image: url('/texture.png');
  overflow-x: hidden; /* Disable horizontal scroll */
  overflow-y: scroll;
  transition: 0.3s;
  display:inline-grid;
  grid-template-areas: auto auto auto;
  column-gap: 3px;
}

.sideBar a {
  display:inline;
  padding: 1% 1% 1% 3%;
  text-decoration: none;
  transition: 0.5s;
  color: #f2d663;
}

.sideBar a:hover {
  color: #f1f1f1;
  opacity: 1;
}

/* Position and style the close button (top right corner) */
.sideBar .closebtn {
  position: absolute;
  top: 0;
  right: 5%;
  font-size: 36px;
  margin-left: 2%;
}

.sideBarContent {
  display:block;
  padding: 5% 5% 5% 5%;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sideBar {padding-top: 15px;}
  .sideBar a {font-size: 18px;}
}

.carousel{
  width: 90%;
  margin: 5% auto;
  display:flex;
  overflow-x: auto;
  border: 2px solid #f1d663;
}

.carousel::-webkit-scrollbar{
  display:none
}

.atlas{
  display:flex;
  align-content:center;
  justify-content:center;
  gap: 1em;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-name: slide;
  animation-timing-function: linear;
}

.slot{
  height: 5em;
  padding: 1em;
  font-size: 3rem;
  align-content:center;
  text-align:center;
  flex: 0 0 5em;
}

@keyframes slide {
  0% {transform: translate(0%, 0)}
  100% {transform: translate(-100%, 0)}
}

.disk {
object-fit: cover;
-webkit-mask-image: url(https://imgur.com/tDqMXc6);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: spin;
animation-timing-function: linear;
}

@keyframes spin {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}