@font-face {
  font-family: Audiowide;
  src: url('fonts/Audiowide-Regular.ttf'); 
}

@font-face {
  font-family: Lato;
  src: url('fonts/Lato-Regular.ttf'); 
}

@font-face {
  font-family: Play;
  src: url('fonts/Play-Regular.ttf'); 
}


body {
    background: url('bg.png'), var(--master-bg);
        color:var(--master-text);
        font-family: Play;
        font-size:18px;
		background-size: fill;
		background-attachment: fixed;
}

 h1, h2, h3 {
    color: var(--accent-text);
    font-family: Audiowide;
}

.holder {
    margin:auto;
    max-width:70%;
}
@media screen and (max-width: 800px) {
	.holder {
    max-width:90% !important;
}
	
}
a {
    color:  var(--link-main);
    background: var(--main-bg);

}

a:hover {
    background-color: var(--link-bg);
    outline: 1px solid var(--link-bg);
    color:  var(--main-bg);
}

.box {
    background: var(--main-bg);
    padding:10px;
    border-radius:20px;
    border: 8px double #565656;
 position: relative;
      background-size: 40px 40px;
  background-image:
    linear-gradient(to right, var(--subtle-bg) 1px, transparent 1px),
    linear-gradient(to bottom, var(--subtle-bg) 1px, transparent 1px);

}

button {
	background: black;
  color: #cecece;
  margin: 10px;
  border: 2px solid blue;
  padding: 3px;
  font-family: Play;
  border-radius: 5px;
}

button:hover {
	background: #020368;
}

.box-header {
    position: absolute;
    top: -3px;
    transform: translate(0, -50%);
   background: var(--main-bg);
}

.box-header h3, .box-header h2 {
    margin:2px;
}