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


html {
    --s: 11px; /* control the size*/
  --c1: #c0b942;
  --c2: #392667;
  
  --_g: calc(2*var(--s)) calc(2*var(--s)) 
    radial-gradient(25% 25%,var(--c1) 99%,#0000 101%);
  background:
    0 var(--s)/var(--_g),var(--s) 0/var(--_g),
    radial-gradient(50% 50%,var(--c2) 97%,#0000)
     calc(var(--s)/2) calc(var(--s)/2)/var(--s) var(--s),
    linear-gradient(90deg,var(--c1) 50%,var(--c2) 0) 
     0 0/calc(2*var(--s));
cursor: default; }
  	a:hover {
    	cursor: crosshair;
  	}
  	

body {
max-width: 45em;
margin-left: auto;
margin-right: auto;
padding: 3em;
background-color: #392667;
background: url("images/GravelTexture1920x1080.png") no-repeat center center fixed;
border: 4px solid #c0b942;
min-height: 90%;
}

nav {
  font-family: "Rubik Pixels", system-ui;
  font-weight: 400;
  font-style: normal;
 font-size: 1.5em;
  display: inline-block; 
  float: none;
  padding: 12px;
  border: inset 4px #c0b942;
}

/*Basic Text*/
p { color: 	#c0b942;
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
font-size: 1.5em;
left:0;
right:0;
}

small { color: 	#c0b942;
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
text-align: center;
}

h1, h2, h3 { color: 	#c0b942;
  font-family: "Mansalva", sans-serif;
  font-weight: 400;
  font-style: normal;
  
font-size: 1.5em;
text-align: center;
left:0;
right:0;
margin: 15;
padding: 25px 0;
letter-spacing: 10px;
word-spacing: 2px;
text-shadow: 1px 1px 2px green;

}

/*Basic Images*/

img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
border: inset #c0b942 4px;
}
 /*list properties */
 
 li {
     font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
   font-size: 1.5em;
 }

.links li {color: #FFFFFF;
font-size: 1.5em;
line-height: 150%;
margin-left: 35px;
margin-right: 35px;
padding: 1px;
}

/*very special text*/
.special {
color: white;
text-align:center;
letter-spacing: 10px;
word-spacing: 2px;
padding:5px;
}

/*Scrollbar text box*/
.textbox {
border-style: solid;
border-color: #c0b942;
background: url("./images/griddy.png");
border-width: 2px;
width: 300px;
height: 100px;
overflow-y: scroll; 
scrollbar-color: #c0b942;
}

#text {
  font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
width: auto;
top: 5%;
bottom: 100px;
height: 300px;
right: 0;
text-align: left;
padding: 25px;
overflow-y: scroll;
  
}
  
.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: #fff;    }
    49%{    color: #fff; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #fff;    }
    
    }
    
    li {
        font-family: "Averia Serif Libre", serif;
  font-weight: 400;
  font-style: normal;
  color: 	#c0b942;
      list-style: none;
      
    }
    
/*links*/

/* unvisited link */
a:link {
  color: #a88b8b;
text-decoration: none;
}

/* visited link */
a:visited {
  color: #378f5d;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #c0b942;
 text-shadow: 0 0 20px lime;
  cursor: crosshair;
}

/* selected link */
a:active {
  color: #378f5d;
  text-decoration: none;
}

/* Start of fonts */

.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;
}

.mansalva-regular {
  font-family: "Mansalva", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* End of fonts */