@media screen and (max-width:767px) {
      .body {
        -moz-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
      }
    }

    @font-face {
      font-family: MainFont;
      src: url(fonts/pixel_operator/PixelOperator.ttf) format('truetype');
      }

      @font-face {
      font-family: TitleFont;
      src: url(fonts/kiwisoda/KiwiSoda.ttf) format('truetype');
      }

      ::-webkit-scrollbar {
        width:10px;
        height:8px;
        background-color: white;
        border-left: 1px solid black;
      }

        ::-webkit-scrollbar-thumb {
          background-color: white;

          border: 1px solid black;
        }


a {
  color: black;
  text-decoration: none;
  cursor: url(/img/cursor_loader.png), auto;
}

body {
  background-color: white;
  background-attachment: fixed;
  color: black;

  margin: auto;
  line-height: 1;

  font-family: MainFont;
  overflow: auto;


  --contrastbg: #C4DBEE;
  --lightest: white;
  --light: #d0d0d0;
  --mid: #6a9fd4;
  --dark: #356A9F;
  --darkest: #1E4369;
  --contrastlight: #9f9fd4;
  --contrastdark: #5454a4;

  cursor: url(/img/cursor_loader.png), auto;
}

#loader {
  position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
  background-color: white;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-top: 30vh;

  transition: opacity  1s;
  pointer-events: none;

  cursor: url(/img/cursor_loader.png), auto;
}

  #loader img {
    display: block;
    margin: auto;
  }

.container {
  box-sizing: border-box;

  display: flex;

  width:90vw;
  margin: auto;
  margin-top: 50px;
}

.navbar {
  width: 200px;

  margin: auto;

  margin-right: 10px;
}
  .navbox {
    background-color: var(--lightest);
    border: solid 1px black;

    margin-bottom: 15px;

  }
    .navtitle {
      font-size: 1.5em;
      font-weight: bold;
      font-style: italic;

      margin-bottom: 5px;
      padding: 5px;

      color: var(--darkest);
      border: inset 3px var(--dark);
      background-color: var(--light);
      border-bottom: solid 2px var(--dark);
    }
    .navyear {
      border-top: solid 2px var(--light);

      margin-top: 5px;
      padding-left: 5px;
      padding-right: 5px;
      margin-bottom: 2px;
    }
    .navbutton {
      padding-left: 5px;
      padding-right: 5px;
      margin-bottom: 2px;
    }

    .backbutton {
      padding: 3px;
      width: fit-content;
    }
      .backbutton a {
        text-decoration: none;

        text-shadow: 2px 0 var(--lightest), -1px 0 var(--lightest), 0 2px var(--lightest), 0 -1px var(--lightest),
             1px 1px var(--lightest), -1px -1px var(--lightest), 1px -1px var(--lightest), -1px 1px var(--lightest);
      }

.content {
  width: 75%;
  height: 90vh;

  margin: auto;
}
  iframe {
    border: solid 1px black;
    background-color: var(--lightest);

    width: 100%;
    height: 100%;

    cursor: url(/img/cursor_loader.png), auto;

    background-image: url(/img/portfolioimg.jpg);
    background-position-x:right;
  }

.checklist {
  background-color: var(--mid);
  border: solid 1px var(--darkest);
  box-shadow: 1px 1px 1px var(--darkest);

  height:fit-content;

  position: absolute;
  right: 15%;
  top: 10%;
  padding: 5px;
}

/* -- telefon -- */
  @media screen and (max-width: 600px) {

    .container {
      display: block;
    }

    .navbar {
      width: 90%;
    }

    .content {
      margin: auto;
      width: 90vw;
      height: 65vh;
    }

    .backbutton {
      margin-top: -10px;
      margin-bottom: 15px;
    }
  }