style.less

@sticky-yellow: #ffd93a;
@sticky-orange: #fbad4b;
@sticky-green: #e3e546;
@sticky-blue: #73cac4;
@sticky-red: #f2788f;
@sticky-purple: #a2509a;

@wall-color-base: #ebebeb;
@left-wall-color: lighten(@wall-color-base, 5%);
@ceiling-color: darken(@wall-color-base, 2%);
@main-wall-color: #cdbfab;

@border-radius: 3px;

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  font: normal x-small verdana,arial,helvetica,sans-serif;
  margin: 0;
  font-size: 16px;
  background: @left-wall-color;

  overflow: hidden;
}

* {
  box-sizing: border-box;
}

video,
img {
  max-width: 100%;
}

input,
textarea {
  border: 0;
  padding: 5px;
  width: 100%;
  margin: 5px 0;
  background: fade(white, 50%);
  border-radius: @border-radius;
  font-family: 'Caveat', cursive;
  font-size: inherit;

  &::placeholder {
    font: normal x-small verdana,arial,helvetica,sans-serif;
  }
}

textarea {
  resize: none;
}

button {
  margin: 0;
  padding: 5px;
  margin: 5px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

#erika-shreddy {
  position: fixed;
  right: 0;
  bottom: -7vh;
  z-index: 100;
  display: flex;
  align-items: flex-end;
}

#erika {
  width: 200px;
  z-index: 102;

  @media (min-width: 768px) {
    width: 350px;
  }
}

#shreddy {
  @width: 379px / 2;
  @height: 464px / 2;
  @top: @height / 2;
  @right: calc(@width / 3);

  position: relative;
  top: @top;
  right: 40px;
  width: @width/2;
  height: @height/2;
  z-index: 101;

  @media (min-width: 768px) {
    top: @top;
    right: @right;
    width: @width;
    height: @height;
  }

  &.jump {
    animation: jump 2s cubic-bezier(.22,.61,.36,1);
    transform-origin: center bottom;

    @keyframes jump {
      20% {
        top: 0;
        transform: rotate(5deg);
      }

      30% {
        top: 0;
        transform: rotate(-5deg);
      }

      40% {
        top: 0;
        transform: rotate(5deg);
      }

      70% {
        top: 0;
        transform: rotate(2deg);
      }

      80% {
        top: @top;
        transform: rotate(0);
      }
    }
  }
}

#new-sticky-form button[type="submit"] {
  background-color: grey;
  color: white;
  width: 100%;
  margin: 5px 0 0;

  &:hover {
    background-color: black;
  }
}

#viewport {
  height: 160%;
  width: 160%;
  background-color: white;
  margin: 0;
  padding: 0;
  overflow: hidden;
  perspective-origin: bottom right;
  transform-style: preserve-3d;
  perspective: 50vw;
  transform: translateX(-25%) translateY(-30%);
}

#room {
  height:100%;
  width:100%;
  margin:0;
  padding:0;
  transform-style:preserve-3d;
}

.wall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 70%;
  position: absolute;
  backface-visibility: inherit;
  transform-style:preserve-3d;
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
  transform: rotateY(-90deg) translateZ(0) translateX(50%) translateY(50%);
  background-image: url(assets/fog-foggy-forest-4827.jpg);
  background-size: 10vw 100%;
  background-color: white;
  
  .frame {
    width: 100%;
    height: 100%;
    box-sizing: border-box; 
    background: transparent;
    border-style: solid;

    &.outermost {
      border-width: 8px;
      border-color:  #917663;

      @media (min-width: 768px) {
        border-width: 16px;
      }
    }

    &.outer {
      border-width: 5px;
      border-color:  #453329;

      @media (min-width: 768px) {
        border-width: 10px;
      }
    }
  }
}

.top {
  background: @ceiling-color;
  transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(0) translateX(50%) translateY(50%);
}

.back {
  overflow: scroll;
  background: @main-wall-color;
  transform:  translateZ(0) translateX(25%) translateY(50%);
}

#wrapping-paper {
  @margin-y: 10px;
  @border-width: 10px;

  display: flex;
  flex-flow: row wrap;
  width: 75%;
  position: absolute;
  top: 0;
  right: 0;
  min-height: 100vh;
  background: url(assets/rice-paper-2.png) 200px 200px repeat #92786b;
  padding: 15px 15px 500px 15px;
  margin: @margin-y 0;
  border-style: solid;
  border-color: @main-wall-color;
  border-width: @border-width;

  @media (min-width: 768px) {
    margin: @margin-y*2 0;
    border-width: @border-width*2;
  }
}

#new-sticky-form {
  input[type="radio"] {
    width: auto;
  }

  .color-block {
    display: inline-block;

    label {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin: 0 5px;
      vertical-align: middle;
    }
  }
}

.color-block label[for="bg-color-yellow"] {
  background: @sticky-yellow;
}

.sticky-note.orange,
.color-block label[for="bg-color-orange"] {
  background: @sticky-orange;
}

.sticky-note.green,
.color-block label[for="bg-color-green"] {
  background: @sticky-green;
}

.sticky-note.blue,
.color-block label[for="bg-color-blue"] {
  background: @sticky-blue;
}

.sticky-note.red,
.color-block label[for="bg-color-red"] {
  background: @sticky-red;
}

.sticky-note.purple,
.color-block label[for="bg-color-purple"] {
  background: @sticky-purple;
}

.sticky-note {
  @side-padding: 15px;
  @side-margin: 15px;
  @base-width: 300px;
  // @max-height: 280px;
  @max-height: 100%;

  flex: auto;
  max-width: 100%;
  min-height: 150px;
  margin: @side-margin;
  font-family: 'Caveat', cursive;
  background: @sticky-yellow;
  display: inline-block;
  padding: @side-padding;
  box-shadow: 7px 7px 0px rgba(50, 50, 50, 0.3);
  font-size: 20px;
  animation: stickon 100ms cubic-bezier(.6,.04,.98,.34);

  @keyframes stickon {
    from {
      transform: scale(3);
    }

    to {
      transform: scale(1);
    }
  }

  @media (min-width: 768px) {
    max-width: 300px;
    max-height: @max-height;
  }

  &.has-media {
    @image-max-height: calc(@max-height - @side-padding*2);

    .img-container {
      position: relative;
      max-width: 100%;
      max-height: @image-max-height;
      margin-bottom: 5px;

      &:hover {
        .overlay {
          opacity: 1;
          cursor: pointer;
        }
      }
    }

    a {
      display: inline-block;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background: fade(black, 70%);
      color: white;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
    }

    @media (min-width: 768px) {
      max-width: @base-width * 2 - 200px;

      .img-container {
        float: left;
        display: inline-block;
        max-width: 50%;
        margin-right: 10px;
        margin-bottom: 0px;
      }

      img {
        border-radius: @border-radius;
        max-width: 100%;
        max-height: @image-max-height;
        transition: all .3s ease-in-out;
      }
    }
  }

  &:nth-child(even) {
    transform: rotate(-2deg);
    position: relative;
    top: -2px;
  }

  &:nth-child(3n) {
    transform: rotate(1deg);
    position: relative;
    top: 0;
  }

  &:nth-child(5n) {
    transform: rotate(2deg);
    position: relative;
    top: -1px;
  }

  &:nth-child(7n) {
    transform: rotate(-1deg);
    position: relative;
    top: -2px;
  }

  &:nth-child(10n) {
    transform: rotate(0deg);
    position: relative;
    top: 0px;
  }

  .content {
    &:after {
      content: " ";
      display: block;
      height: 0;
      clear: both;
    }
  }

  .submitter {
    float: right;
  }
}