body {
font-family: 'Times New Roman', serif;
font-size: 16px;
background-size: cover;
background-color: #000;
color: #FFFFFF;
background-image: url(https://vhshorror.neocities.org/attributes/bg.jpg);
  background-attachment: fixed;
margin: 0;
}
 
.wrapper {
  margin: 0 auto;
}

* {
    box-sizing: border-box;
}

.container {
      display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
      align-items: stretch;
    column-gap: 10px;
    margin-top: 200px;
}
  
.sidebar-left {
      display: flex;
max-height: 760px;
                  flex-direction: column;
}
  
.main {
    display: flex;
    max-height: 760px;
    flex-direction: column;
  }
  
.box {
  border: 2px inset #DE240B;
  background: #000;
  padding: 10px;
margin-bottom: 10px;
margin: auto;
overflow: scroll;
height: 600px;
  /* box-shadow: 0 0 8px 2px #DE240B; */
  }
  
.box img {
  max-width: 100%;
  height: auto;
  }
  
s {
  color: #DE240B
}
  
  
/* header stuff */
.header {
  position: fixed;
top: 30px;
left: 60px;
            }
            

.header img {
transition: all 1s; 
  display: block;
  margin: auto;
}

.header img:hover {
transform: scale(1.03);
}

/* navigation links stuff */
.navbar {
font-family: 'Army';
font-size: 60px;
  position: fixed;
top: 30px;
right: 30px;
text-align: center;
word-spacing: 30px;
}

.navbar a {
color: #ffffff;
font-weight: 800;
text-decoration: none;
display: inline-block;
transition: .3s ease;
}

.navbar a:hover {
color: #DE240B;
transform: translateY(-20%);
display: inline-block;
cursor: pointer;
transition: .3s ease;
}

.selection {
  font-family: 'Army';
font-size: 40px;
text-align: right;
word-spacing: 30px;
}

.selection a {
color: #ffffff;
font-weight: 800;
text-decoration: none;
display: inline-block;
transition: .3s ease;
}

.selection a:hover {
color: #DE240B;
transform: translateY(-20%);
display: inline-block;
cursor: pointer;
transition: .3s ease;
}

.footer {
height: 0;
text-align: center;
font-size: 14px;
color: #A1A1A1;
margin-bottom: 50px
}

.footer a {
  color: #DE240B;
}
  
.footer a:hover {
  color: #fff;
}

.warning {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 0;
}

.title {
  font-family: Evil Dead;
  color: #fff;
  font-size: 50px;
text-shadow: 2px 2px 1px #DE240B;
}

.divider {
  border-top: 1px dashed #DE240B;
}

.piece {
  border: 1px solid #DE240B;
  width: 100px;
  height: 100px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  	background: #000;
}

.piece img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: 100%;
  transform: translate(-50%, -50%);
  	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.piece img:hover {
	opacity: .5;
}

.thumb {
    width:100%;
    height:100%;
    object-fit: cover;
}

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  }
  
  #preloader {
  background: black
    url("https://vhshorror.neocities.org/attributes/Rolling@1x-0.7s-195px-195px.svg")
    no-repeat center;
  align-items: center;
  justify-content: center;
  width: 100%;
  display: flex;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 9999;
}

@media only screen and (max-width: 800px) {
  .box {
    height: 1000px;
  }
  
  .piece {
  width: 200px;
  height: 200px;
  }
}