@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BBH+Bartle&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jacquard+12&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sixtyfour&display=swap');
/*Styling of pages*/
.information{
    display:flex;
    margin-left:260px;
}
.content{
    display:flex;
    flex-direction:column;
    align-items:center;
    outline:3px solid #989788;
    width:1000px;
    margin-top:120px;
    margin-left:150px;
    max-height:600px;
    overflow:auto;
    background-color:#03030E;
    opacity:90%;
}
.textholders{
    display:flex;
    flex-direction:column;
    padding-right:20px;
    overflow-y:auto;
}
.contentholders{
    display:flex;
    align-items:center;
    flex-direction:row;
}
.directory{
    position:relative;
    display:flex;
    flex-direction:row;
    margin-left:150px;
    outline:3px dotted #989788;
    height:50px;
    width:1000px;
}
.directP{
    padding-left:20px;
    font-family:"Sixtyfour";
    font-size:20px;
    opacity:.8;
    text-decoration:none;
}
.wrapper{
    display:flex;
    flex-direction:column;
    width:1000px;
}
/*tag editing
header{
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 0;
  z-index: 1000;
}
*/
header{
    position:fixed;
}
body{
    background-image:url("images/websitebg.png");
    background-repeat:no-repeat;
    background-size:cover;
    margin:0;
    background-color:#03030E;
}
footer{
    display:flex;
    margin-top:120px;
    outline:3px dotted #989788;
    position:fixed;
    margin-left:1200px;
    width:400px;
    background-color:#03030E;
    opacity:90%;
}
nav{
    position:fixed;
    display:flex;
    margin-top:120px;
    margin-left:-100px;
    margin-bottom:300px;
  flex-direction:column;
  background-color:#03030E;
  outline:3px solid #989788;
  width:150px;
}
nav:hover{
    transition:0.5s;
    box-shadow:4px 4px 10px #989788;
}
nav a{
    text-decoration:none;
    font-family:"VT323";
    padding-left:10px;
    color:#989788;
}
nav a:hover{
    text-decoration:underline;
    font-family:"VT323";
    transition:0.5s;
    transform:scale(1.05);
    color:#c9c8b7;
}
p{
    font-family:"VT323";
    color:#989788;
    font-size:20px;
}
h1{
    justify-content:space-around;
    font-family:"Jacquard 12";
    color:#989788;
}
h3{
    font-family:"VT323";
    color:#989788;
}
details{
    background-color:#989788;
}
summary{
    font-family:"VT323";
    color:#03030E;
}
.summaryP{
    font-family:"VT323";
    color:#03030E;
}
/* Classes */
#header{
    width:50vw;
    height:auto;
    display:block;
    padding-left:20px;
    font-family:"BBH Bartle";
    color:#989788;
    font-size:45px;
}
.drive{
    padding-left:100px;
    padding-right:40px;
}
#VHS{
    position:fixed;
    animation:vhs-wobble 1.8 infinite steps(1, end);
}
.text{
    max-width: 260px;
  margin-left: 20px;

  writing-mode: horizontal-tb;
  white-space: normal;
  line-height: 1.6;
  text-align: left;
}
/*animations*/
@keyframes vhs-wobble {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  20% {
    transform: translateX(-50%) translateY(1px);
  }
  40% {
    transform: translateX(-50%) translateY(-1px);
  }
  60% {
    transform: translateX(-50%) translateY(0.5px);
  }
  80% {
    transform: translateX(-50%) translateY(-0.5px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

/*scroll*/
::-webkit-scrollbar {
    width:30px;
}
::-webkit-scrollbar-track {
    background:#989788;
}
::-webkit-scrollbar-thumb {
    background:#03030E;
}