/*links to ultrakill.html*/

/*crt effect*/

.crt::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.crt::after {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 2;
pointer-events: none;
}


/*fade in*/

.fade-in-image {
  animation: fadeIn 1.5s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
    50%{opacity:0}
  100% { opacity: 1; }
}

/*FONTS*/
@font-face {
  font-family: "VCR";
  src: url('../fonts/VCROSD.ttf') format('truetype');
}

@font-face {
  font-family: "Dyslexic";
  src: url('../fonts/OpenDyslexic-Regular.otf') format('opentype');
}

/*for the dyslexic font toggle*/
.opendyslexic {
  font-family: "Dyslexic";
  font-size: 15px;
}

::selection {
  background: #D23838;
  color: white;
}

a {
  text-transform: uppercase;
  color: #D23838;
}

a:hover, a:visited:hover {
  color: #37D0EF;
}

a:visited {
  color:orange;
}

body {
  cursor: url('images/ultrakill/pistol.png'), auto;
  font-family: "VCR", sans-serif;
  background-color: #2B2B2B;
  background-image: url('images/ultrakill/boxbg.png');
  background-size: 75px;
  color: white;
  padding: 0 5px;
  overflow-y: scroll;
  line-height: 1.5;
}

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-template-columns: 1fr 3fr;
  padding: 5px;
}

.container > div {
  padding: 5px;
  background-image: url('images/ultrakill/background.png');
  background-size: 75px;
}

.container > div.header, .smallcontainer > div.header {
  grid-area: header;
  text-align: left;
  font-size: 2em;
  border: 5px solid #531211;
  border-radius: 10px 10px 0 0;
  background: #9A2829;
  background: linear-gradient(0deg,rgba(154, 40, 41, 1) 0%, rgba(131, 28, 29, 1) 55%, rgba(154, 40, 41, 1) 100%);
  text-shadow: 2px 2px black;
}

.container > div.sidebar {
  grid-area: sidebar;
  text-align: center;
  border: transparent solid 10px;
  border-top-width: 5px;
  border-right: none;
  border-image: url("images/ultrakill/borders.png") 15% stretch;
  height: 700px;
}

.container > div.content {
  grid-area: content;
  height: 700px;
  border: transparent solid 10px;
  border-top-width: 5px;
  border-left: none;
  border-image: url("images/ultrakill/borders.png") 15% stretch;
}

button {
  font-size: 2em;
  font-family: "VCR", sans-serif;
  width: 100%;
  border: black 4px solid;
  border-radius: 10px;
  color: white;
  padding: 15px 5px;
  margin-bottom: 15px;
}

button:hover {
  color: #CACACA;
}

.box button {
  background: #4B0103;
  background: linear-gradient(180deg,rgba(75, 1, 3, 1) 0%, rgba(47, 1, 0, 1) 44%, rgba(26, 0, 1, 1) 90%, rgba(35, 0, 2, 1) 100%);
  margin-top: 20px;
}

.box button:hover {
  background: #330002;
  background: linear-gradient(180deg,rgba(51, 0, 2, 1) 0%, rgba(33, 1, 0, 1) 44%, rgba(10, 0, 1, 1) 90%, rgba(23, 0, 2, 1) 100%);
}

.sidebar button {
  background: #555555;
  background: linear-gradient(180deg,rgba(85, 85, 85, 1) 0%, rgba(46, 46, 46, 1) 44%, rgba(24, 24, 24, 1) 90%, rgba(34, 34, 34, 1) 100%);
}

.sidebar button:hover {
  background: #383838;
  background: linear-gradient(180deg,rgba(56, 56, 56, 1) 0%, rgba(38, 38, 38, 1) 44%, rgba(13, 13, 13, 1) 90%, rgba(26, 26, 26, 1) 100%);
}

.sidebar img.smileos {
  width:85%;
  margin: 35px 0;
}

.header img.logo {
  height: 100%;
  float: left;
  margin: 0 25px 0 5px;
}

.header img.controls {
  height: 100%;
  float: right;
  margin-right: 5px;
}

