/* 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." */

.gif-banner{
 
  animation: scroll-banner 5s infinite;
  
}

@keyframes scroll-banner{
 
 0% {background-position: 0;}
 50% {background-position: 100%;}
 100% {background-position: 0;} 
  
  
}

.main-nav {
 
 background-color: pink;
 border: solid violet thin;
  border-radius: 3%;
 
 /*align-content: center;*/
 list-style-type: none;
  
 /* display: inline; */

 /* flex-direction: row; */

 padding: 5px;
 
 box-shadow: 5px 5px;
  
 position: absolute;
 right: 2.2vw;
 left: 2.4vw;

 opacity: 80%;

 /* overflow:auto; */
  
}

.main-nav-l {
  
  background-color: violet;
  color: white;
 /* padding-left: 4.6vw;
 padding-right: 4.6vw; */
 padding-left: 4.43vw;
 padding-right: 4.43vw;
 display: inline;
 margin-top: 100px;
 /* margin: 0px; */
  
}

.main-nav-a {
 
 color: white;
 background-color: violet;
 font-weight: bold;
 text-decoration: none;
 /* margin: 0px; */
 /*padding-left: 89px;*/
 /*padding-right: 88px;*/
 /*position: relative;*/
 /*padding-left: 4.6vw;*/
 /*padding-right: 4.6vw;*/
  
}

a:hover {
 
 background-color: cyan;
 color: black;
  
}

.music-player{

  padding: 5px; 
  overflow: hidden;
  width: 25vw;
  color: purple;

}

.page-title {
 
 font-size: 30px;
 font-weight: bold;
 text-align: center;
 color: white;
 
 background-color: violet;
 margin: 5px;

 opacity: 90%;
  
}

.left-container {
 
  width: 26vw;
  
  display: flex;
  flex-direction: column;
  
  position: absolute;
  
  top: 11vh;
  left: 2.4vw;
  padding-bottom: 2vh;

  /* animation: wobble 2s infinite; */

  /* animation-name: wobble;
  animation-duration: 30s;
  animation-iteration-count: infinite; */
}

.left-container:hover{

  animation-play-state: paused;

}

.center-container {
 
  width: 40vw;
  
  display: flex;
  flex-direction: column;
 
  position: absolute;
  
  top: 11vh;
  left: 30vw;
  padding-bottom: 2vh;

  /* animation: wobble 2s infinite 0.3s; */

  /* animation-name: wobble;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-delay: 1s; */
  
}

.center-container:hover{

  animation-play-state: paused;

}

.right-container {
 
  width: 26vw;
  
  display: flex;
  flex-direction: column;
 
  position: absolute;
  
  top: 11vh;
  left: 71vw;
  right: 2.2vw;
  padding-bottom: 20vh;

  /* animation: wobble 2s infinite 0.6s; */

  /* animation-name: wobble;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-delay: 2s; */
 
}

.right-container:hover{

  animation-play-state: paused;

}

.article-container {
 
  width: 67vw;
  
  display: flex;
  flex-direction: column;
 
  position: absolute;
  
  top: 11vh;
  left: 30vw;
  right: 2.2vw;
  height: 85%;
  padding-bottom: 2vh;

  overflow: auto;
  
}

.panel {
  
  border-style: solid;
  border-color: violet;
  border-width: thin;
  /*border-radius: 3%;*/

  background-color: pink;
  
  box-shadow: 5px 5px;
  
  margin-top: 1vh;
  opacity: 80%;
}

.panel:hover {
  
  /*background-color: cyan;*/
  
  box-shadow: 10px 10px;
  opacity: 100%;
}


.panel-title {
  
  border-style: solid;
  border-width: thin;
  border-color: violet;
  border-radius: 10%;
  
  background-color: violet;
  color: white;
  
  font-weight: bold;
  
  margin: 5px;
  opacity: 100%;
  
}

.panel-content {
  
  border-style: solid;
  border-width: thin;
  border-color: violet;
  
  margin: 5px;
}

.title-panel {
  
  border-style: solid;
  border-color: violet;
  border-width: thin;
  border-radius: 5%;

  background-color: pink;
  
  padding: 0;
  margin: 0;
  
  box-shadow: 5px 5px;
  
  opacity: 80%;
  
}


.crt-effect{
  
   position: fixed; 
   left:0vw; 
   z-index: 0; 
   opacity: 20%; 
   width:100%;
   
}

@keyframes bg-scroll{

  0% {background-position: 0;}
  50% {background-position: 100%;}
  100% {background-position: 0;}

}

@keyframes wobble{

  0% {top: 11vh;}
  50% {top: 21vh;}
  100% {top: 11vh;}

}

h1 {
 
 text-align: center;

}

body {
  /*background-image: url("/Hello Kitty.jpg");*/
  background-image: url("drag.png");
  background-size: auto;

  
  animation-name: bg-scroll;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  
  color: black;
  font-family: Courier;
  
  padding:2vw;
  /*padding:50px;*/
  padding-top: 0px;
  
  padding-bottom: 2vh;
  
  cursor: url("/cursor.png"), auto;
}

body:hover{
  cursor: url("/cursor.png"), auto;
}

::selection{
  
  color:white;
  background-color: violet;
  
}

a:hover{
  cursor: url("/hand.png"), auto;
}

a:active{
  cursor: url("/hand\(hover\).png"), auto;
}


.key{

  scale:90%; 
  rotate: 8deg;
  position: absolute;

  left: 55vw;

}

.key:hover{

  content: url("key2.png");

}

.key:active{

  rotate: 0deg;

}