body {
  background-color: hsl(240, 5%, 17%);;

  font-family: Arial Narrow, sans-serif;
  color: hsl(240, 5%, 17%);;

  padding: 0;
  margin: 0;

  min-width: 660px;
}
.rahmen {
  background-color: black;
  background-image: url("img/rahmen.png");
  background-size: contain;
  background-repeat:no-repeat;

  margin: 0 auto;
  padding: 30px;
  padding-bottom: 0;
  min-width: 500px;
  height: 1470px;
  width: 600px;

}
.rahmen-inlay {
  height: 1440px;
  width: 100%;
  overflow-y: scroll;
}
.wrapper {
  padding-bottom: 30px;
  padding-top: 30px;
  margin: 0 auto;
  width: 100%;
  min-height: 1470px;

  background-image: url("img/kork.png");
  background-repeat: repeat;
  background-size: 200px;
}

.header {
  background-color: #fff;
  background-image: url("img/paper_crumple.png");
  border-radius: 3px;

  width: 470px;
  height: 80px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;

  transform: rotate(0deg);

  & > .title {
    font-size: 35px;
    margin-bottom: 5px;
  }
  & > a {
    margin-left: 8px;
    &:hover {color: #333;}
  }

  & > .pin {
    position: absolute;
    top: 5px;
    width: 15px;
    height: 15px;

    border-radius: 7.5px;
    border: 1px solid gray;
    box-sizing: border-box;

    background-image: radial-gradient(yellow 50%, black 100%) !important; /* Fallback color */

    &.yellow {}
    &.red {background-image: radial-gradient(red 50%, black 100%) !important;}
    &.blue {background-image: radial-gradient(blue 50%, black 100%) !important;}
    &.green {background-image: radial-gradient(green 50%, black 100%) !important;}
  }
  & > .pin-l {left: 5px;}
  & > .pin-r {right: 5px;}
}



.polaroid {
  border: 2px solid lightgray;
  border-radius: 3px;
  background-color: #fff;

  width: 380px;
  height: 430px;
  margin: 50px auto;
  transform: rotate(0deg);

  &.hv:hover {
    /* border: 2px solid #333; */
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  & > .pin {
    position: absolute;
    left: 48.5%;
    top: 2px;
    width: 15px;
    height: 15px;

    border-radius: 7.5px;
    border: 1px solid gray;
    box-sizing: border-box;

    background-image: radial-gradient(yellow 50%, black 100%); /* Fallback color */

    &.yellow {}
    &.red {background-image: radial-gradient(red 50%, black 100%);}
    &.green {background-image: radial-gradient(green 50%, black 100%);}
    &.blue {background-image: radial-gradient(blue 50%, black 100%);}
    &.img {
      width: 80px;
      height: 80px;
      transform: translate(-40px, -40px);

      background-size: contain;
      background-color: transparent;
      border: none;
    }
  }

  & > .photo {
    width: 340px;
    height: 340px;
    margin: 20px auto;
    margin-bottom: 0px;

    background-color: black;

    & > img {
      max-width: 100%;
      max-height: 100%;
      margin: auto;
    }
  }

  & > .caption {
    width: 360px;
    height: 60px;
    margin: 5px auto;

    display: grid;
    grid-template-columns: 50px auto;

    & > .date,.text {
      padding: 5px;
    }
    & > .date {
      font-size: 30px;
      line-height: 50px;
    }
    & > .text {
      max-height: 60px;
      justify-self: center;
      align-self: center;
    }
  }
}



.content {
  background-color: #fff;
  background-image: url("img/paper_crumple.png");
  border-radius: 3px;

  width: 470px;
  margin: 0 auto;
  margin-top: 40px;

  padding: 10px;
  padding-bottom: 20px;

  transform: rotate(0deg);

  & > .text {
    padding: 10px;

    & > h4 {
      margin-bottom: 10px;
    }
  }
  & > .pin {
    position: absolute;

    width: 15px;
    height: 15px;

    border-radius: 7.5px;
    border: 1px solid gray;
    box-sizing: border-box;

    background-image: radial-gradient(yellow 50%, black 100%); /* Fallback color */

    &.yellow {}
    &.red {background-image: radial-gradient(red 50%, black 100%);}
    &.blue {background-image: radial-gradient(blue 50%, black 100%);}
    &.img {
      &.pin-l {transform: translate(-35px, -35px);}
      &.pin-r {transform: translate(35px, -35px);}
      &.pin-lb {transform: translate(-35px, 35px);}
      &.pin-rb {transform: translate(35px, 35px);}
      width: 80px;
      height: 80px;
      transform: translate(-40px, -40px);

      background-size: contain;
      background-color: transparent;
      border: none;
    }
  }
  & > .pin-l {left: 5px; top: 5px;}
  & > .pin-r {right: 5px; top: 5px;}
  & > .pin-lb {left: 5px; bottom: 5px;}
  & > .pin-rb {right: 5px; bottom: 5px;}
}

.img-kerze {background-image: url("img/sticker/Kerze.png") !important;}
.img-kugel {background-image: url("img/sticker/Kugel.png") !important;}
.img-schneeflocke {background-image: url("img/sticker/Schneeflocke.png") !important;}
.img-stern {background-image: url("img/sticker/Stern.png") !important;}
.img-tanne {background-image: url("img/sticker/Tanne.png") !important;}
.img-wimpel {background-image: url("img/sticker/Wimpel.png") !important;}