.smallcontainer {
  display: grid;
  grid-template-areas:
    "header header"
    "content content";
  grid-template-columns: 1fr 3fr;
  padding: 5px;
}

.smallcontainer > div {
  padding: 10px;
}

.smallcontainer > div.content {
  grid-area: content;
  height: 575px;
  overflow-y: hidden;
  border: transparent solid 10px;
  border-top-width: 5px;
  border-image: url("images/ultrakill/borders.png") 15% stretch;
}

.box {
  background-image: url('images/ultrakill/boxbg.png');
  background-size: 75px;
  margin: 10px;
  border: 3px solid;
  border-color: black #474747 #474747 black;
  padding: 10px 25px;
  overflow-y: scroll;
  height: 525px;
  text-align: center;
}

.stamps img {
  height: 56px;
}

.blinkies img {
  height: 20px;
}

.plushies img {
  height: 40px;
}

.red {
  color:#D23838;
  text-transform:uppercase;
}

hr {
  border-color: white;
}

h2 {
  margin-top: 50px;
}

table {
  width: 100%;
  border-spacing: 5px 50px;
}

td {
  padding: 10px;
}

td h2 {
  margin: 0;
}

/*levels*/
details.acts {
  margin-bottom: 10px;
}

details.acts[open] {
  margin-bottom: 50px;
}

summary.acts, .cybergrind {
  border: white solid 5px;
  border-radius: 15px;
  padding: 10px 20px;
  margin: 0 30%;
  font-size: 1.2em;
  text-align: left;
}

summary {
  list-style-type: "";
}

summary.perfect {
  background-color: #FFAF00;
  border-color: #FFAF00;
}

.rank {
  border: white solid 2px;
  float: right;
  padding: 0 10px;
  border-radius: 5px;
}

.layerrank {
  padding: 0 20px;
  border-radius: 5px;
  float: right;
  border: white solid 3px;
}

.d, .info .d {
  color: #0095FF;
}

.c, .info .c {
  color: #47FF09
}

.b, .info .b {
  color: #FED800
}

.a, .info .a {
  color: #F96907;
}

.s, .info .s {
  color: #FB0101;
}

.p, .info .p {
  background-color: #FFAF00;
  border-color: #FFAF00;
}

summary.acts:hover,
.info > details:hover {
  border-color: grey;
}

details.acts[open] > summary {
  border-color: #FE0000;
}

summary.perfect:hover, .layerperfect {
  background-color: #C98A00;
  border-color: #C98A00;
}

details.acts[open] > summary.perfect {
  background-color: #FE0000;
  border-color: #FE0000;
}

.layer {
  text-align: left;
  margin: 25px 25px 0 25px;
  padding: 15px;
  border-radius: 10px;
}

.layertitle {
  font-size: 2em;
}

.levels {
  display: grid;
  grid-gap: 5px;
}

.levels > div {
  text-align: center;
  padding: 10px;
  border-radius: 10px;
}

.levels > div.perfect {
  background-color: #EFA400;
  border-color: #EFA400;
}

.prelude {
  grid-template-columns: auto auto auto auto auto;
}

.mainact {
    grid-template-columns: auto auto auto auto;
}

.finallayer {
  grid-template-columns: auto auto;
}

.prime {
    grid-template-columns: auto auto auto;
}

.primerank {
  border-radius: 5px;
  padding: 5px;
  border: white solid 4px;
  font-size: 3em;
}

.info {
  display: grid;
  grid-template: auto auto auto auto auto auto auto;
  grid-gap: 5px;
}

.info .levelrank {
  grid-column: 6 / span 2;
  grid-row: 1 / span 2;
  font-size: 3em;
}

.info .challenge {
  grid-row: 2 / span 1;
  grid-column: 1 / span 5;
}

.info > div, .info > details {
  border-radius: 5px;
  padding: 5px;
  border: white solid 4px;
}

.info > details.complete:hover {
  background-color: #DEDEDE;
  border-color: #DEDEDE;
  color: #5C5C5C;
}

.complete {
  background-color: white;
  color: grey;
}

.challengedesc {
  opacity: 0.6;
  font-size: 0.8em;
}

.info .boss {
  visibility: hidden;
}