@font-face {
  font-family: 'VCR_OSD_MONO';
  src: url('../assets/VCR_OSD_MONO_1.001.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-4px);
  }
  40%, 80% {
    transform: translateX(4px);
  }
}


body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'VCR_OSD_MONO', monospace !important;
  color: white;
  background: black;
}


a:link {
  color: #EFCE70;
}

a:visited {
  color:#c9a43f;
}

a:hover {
  color: #ebd8a1;
} 


select {
    padding: 5px;
    margin: 3px;
    font-size: 20px;
    background-color: black;
    color: #3bafdd;
    border: 4px solid #001f2b;
    text-align: center;
}

#comicMenu{
  display:none
}

#chapterMenu{
  font-family:'Courier New', Courier, monospace
}

#pageMenu{
  font-family:'Courier New', Courier, monospace
}


.mainreaderwindow{
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding: 35px;
  gap:10px;
}

.outerborder
{
  border: 2px solid #001f2b;

  text-align: center; 
  position: relative;
  top: 0px;
  left: 0px;  
  display: flex;
  justify-content: center;
  align-items: center;  
}

.container
{
	display: inline-block;
	vertical-align: middle;
	text-align: center; 
}

.pageTurnButton:hover
{
  cursor:pointer;
}

.otherButton
.outerartbox
{
  border: 1px solid #3bafdd;
  background-color: #001f2b;
  margin: 2px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 175px;
  color: #3bafdd;
}

.outerartbox:hover {
color: #3bafdd;
}

.descbox
{
  border: 4px solid #001f2b;
  background-color: #001f2b;
  margin: .2%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 50%;
}

.outerartbox .tooltip
{
	margin-left: -100px;
	margin-top: -150px;
	visibility: hidden;
	border: 1px solid #3bafdd;
	padding: 2px;
	max-width: 400px;
	text-align: center;
	background-color: #001f2b;
	position: absolute;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.25s;
}

.outerartbox:hover .tooltip
{
	visibility: visible;
	opacity: 1;
}

.artbox
{
 border: 1px solid #3bafdd;
 padding: 1px;
 margin-top: 5px;
 height: 95%;
 width: 95%;
 background-color: #001f2b;
 display: inline-block;
 vertical-align: middle;
}

#home-logo:hover{
  animation: shake 0.4s ease-in-out;
}

.left:hover{
  cursor:pointer;
}

.right:hover{
  cursor:pointer;
}

.otherButton:hover{
  cursor:pointer;
}

/* mobile/smaller screen responsive */
@media (max-width: 600px) {
  .pageTurnButton
  {
    display:none;
  }
}