@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: Sansation;
  src: url(fonts/Sansation.ttf);
}
@font-face {
  font-family: MCB;
  src: url(fonts/MCBlox.ttf);
}
@font-face {
  font-family: MCReg;
  src: url(fonts/MCReg.otf);
}
@font-face {
  font-family: MCBold;
  src: url(fonts/MCBold.otf);
}
@font-face {
  font-family: MCTen;
  src: url(fonts/MCTen.ttf);
}
.navhome, .mcnav, .arknav, .discnav {
  text-decoration: none;
  font-family: 'PT Sans', 'Roboto';
}

html {
  font-size: 1.4rem;
  overflow-y: scroll;
  font-family: 'PT Sans';
  z-index: 1;
}

.headnav {
  display: flex;
  background-color: rgb(0, 0, 0);
  left: 0;
  font-size: clamp(15px, 2vw, 1rem);
  position: fixed;
  width: 100%;
  top: 0;
  justify-content: flex-start;
  text-decoration: none;
  font-family: Arial, Helvetica ;
  z-index: 20;
  padding: .5vh 0;
}

.navhome a {
  padding-left: 1vh;
  color: #9c46ff;
  min-width: fit-content;
  display: flex;
  text-decoration: none;
  padding-right: 1vh;
  background: #000000;
  flex-direction: row;
  border-right: 2px dashed #9c46ff;
}

.navbuttons {
  display: flex;
  flex: 1;
  align-items: baseline;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

    .mcnav, .arknav, .discnav {
    margin: 0 4rem;
    }

    .mcnav {
      color: #6dac43;
      font-family: 'MCTen';
    }

    .arknav{
      color: #daa037;
      font-family: 'Sansation';
      font-weight: 800;
    }

    .discnav {
     color: #7289DA;
     font-weight: 600;
    }



/**NOTES - 

Ark button on Nav bar is out of place Fixed! Thanks, Jamie!

Better buttons for nav bar?

Mouse over effect for links/navbar

Phone/mobile support. What have I done?