/* FONTS */
/* YOU CAN IGNORE BULLET PROOF SYNTAX, ANNOYING */
@font-face {
	font-family: 'justice';
	src: url(/font/justice.woff) format('woff');
	}
@font-face {
  font-family: 'retroComputer';
  src: url(/font/retroComputer.woff2) format('woff2');
  src: url(/font/retroComputer.woff) format('woff');
  }

/* DEFAULT PAGE ELEMENTS */
body {
  /*background-color: black;*/
  /*background-image: url("/images/polygon.jpg");*/
  font-family: "Monospace", monospace;
  color: black;
  margin: 0;
  
  background-image:url('/images/polygon.jpg');
  
  background-color: black;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
}
img {
  border: 5px solid gray;
  background-color: gray;
  }
a {
  color:black;
}
h1 {
  font-family: inherit;
  font-size: 50px;
  padding: 0;
  text-shadow: 2px 3px pink;
  line-height: 1px;
}
h3 {
  color: orange;
  font-size: 16px;
  font-family: 'retroComputer';
}
button {
 background-color: red;
 border: 2px solid gray;
 width: 32vw;
 padding: 2px;
 margin: 5px;
 
 white-space: nowrap;
 
 font-family: 'justice';
 font-size: 2vw;
}
iframe {
  margin: 2vw;
  height: 440px;
  width: 60vw;
  outline: 1px, pink;
}

/* ABOUT ME PAGE ELEMENTS */
.aboutMe {
  background-image:url('/images/stars.gif');
  background-size: cover;
  background-size: 100vw 250%;
}

/* EMPLOYMENT PAGE ELEMENTS */
.employment {
  font-family: arial;
  color: black;
  
  background-image:url('/images/employmentBackground.jpg');
  background-size: 100% 180%;
  
  text-align: center;
}
.employment h3 {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
.employmentTextBox {
  /* Thanks to https://github.com/PetoKrisa for the background colors and radial gradient! It looks amazing! */
  background: rgb(230,245,255);
  background: radial-gradient(circle, rgba(230,245,255,0.4) 18%, rgba(197,229,252,0.3) 46%, rgba(197,229,252,0.3) 100%);
  text-align: center;
  width: 50vw;
  padding: 2vw;
  border: 0.25vw solid black;
  border-radius: 2vw;
  margin: auto;
  word-wrap: break-word;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
}
.topnavEmployment {
  /*background: rgb(85, 185, 255);*/
  background: rgb(230,245,255);
  background: radial-gradient(circle, rgba(230,245,255,0.4) 18%, rgba(197,229,252,0.3) 46%, rgba(197,229,252,0.3) 100%);
  font-size: 5vw;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 2vw;
}

/* MUSIC PAGE ELEMENTS */
/*.music {
  background-color: black;
  background-image: none;
  
  font-family: monospace, "Lucidia Console";
  color:white;
  margin: 0px;
  text-align: center;
}
.music a {
  color:white;
}
.music img {
  border: 4px solid gray;
  width: 25vw;
  height: 25vw;
}
.albumTalk h2 {
  font-family: serif;
  font-size: 3vw;
  letter-spacing: 4px;
  color: darkred;
  margin: 1px;
}
.albumTalk a {
  color: darkred;
}
.albumTalk h3 {
  font-family: monospace;
  font-family: "Times New Roman", serif;
  color: red;
}
.albumTalk p {
  font-family: monospace;
  color: black;
}
*/

/* NOT FOUND PAGE ELEMENTS*/
/* 404 ERROR PAGE */
.notFound {
  background-color: black;
  background-image: none;
  
  font-family: "Monospace", monospace;
  color: black;
  margin: 0;
}

/* CHANGE LOG ELEMENTS */
.changeLog {
  background-color: black;
  background-image: none;
  
  font-family: "monospace", monospace;
  color: white;
  margin: 0;
}
.changeLog a {
  color:white;
}

/* TOPNAV DEFAULT ELEMENT */
.topnav {
  text-align: center;
  text-transform: uppercase;
  font-family: 'justice';
  color: black;
  font-size: 4vw;
  background-color: deepPink;
  border: 20px solid deepPink;
}
.topnav a {
  color: black;
}

/* TOPNAV FOR CHANGE LOG */
.topnavChangeLog {
  text-align: center;
  text-transform: uppercase;
  font-family: 'justice';
  color: black;
  font-size: 4vw;
  background-color: orange;
  border: 2px solid yellow; 
}
.topnavChangeLog a {
  color: black;
}

/* TOPNAV FOR MUSIC */
.topnavMusic {
  text-align: center;
  text-transform: uppercase;
  font-family: 'justice';
  color: black;
  font-size: 4vw;
  background-color: gray;
  border: 20px solid gray;
}
.topnavMusic a {
  color:black;
}

/* GENERAL CSS FUNCTIONS */
.removeShadow {
  text-shadow: 0 0 black;
}
.black {
  color: black;
}
.orange {
  color: orange;
}
.white {
  color: white;
}
.rightText {
  text-align: right;
  }
  
/* HIDE DIV ELEMENT */
.hide {
  display: none;
  
  padding: 1vw;
  margin: 1vw;
  margin-left: 20vw;
  margin-right: 20vw;
  
  background-color: lightGray;
  border: Thick Solid Darkgray;
}

/* MUSIC HEADING */
.musicHeading {
  font-family: 'justice';
  text-shadow: none;
  color: gray;
  font-size: 3vw;
}

/* CENTER DIV CLASS */
.center {
  text-align: center;
  font-family: inherit;
  border: 10px solid deepPink;
  margin: 50px;
  width: auto;
  padding: 20px;
  background-color: hotPink;
}

/* DIV ELEMENT FOR LINKS */
.links {
  font-family: 'retroComputer';
  font-size: 2.5vw;
  background-color: hotpink;
  border: 5px solid deepPink;
  width: auto;
  margin: 5vw;
  margin-left: 15vw;
  margin-right: 15vw;
  text-align: center;
  white-space: pre;
}

/* COOL SHIT */
/*.text {
    animation: jerky 0.5s infinite;
    }

    @keyframes jerky {
      0% {
        transform: rotate(2deg);
      }

      50% {
        transform: rotate(2deg);
      }

      51% {
        transform: rotate(-2deg);
      }

      100% {
        transform: rotate(-2deg);
      }
    } */

.text {
  text-align: center;
  animation: tilt 3s infinite alternate;
}

@keyframes tilt {
  from { transform: rotate(3deg); }
  to { transform: rotate(-3deg); }
}