html {
background: #392667 url("images/DarkWoodTexture1920x1080.png") no-repeat center center fixed;
background-size: cover;
  height: 100vh;
  overflow: hidden;
  font-size: 16px;
  min-height: 100%;
  min-width: 100%;
  color: white;
}


.container {
display: flex;
gap: 10px;
  align-items: center; /* Centers content vertically */
  justify-content: center; /* Centers content horizontally (optional) */
  height: 100vh; /* Sets the container height (e.g., full screen height) */
}


// <weight>: Use a value from 100 to 1000
// <uniquifier>: Use a unique and descriptive class name

.dm-sans-special {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.coral-pixels-regular {
  font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
}

.averia-serif-libre-light {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  font-style: normal;
}

.averia-serif-libre-regular {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
}

.averia-serif-libre-bold {
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: normal;
}

.averia-serif-libre-light-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  font-style: italic;
}

.averia-serif-libre-regular-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: italic;
}

.averia-serif-libre-bold-italic {
  font-family: "Averia Serif Libre", serif;
  font-weight: 700;
  font-style: italic;
}

.astloch-regular {
  font-family: "Astloch", system-ui;
  font-weight: 400;
  font-style: normal;
}

.astloch-bold {
  font-family: "Astloch", system-ui;
  font-weight: 700;
  font-style: normal;
}

.rubik-pixels-regular {
  font-family: "Rubik Pixels", system-ui;
  font-weight: 400;
  font-style: normal;
}

.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

/* End of fonts */



.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: #fff;    }
    49%{    color: #fff; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #fff;    }
    
    }

	     
/*Basic Text*/
p { color: white;
font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
left:0;
right:0;

}


h1 { color: #ffffff;
font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
font-size: 3em;
text-align: center;
left:0;
right:0;
letter-spacing: 10px;
word-spacing: 2px;

}

h2 { color: #c0b942;
font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
text-align: center;
left:0;
right:0;
letter-spacing: 10px;
word-spacing: 2px;
}

h3 { color: white;
font-size: 2em;
font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
text-align: center;
left:0;
right:0;
letter-spacing: 10px;
word-spacing: 2px;
text-shadow: limegreen 1px 0 10px;

}

/*Basic Images*/

img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border-color: #777777;
border-style: double;
border-width: 3px;
}
 /*list properties */
 

#links li {color: #392667;
font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
line-height: 150%;
margin-left: 35px;
margin-right: 35px;
padding: 1px;
}

/*special text*/
.special {
  color: #ffffff;
font-family: "Coral Pixels", serif;
  font-weight: 400;
  font-style: normal;
  text-align:center;
  letter-spacing: 10px;
word-spacing: 2px;
padding:5px;
}

.player {  
  bottom: 10px;
  position: fixed;
  margin-left: 0 auto;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*links*/

/* unvisited link */
a:link {
  color: white;
text-decoration: none;
text-shadow: 0 0 20px #378f5d;
}

/* visited link */
a:visited {
  color: #392667;
  text-decoration: none;
  text-shadow: 0 0 20px #a88b8b;
}

/* mouse over link */
a:hover {
  color: #FFFFFF;
  cursor: crosshair;
  text-shadow: 0 0 5px #fff,
                0 0 10px #fff,
                0 0 20px #a88b8b,
                0 0 30px #a88b8b,
                0 0 40px #a88b8b,
                0 0 55px #a88b8b,
                0 0 70px #a88b8b;

}

/* selected link */
a:active {
  color: a88b8b;
  text-decoration: none;
}

@media screen and (max-width: 800px) { /* styles */}