/* TODO
  ?
 */

/*   GENERAL   */
@font-face {
  font-family: HomeVideo;
  src: url(fonts/HomeVideoBold-R90Dv.ttf);
}
@font-face {
  font-family: Smallest;
  src: url(fonts/smallest_pixel-7.woff);
}
:root {

  --background: rgb(0, 1, 15);
  --spaceBlue: rgb(57, 74, 80);
  --spaceWhite: rgb(199, 207, 204);
  --spaceGrey: rgb(209, 213, 214);
  --spaceGreyFade: rgba(209, 213, 214, 0.747);
  --spacePurple: rgb(36, 21, 39);
  --spaceShadow: rgba(32, 46, 46, 0.128);
  --spaceOrange: rgb(218, 134, 62);
  --spaceRed: rgb(207, 87, 60);
}

.header {
  font-family: HomeVideo;
  font-size: 500%;
  letter-spacing: -1px;
  text-align: center;
  color: var(--spaceGrey);
  & h4 {
  margin: 5px;
  font-size: 30%;
  color:var(--spaceOrange);
  text-align: center;
  }
}
nav {
  text-align:center;
  padding-left: 0px;
  & ul {
    padding-left: 0px;
    & li {
      display: inline-block;
      scale: 65%;
      & .home {
        &::before {
        content: url(images/nav/HOME1.png);
        transition: opacity 0.3s ease-in-out;
        }
        &:hover::before {
        content: url(images/nav/HOME2.png);
        }
      }
      & .blog {
        &::before {
        content: url(images/nav/BLOG1.png);
        transition: opacity 0.3s ease-in-out;
        }
        &:hover::before {
        content: url(images/nav/BLOG2.png);
        }
      }
      & .inspo {
        &::before {
        content: url(images/nav/INSPO1.png);
        transition: opacity 0.3s ease-in-out;
        }
        &:hover::before {
        content: url(images/nav/INSPO2.png);
        }
      }
    }
  }
  
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: var(--background);
  background-image:url(images/halbmond.png);
  background-position-x: center;
  background-attachment: fixed;
  background-size: 105%;
  background-repeat: no-repeat;
}
main {
  margin-left: 20%;
  margin-right: 20%;
  background-color: var(--spaceGreyFade);
  border: 5px double var(--spacePurple);
  border-radius: 10px;
  padding: 2%;
}
footer{
  position: fixed;
  bottom: 0;
  margin-left: 15%;
  margin-right: 15%;
}

/*   BLOG   */
strong {
  font-family: HomeVideo;
  font-size: x-large;
}


/*   INSPO   */
.inspo {
  display: flex;
  border: 3px;
  & section {
    width: 200%;
    padding-left: 30px;
  }
  & h3 {
    font-family: HomeVideo;
    font-size: xx-large;
    margin: 0px;
  }
  & ul {
    padding-left: 20px;
  }
  & li {
    padding-left: 0px;
    padding-bottom: 2px;
    font-size: small;
  }
  & a {
    color: var(--spacePurple);
    & :hover {
      color: var(--spaceRed);
    }
  }
}
.inspoImg {
  width: 100%;
  min-width: 100px;
}