$pink: #ff0091;
$regular: #fff;
$dark: #1f1f1f;

body, html {
   background-color: $dark;
   font-family: helvetica, sans-serif;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

@media (max-width: 800px) {
   .cont {
      display: block !important;
      width: 100%;

      .teacup {
         height: auto !important;

         img {
            margin-right: 20%;
            width: 40% !important;
            height: auto !important;
            padding-top: 1em;
            padding-bottom: 1em;
         }
      }

      .stuffarea {
         margin-left: 10%;
         padding-right: 0 !important;
         width: 80% !important;
         height: auto !important;

         ul.navbar {
            padding: 0 !important;
            padding-left: 0.5em !important;
         }
      }
   }
}

.cont {
   display: inline-flex;
   flex-direction: row;
   width: 100%;
   height: 100%;

   .teacup {
      flex: auto;
      height: 100%;
      text-align: center;
      display:flex;
      justify-content:center;
      align-items:center;
      background-color: $dark - #040404;

      img {
         width: 75%;
         max-height: 100%;
         height: auto;
      }

   }

   .stuffarea {
      width: 45%;
      height: 100%;
      padding-left: 5%;
      padding-right: 5%;
      margin-bottom: 10%;
      overflow-y: auto;

      .hiddenarea {
         visibility: hidden;
         height: 0;
         width: 0;
         overflow: hidden;
         margin: 0;
         padding: 0;
      }

      div {
         margin: 0;
         padding: 0;
         padding-bottom: 15%;
      }


      @for $i from 1 through 6 {
         h#{$i} {
            margin: 0;
            color: $pink;
         }
      }

      h2.blogtitle {
         padding: 0.5em;
         color: $pink;
         transition: 0.2s;
         margin: 0;
      }

      h2.blogtitle:hover {
         cursor: pointer;
         background-color: $dark - #060606;
         transition: 0.2s;
      }

      a {
         color: $pink;
      }

      .timestamp {
         color: $dark + #444;
         vertical-align: middle;
         font-size: 15px;
      }

      p {
         color: $regular;
      }

      li {
         color: $regular;
      }

      ul.navbar {

         padding-left: 1em;
         list-style: none;
         white-space: nowrap;
         padding-bottom: 1em;

         a:focus {
            outline: none;
            font-style: none;
            border: none;
         }

         li {
            display: inline-block;
            padding: 0.5em;
            background-color: $dark;
            margin: -3px;
            transition: 0.2s;
            color: $regular - #222;
            border-right: 2px solid $dark + #111;
            transform: skewX(-20deg);

            .button {
               transform: skewX(20deg);
            }
         }
         li:first-of-type {
            border-left: 2px solid $dark + #111;
         }
         li:hover {
            background-color: $dark + #111;
            transition: 0.2s;
            cursor: pointer;
         }

         li.active {
            background-color: $dark + #060606;
         }

         li.active:hover {
            background-color: $dark + #060606 + #111;
         }
      }

      iframe.itch-embedded {
         width: 100%;
      }
   }
}

noscript {
   color: $regular;
}