@font-face {
  font-family:"Milky Nice";
  src:url('assets/MilkyNice.ttf');
}

html {
  font-family:"Milky Nice";
  background-image:url("assets/bg.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  cursor:url("assets/microphone_pixel.png"), default;
}

body {
  color:#0a2254;
  text-align:center;
  font-family:"Milky Nice";
}

h1 {
  margin:15px;
  color:#1e90ff;
  font-size:2.8em;
  font-family:"Milky Nice";
  text-shadow:2px 0 #0a2254, -2px 0 #0a2254, 0 2px #0a2254, 0 -2px #0a2254, 1px 1px #0a2254, -1px -1px #0a2254, 1px -1px #0a2254, -1px 1px #0a2254;
}

p {
  width:60%;
  padding:10px 12px;
  border-radius:2px;
  border:2px solid #0a2254;
  background-color:#1e90ff;
}

.imgWrap {
  top:5px;
  left:-400px;
  position:fixed;
  transition:.5s ease;
  cursor:url("assets/microphone_pixel.png"), pointer;
}

.second {
  top:120px;
}

.third {
  top:240px;
}

.imgWrap:hover {
  left:-250px;
  transition:.3s ease;
  cursor:url("assets/microphone_pixel.png"), pointer;
}

.imgImage {
  width:550px;
}

.imgDescLayer {
  top:0;
  right:0;
  bottom:0;
  opacity:0;
  left:200px;
  display:flex;
  color:#1e90ff;
  font-size:32px;
  position:absolute;
  visibility:hidden;
  align-items:center;
  justify-content:center;
  transform:rotate(10deg);
  transition:opacity .2s, visibility .2s;
  text-shadow:2px 0 #0a2254, -2px 0 #0a2254, 0 2px #0a2254, 0 -2px #0a2254, 1px 1px #0a2254, -1px -1px #0a2254, 1px -1px #0a2254, -1px 1px #0a2254;
}

.imgWrap:hover .imgDescLayer {
  opacity:1;
  visibility:visible;
}

.imgDesc {
  font-family:"Milky Nice";
}

#back {
  transition:.5s ease;
}

#back:hover {
  left:-100px;
  transition:.3s ease;
}

#mobileNav {
  display:none;
}

.image {
  padding:0;
  height:300px;
  margin:5px 10px;
  background-color:#1e90ff;
  border:20px solid transparent;
  border-image:url("assets/frame.png") 40 stretch;
}

.link {
  transition:.2s;
  cursor:url("assets/microphone_pixel.png"), pointer;
}

.link:hover {
  transition:.2s;
  transform:rotate(2deg);
  cursor:url("assets/microphone_pixel.png"), pointer;
}

#s-m-t-tooltip{
  color:#1e90ff;
  font-size:15px;
  padding:6px 8px;
  background:#000000;
  border:1px solid #0a2254;
}

a:link, a:hover, a:active, a:visited {
  text-decoration:none;
  background-color:rgba(0, 0, 0, 0);
}

::-webkit-scrollbar {
  color:#0a2254;
}

::-webkit-scrollbar-track {
  background:url("assets/bg.png");
}

::-webkit-scrollbar-thumb {
  background:#0a2254;
}

::-webkit-resizer {
  background:#0a2254;
}

::selection {
  color:#1e90ff;
  background-color:#0a2254;
}

@media only screen and (max-width:800px) {
  h1 {
    margin:15px;
    font-size:2.2em;
    padding-top:35px;
  }
  
  p {
    width:90%;
  }
  
  #mobileNav {
    top:0;
    left:0;
    color:#0a2254;
    display:block;
    padding:8px 10px;
    position:absolute;
    background:#1e90ff;
    border-radius:0 0 5px 0;
    border-right:2px solid #0a2254;
    border-bottom:2px solid #0a2254;
  }
  
  #mobileNav a {
    color:#0a2254;
  }
  
  .image {
    margin:0;
    width:90%;
    height:auto;
  }
  
  .imgWrap {
    display:none;
  }
}