/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  background-color: darkgray;
  background-image: url(static.gif);
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment: fixed;
  animation-name: Startup;
  animation-duration: 0.5s;
  animation-iteration-count:1;
  animation-timing-function: ease-out;
}

@keyframes Startup{
  from {filter:blur(3px);}
  to {filter:blur(0px);}
  }
  
@keyframes glitch {
  0% {margin-left:0px;}
  50%{margin-left:10px;}
  100%{margin-left:0px;}
  }

 .glitch{
  position: relative;
  animation-name: glitch;
  animation-duration: 0.1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: transform 0.5s ease;
  }  

  .glitch:hover {
  transform: scale(1.05);
}

  
h1 {
  color: #FBFFFE;
  font-size:550%;
  margin-left:5%;
  padding:0.7%;
  text-shadow: 2px 2px 4px #000000;
  font-family: nibz;
  }

div{
  background-color:#FBFFFE;
  }

#headerstuff{
    box-shadow: 7px 10px #001514;
  }
  
.oi-regular {
  font-family: "Oi", serif;
  font-weight: 400;
  font-style: normal;
}


ul {
  list-style-type: none;
  margin: -8px;
  padding: 0;
  overflow: hidden;
  background-color:#001514;
}

li {
  float: right;
  margin:5px;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #A3320B;
  font-family: pressstart;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #6B0504;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.img1 {
  width:20%;
  height:20%;
  float:right;
  margin-top:-90px;
  margin-right:30px;
  border-radius:100%;
}
  
.text1 {
  font-size:110%;
  color:#001514;
  margin:25px;
  font-family: pressstart;
}

/*MAIN PAGE*/

.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #001514;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  display: block;
  background-color: #A3320B;
}

.sidenav a:hover {
  background-color: #111;
}

.main {
  margin-left: 200px; /* Same as the width of the sidenav */
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.collapsible {
  background-color:  #6B0504;
  color: white;
  cursor: pointer;
  padding: 6px 8px 6px 16px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  font-family: pressstart;
}

.active1, .collapsible:hover {
  background-color: #111;
}

.content {
  display: none;
  overflow: hidden;
  color: white;
}

.content a{
  background-color: #001514;
}

.content a:hover{
  background-color: #3F504F;
}

.main-content{
  border:6px dashed black;
  border-bottom:8px solid;
  border-top:15px solid;
  margin-left: 250px;
  margin-top: 40px;
  width: 80%;
  background-color: #e1e1e6;
}

h2{
  font-family: saint-carell;
  color: #3b2925;
  font-size: 400%;
  padding-left: 30px;
  margin-top: 20px;
}

h3{
  font-family: Timess;
  margin-bottom: -10px;
}

.titling{
  text-align: center; 
  font-size: 40px;
  margin-bottom: 20px;
  background-color: #4C4B63;
  color:white;
}

.main-content p{
  font-family: Timess;
  font-size: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.row {
  display: flex;
}

/* Create three equal columns that sits next to each other */
.column {
  flex: 50%;
  margin-left: 20%;
}

.spotify-div{
  background-color: black;
  padding: 30px;
  width: 10%;
  text-align: center;
  flex: 50%;
  padding: 5px;
  margin-right: 20%;
}

audio{
  background-color: black;
  height:30px;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius:10px;
  background-color:#7E8A89;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #A3320B; 
  border-radius: 10px; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #6B0504; 
}

@font-face {
  font-family: nibz; /* set name */
  src: url(NibzRegular.ttf); /* url of the font */
  }

@font-face {
  font-family: saint-carell; /* set name */
  src: url(SaintCarell_PERSONAL_USE_ONLY.otf); /* url of the font */
  }

@font-face {
  font-family: alagard; /* set name */
  src: url(alagard.ttf); /* url of the font */
  }

@font-face {
  font-family: amoira; /* set name */
  src: url(AMORIA.otf); /* url of the font */
  }
@font-face {
  font-family: pressstart; /* set name */
  src: url(PressStart2P.ttf); /* url of the font */
  }

@font-face {
  font-family: typeshit; /* set name */
  src: url(ELEGANT TYPEWRITER Regular.ttf); /* url of the font */
  }
    
@font-face {
  font-family: Timess; /* set name */
  src: url(TIMESS__.ttf); /* url of the font */
  }