@font-face { font-family:CrackBabies; src:url('/fonts/LotsOfDeadCrackBabies-vZO7.woff'); }
@font-face { font-family:Monsterrat; src:url('/fonts/Montserrat-VariableFont_wght.ttf'); }
@font-face { font-family:"Homemade Apple"; src:url('/fonts/HomemadeApple-Regular.ttf'); }

:root {
  --cur-main:url('/assets/RedMain.png'), auto;
  --cur-point:url('/assets/RedSelect.png'), auto;
  --red:#B80421;
}

* {
  padding:0;
  margin:0;
  cursor:var(--cur-main);
}

body {
  background-image:url('/imgs/kprojectpage.png'), url('/imgs/kprojectbg.png');
  background-repeat:no-repeat, no-repeat;
  background-position:center;
  background-attachment:fixed;
  background-color:#141414;
  color:white;
  width:100%;
  height:100vh;
  font-family:'Monsterrat';
  overflow-x:hidden;
}

a {
  cursor:var(--cur-point);
  color:var(--red);
  text-transform:uppercase;
  text-decoration:none;
  text-shadow:0 0 3px var(--red), 0 0 1px var(--red);
   transition:all 0.2s ease-in-out;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
}
a:hover {
  color:white;
  text-shadow:0 0 3px white, 0 0 1px white;
}





#header {
  width:100%;
  height:120px;
  background:url('/imgs/kprojectlogo.png') center no-repeat;
  margin-top:20px;
}

#container {
  background:rgba(0,0,0,0.8);
  margin:0 auto;
  width:1100px;
  height:100vh;
  overflow:auto;
}

#content {
  margin:30px 50px 50px 50px;
}





#faves {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:30px;
  height:400px;
}

/* Slideshow container */
.slideshow-container {
  width:500px;
  display:flex;
  justify-content:center;
}

/* Hide the images by default */
.mySlides {
  display: none;
}
.mySlides img {
  max-width:500px;
  max-height:280px;
}

/* Next & previous buttons */
.prev, .next {
  cursor:var(--cur-point);
  color:var(--red);
  font-weight:bold;
  font-size:40px;
  user-select:none;
   transition:all 0.2s ease-in-out;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color:white;
}

/* Caption text */
.text {
  color:white;
  text-align:center;
  margin-top:0;
}

#bubbles {
  text-align:center;
}

/* The dots/bullets/indicators */
.dot {
  cursor:var(--cur-point);
  height:15px;
  width:15px;
  margin:0 2px;
  background-color:#bbb;
  border-radius:50%;
  display:inline-block;
   transition:all 0.2s ease-in-out;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
}

.active, .dot:hover {
  background-color:var(--red);
}





.menubtn img {
   width:40px;
   filter:grayscale(100%) brightness(600%);
   transition:all 0.2s ease-in-out;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
}
.menubtn, #menu .close {
   position:fixed;
   top:4%;
   left:2%;
}
.menubtn:hover img {
   cursor:var(--cur-point);
   filter:grayscale(0%) brightness(100%);
}

.showmenu {
   opacity:0!important;
   top:0;
   left:-1000px!important;
   z-index:-1;
   visibility:hidden;
}
.showoverlay {
   visibility:hidden;
}

#overlay {
   position:fixed;
   z-index:99000;
   top:0;
   left:0;
   bottom:0;
   right:0;
   background-color:rgba(0,0,0,0.5);
   visibility:'';
}

#menu {
   position:fixed;
   top:-2px;
   left:-180px;
   z-index:99999;
   opacity:1;
   transition:all 0.4s ease-in-out;
   -webkit-transition:all 0.4s ease-in-out;
   -moz-transition:all 0.4s ease-in-out;
   -o-transition:all 0.4s ease-in-out;
   visibility:'';
}
#menu img.bg {
   width:120%;
   height:150%;
}

.close img {
   width:25px;
   -webkit-transition:.2s;
   -moz-transition:.2s;
   transition:.2s;
}
.close:hover img {
   cursor:var(--cur-point);
   filter:invert(100%);
}

.menu-links {
   position:fixed;
   bottom:10%;
   left:4%;
   z-index:3;
   color:black;
   font-family:'CrackBabies';
   font-size:40px;
   font-weight:bold;
   text-transform:uppercase;
   transform:rotate(-7deg);
}
.menu-links a {
   cursor:var(--cur-point);
   color:black;
   text-decoration:none;
   text-shadow:none;
   transition:all 0.2s ease-in-out;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
}
.menu-links a:hover {
   color:black;
   color:white;
   text-shadow:none;
}
.menu_ul {
   list-style-type:none;
}
.menu_li {
   transform:rotate(-7deg);
   transition:all 0.2s ease-in-out;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
}
.menu_li:hover {
   padding-left:20px;
}





h1 {
  font-family:'CrackBabies' !important;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:20px;
}
h1::before, h1::after {
  content:'—';
  padding:1ch;
}

p {
  margin-bottom:20px;
  line-height:22px;
}
b {
  text-transform:uppercase;
}
i {
  font-size:20px;
  font-family:"Homemade Apple";
  color:var(--red);
}