@font-face {
    font-family: "VCR Mono"; 
    src: url("fonts/mono/VCR_OSD_MONO_1.001 2.ttf") format("truetype");
    /* or: */
    src: url("fonts/mono/VCR_OSD_MONO_1.001.ttf") format("opentype");
} 

body {
  font-family: 'VCR Mono';
  background-image: url("images/site/background trash.jpg");
  background-size:contain;
  background-repeat:repeat;
}

header{
  background:black;  
}

nav{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px;
}

nav a{
  color:#f4d368;
  font-size: 18px;
  text-decoration:none;
  padding:8px;
  margin-left:4%;
  margin-right:4%;
}

.nav-btn{
  color:#f4d368;
  font-size: 18px;
  text-decoration:none;
  padding:8px;
  margin-left:4%;
  margin-right:4%;
  background:none;
  border:none;
  font-family: "VCR Mono";
}

nav a:hover{
  color:white;
}
 
.hide {
    border: 2px solid #46484d;
    background-color: #fffbeb;
    padding: 10px;
    overflow:auto;
    max-height: 500px;
    width:450px;
    scrollbar-color: #ffdf87 #fffaed;
    position:absolute;
}

h1{
  font-size:20px;
  margin:5px;
}

h2{
  font-size:45px;
  text-align:center;
  margin:5px;
}

.map-item:hover{
 filter:brightness(120%); 
}

.mat-item:hover{
 filter:brightness(110%); 
}

.mat-txt {
  top:35%;
  left:60%;
}

.nail-txt {
  top:37%;
  left:17%;
}

.polish-txt {
  top:72%;
  left:23%;
}

.dust-txt {
  top:80%;
  left:5%;
}

.efile-txt {
  top:90%;
  left:35%;
}

.ace-txt {
  top:60%;
  left:50%;
}

.builder-txt {
  top:59%;
  left:23%;
}

.cotton-txt {
  top:70%;
  left:50%;
}

.poly-txt {
  top:40%;
  left:22%;
}

.dot-txt {
  top:50%;
  left:45%;
}

.pallet-txt {
  top:105%;
  left:21%;
}

.brush-txt {
  top:70%;
  left:45%;
}

.implement-txt {
  top:100%;
  left:45%;
}

.lamp-txt {
  top:40%;
  left:55%;
}

.arm-txt {
  top:60%;
  left:5%;
}

.alc-txt {
  top:80%;
  left:50%;
}