:root {
    --border: #ce0000;
    --bg1: #0f0f71;
    --bg2: rgb(66, 33, 33);
    --bg3: #8bb8c6;
    --text: #4a0909;
    --blue: #2da0ff;
}

#red {
  border: var(--border) solid 1px; border-radius: 50px; background-color: black;
  z-index: 999999999;
  display: none;
  position: fixed;
  top: 50px;
  left: 50px;
  padding: 7px;
  width: 70%;
}

#mydiv {
  max-width: 50rem;
  max-height: 40rem;
  top: 40px;
  left: 70px;
  border-radius: 4px;
  position: absolute;
  z-index: 9;
  background-color: var(--bg1);
  text-align: center;
  border: 1.5px solid var(--border);
}

#mydivheader {
  padding-top: 4px;
  padding-left: 4px;
  padding-right: 4px;
  cursor: move;
  z-index: 10;
  background: var(--bg1);
  border: 1px var(--border) solid;
  font-family: 'pixel';
  border-radius: 4px;
  text-align: right;
}

.bar {
  background: linear-gradient(#ce0000, #ca836b);
  border: var(--border) 1px solid;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 8px;
  color: var(--text);
  text-align: left;
}

.bar p:hover {
  font-style: italic;
}

.container {
  gap: 8px;
  display: flex;
	flex-wrap: wrap;
  background-color: var(--bg1);
  border: var(--border) 1.5px solid;
	padding: 7px;
}

@font-face {
  font-family: 'basiic';
  src: url(fonts/basiic.ttf);
}

@font-face {
    font-family: 'pixel';
    src: url(fonts/PixelOperator.ttf);
}

@font-face {
    font-family: 'mono';
    src: url(fonts/PTMono-Regular.ttf);
}


@font-face {
    font-family: 'undertale';
    src: url(fonts/determination.ttf);
}

.small { flex: 4 4 9%; }

.half { flex: 1 1 49%; }

.large { flex: 2 2 82%; }

.full { flex: 1 1 100%; }

em {
  font-style: normal;
}

p {
    font-family: 'basiic';
    margin: 0px;
    padding: 0px;
}

h3{
  font-family: 'pixel'; 
  margin: 4px; 
  font-weight: lighter;
  font-size: 1.5rem;
   background-color: aliceblue; 
   padding: 4px; 
   border: var(--border) 1px solid; 
   border-radius: 4px;
   text-align: left;
   font-style: italic;
}

.navs {
  margin-top: 7px; background-color: var(--blue); padding: 4px; display: flex;
}

.pkris {
  background-color: aliceblue; border-radius: 4px; border: 1px solid var(--border); text-align: left; padding: 4px; margin: 4px;
}

.pkris:hover {
  font-style: italic;
}

h4{
    margin: 3px;
    text-align: center;
    font-weight: normal;
    font-size: 1.6rem;
    font-family: 'pixel';
    animation: chroab 400ms ease-in both;
}

h4:hover {
   transform: rotate(-180deg);
}

a:hover, a:focus {
	font-style: italic;
}

#about {
  display: none;
  position: fixed;
  top: 20px;
  width: 400px;
  color: white;
  background: black;
  left: 500px;
  z-index: 9999999;
}

#media {
  display: none;
  position: fixed;
  top: 10px;
  width: 420px;
  color: white;
  background: black;
  left: 600px;
  z-index: 999999;
}

.button {
	display: block;
	margin: 5px;
	padding: 2px 7px;
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: 4px;
  color: blue;
  font-family: 'pixel';
  font-size: 1.3rem;
  flex: 1 1 49%;
}

.button:hover, .button:focus {
font-style: italic;
background-color: var(--border);
}


li {
  border: 1px dashed var(--border);
  list-style-type: none;
  border-radius: 4px;
  margin-top: 20px;
  padding: 3px;
}

.textbox{
  background: black;
  border: solid 7px white;
  padding: 10px;
  font-family: 'pixel';
}

.empty {
    border: none;
    background: none;
    padding: 0px;
}

.very {
  border: 10px solid var(--bg3);
  border-image: url(images/border.png) 10 round;
}

.media {
  border: 15px solid var(--bg3);
  border-image: url(images/border2.png) 10 round;
  margin: 10px;
  text-align: left;
  color: #0f0f71;
}

.media div {
  background: white;
  padding: 7px;
  display: flex;
  flex-wrap: wrap;
  max-height: 130px;
  overflow-y: auto;
}

.media p {
  padding: 5px;
  font-size: 1rem;
   flex: 4 4 9%;
   font-family: 'mono';
}

.media h2 {
font-size: 1.3rem; 
text-align: left;
margin: 0px;
padding: 0px;
width: 100%;
}

.media h2:hover {
  font-style: italic;
}

.media img {
  width: 70px;
  height: 100px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-right: 7px;
}

section {
	border: 1px solid var(--border);
  font-size: 1.2rem;
  background-color: var(--bg3);
  font-family: 'pixel';
  padding: 20px;
  border-radius: 4px;
}

section {
  transition: transform 0.5s ease;
}

section:hover {
   transform: scale(1) rotate(1deg);
}

.hover {
  transition: transform 0.5 ease
}

.hover:hover {
  scale: (2);
}

.barsection {
  margin-top: 8px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 7px;
  text-align: left;
  overflow-y: auto;
}

.barsection li {
  border: #ce0000 dashed 1px;
  margin-right: 6px;
  margin-left: 6px;
  font-size: 1.2rem;
  margin-top: 0px;
  margin-bottom: 0px;
  color: var(--text);
}

.barsection li:hover {
  font-style: italic;
  color: var(--border);
  background: #2da0ff;
}

marquee {
    padding-top: 5px;
    max-height: 70px;
}

marquee img {
  transition: transform 0.5s ease;
}


marquee:hover img {
  transform: scale(1.10) rotate(2deg);
}

.img {
border: var(--border) 1px solid;
border-radius: 4px;
}

.img {
  transition: transform 0.5s ease;
}


.img:hover {
  transform: scale(1.10) rotate(2deg);
}

marquee img {
border: var(--border) 1px solid;
border-radius: 4px;
width: 130px;
height: 68px;
}

.hover2:hover {
  animation: rotateImage 1s infinite;
}

.shake:hover {
  animation: tilt-shaking 0.15s infinite;
}

h4:hover {
    animation: rotateImage 1s infinite;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

@keyframes rotateImage {
    0% {
      transform: rotate3d(0, 0, 0, 0deg);
    }
    100% {
      transform: rotate3d(0, 0, 1, 360deg);
    }
}

 .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;
  animation: flicker 0.15s infinite;
}

nav {
  display: flex;
}

nav a {
	display: block;
	margin: 5px;
	padding: 2px 7px;
  border: 1px solid var(--border);
  background: var(--bg3);
  border-radius: 4px;
  flex: 1 1 49%;
}

  nav a:hover, nav a:focus {
background-color: var(--border);
}

.fade-in {
  animation: fadeIn ease 30s;
  -webkit-animation: fadeIn ease 50s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

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

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

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