:root {
  --color-desktop-bg: #468BAD;
  --color-desktop-tab: #23DACE;
  --color-yellow: #FBEE0A;
  --color-blue-dark: #233BDA;
  --color-white: #ffffff;
  --color-black: #000;
  --color-grey: #DCDCDC;
  --color-grey-light: #e5e5e5;
  --color-grey-dropdown: #C0C0C0;
  --color-grey-charcoal: #495057;
  --color-pink-dark: #CD39CD;
  --color-pink-light: #D760D7;
  --border-bottom-header: var(--color-black) var(--border-bottom-size) solid;
  --border-bottom-size: 2.5px;
  --height-header: 3.6rem;
  --text-spacing: 0.2px;
  --text-line-height: 1.5;
  --font-size-xl: 2.1rem;
  --font-size-big: 1.9rem;
  --font-size-medium: 1.7rem;
  --font-size-small: 1.4rem;
  --font-family: 'Roboto', sans-serif;
  --font-family--pixel: "VT323", monospace;
  --padding-small: 0.8rem;
  --cursor-point: url("../images/cursor_pointer.png"), auto;
  --cursor-drag: url("../images/cursor_drag.png"), auto; }

/*
0 - 400px:      Phone small
400 - 500px: Phone medium
500 - 600px: Phone large
600 - 900px:    Tablet portrait 
900 - 1200px:   Tablet landscape
[1200 - 1800px] normal styles
1650px +    :   Normal desktop
1800px +    :   Big desktop
*/
/*
$breakpoint
- phone-s
- phone-m
- phone-l
- tab-port
- tab-land
- normal-desktop
- big-desktop

1em = 16px
*/
/*
and (orientation: portrait)

*/
@keyframes jump {
  0% {
    transform: translateY(0px); }
  50% {
    transform: translateY(-20px); }
  100% {
    transform: translateY(0px); } }

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg); }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg); }
  20% {
    transform: translate(-3px, 0px) rotate(1deg); }
  30% {
    transform: translate(3px, 2px) rotate(0deg); }
  40% {
    transform: translate(1px, -1px) rotate(1deg); }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg); }
  60% {
    transform: translate(-3px, 1px) rotate(0deg); }
  70% {
    transform: translate(3px, 1px) rotate(-1deg); }
  80% {
    transform: translate(-1px, -1px) rotate(1deg); }
  90% {
    transform: translate(1px, 2px) rotate(0deg); }
  100% {
    transform: translate(1px, -2px) rotate(-1deg); } }

@keyframes lightning {
  0%, 20% {
    filter: invert(0.8); }
  15%, 28%, 100% {
    filter: invert(0); } }

@keyframes firstDrop {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(22rem); } }

@keyframes secondDrop {
  0% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(7rem); } }

@keyframes strike {
  0%, 20% {
    opacity: 1; }
  15%, 28%, 100% {
    opacity: 0; } }

@keyframes shine {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.1); } }

@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

a {
  cursor: url("../images/cursor_pointer.png"), auto; }

html {
  font-size: 62.5%; }
  @media only screen and (max-width: 64em) {
    html {
      font-size: 56.2%; } }
  @media only screen and (max-width: 60.2em) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 60.2em) and (orientation: portrait) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 80.5em) and (max-height: 60.2em) and (orientation: landscape) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 52.2em) {
    html {
      font-size: 53%; } }
  @media only screen and (max-width: 52.2em) and (orientation: portrait) {
    html {
      font-size: 53%; } }
  @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
    html {
      font-size: 53%; } }
  @media only screen and (max-width: 45.5em) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 45.5em) and (orientation: portrait) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 80.5em) and (max-height: 45.5em) and (orientation: landscape) {
    html {
      font-size: 50%; } }
  @media only screen and (max-width: 38.5em) {
    html {
      font-size: 40%; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    html {
      font-size: 40%; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    html {
      font-size: 40%; } }
  @media only screen and (min-width: 112.5em) and (min-height: 67em) {
    html {
      font-size: 75%; } }

body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  cursor: url("../images/cursor.png"), auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../images/Group6.png"); }

.body-container {
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: var(--color-desktop-bg);
  position: fixed;
  overflow: hidden; }

.nowebp body {
  background-image: url("../images/Group6.png"); }

.webp body {
  background-image: url("../images/Group6.webp"); }

.no-js body {
  background-image: url("../images/Group6.png"); }

@media only screen and (max-width: 38.5em) {
  .webp body {
    background-image: none; } }

@media only screen and (max-width: 38.5em) and (orientation: portrait) {
  .webp body {
    background-image: none; } }

@media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
  .webp body {
    background-image: none; } }

#loader {
  height: 100vh;
  width: 100vw;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  #loader > *:not(:last-child) {
    margin-bottom: 4rem; }
  #loader img {
    width: 30rem;
    height: 30rem; }
  #loader h3 {
    font-family: "Courier New", Courier, monospace;
    color: white;
    text-transform: uppercase;
    font-size: 2.3rem; }
  #loader .myProgress {
    width: 20rem;
    background-color: grey; }
  #loader .myBar {
    width: 0%;
    height: 30px;
    background-color: #0000a8; }

.body-container {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  letter-spacing: var(--text-spacing); }
  @media only screen and (max-width: 38.5em) {
    .body-container {
      font-size: 2.3rem; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    .body-container {
      font-size: 2.3rem; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    .body-container {
      font-size: 2.3rem; } }
  @media only screen and (min-width: 112.5em) and (min-height: 67em) {
    .body-container {
      font-size: var(--font-size-big); } }

.highlight {
  background: linear-gradient(180deg, transparent 50%, yellow 50%); }

button[disabled] {
  filter: brightness(0.5); }

.btn {
  text-align: center;
  width: 20rem;
  height: 4rem;
  border: solid black;
  text-transform: capitalize;
  background-color: var(--color-desktop-tab);
  padding: 0.6rem;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit; }
  .btn, .btn:link, .btn:visited, .btn:active {
    text-decoration: none;
    color: inherit; }
  .btn:focus {
    outline: 2px solid yellow; }
  @media only screen and (max-width: 38.5em) {
    .btn {
      border: 1.8px solid black;
      font-size: var(--font-size-mobile-nav);
      width: 25vw;
      height: 6.5vw;
      display: flex;
      align-items: center;
      justify-content: center; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    .btn {
      border: 1.8px solid black;
      font-size: var(--font-size-mobile-nav);
      width: 25vw;
      height: 6.5vw;
      display: flex;
      align-items: center;
      justify-content: center; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    .btn {
      border: 1.8px solid black;
      font-size: var(--font-size-mobile-nav);
      width: 25vw;
      height: 6.5vw;
      display: flex;
      align-items: center;
      justify-content: center; } }

.resume__download-btn {
  min-width: 20rem; }

.mobile-nav-btn p {
  color: black; }

.main-pane {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../images/pane.svg);
  background-size: contain;
  background-repeat: no-repeat; }

.inner-pane {
  position: relative;
  width: 98%;
  height: 97%;
  border: solid black;
  background-color: var(--color-desktop-bg);
  overflow: hidden; }
  .inner-pane__header {
    position: relative;
    width: 100%;
    height: 4rem;
    border-bottom: solid black;
    background-color: var(--color-desktop-tab); }
    .inner-pane__header-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }

.close-btn {
  position: fixed;
  right: 5rem;
  top: 0.8rem;
  text-decoration: none;
  width: 2.8rem;
  height: 2.8rem;
  transition: all 0.3s;
  background-color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3rem;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 38.5em) {
    .close-btn {
      width: 3rem;
      height: 3rem; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    .close-btn {
      width: 3rem;
      height: 3rem; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    .close-btn {
      width: 3rem;
      height: 3rem; } }
  .close-btn:link, .close-btn:visited {
    color: white; }
  .close-btn:active {
    transform: scale(0.9); }

.drag {
  touch-action: none; }

.scrollbar {
  scrollbar-color: yellow transparent;
  scrollbar-width: auto;
  /* Track */
  /* Handle */
  /* Handle on hover */ }
  .scrollbar::-webkit-scrollbar {
    width: 2rem; }
  .scrollbar::-webkit-scrollbar-track {
    background: transparent; }
  .scrollbar::-webkit-scrollbar-thumb {
    background: var(--color-yellow);
    background-size: cover;
    border-radius: 10px; }
  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #CD39CD; }

.navigation {
  position: fixed;
  top: 0;
  width: 100%;
  height: 3.6rem;
  background-color: var(--color-yellow);
  display: flex;
  justify-content: space-between;
  z-index: 1000;
  box-shadow: 0 2px 0 #000; }
  @media only screen and (max-width: 38.5em) {
    .navigation {
      height: 4rem; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    .navigation {
      height: 4rem; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    .navigation {
      height: 4rem; } }
  @media only screen and (min-width: 112.5em) and (min-height: 67em) {
    .navigation {
      height: 4rem; } }
  .navigation__logo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 1rem; }
    .navigation__logo img {
      width: 2.6rem;
      height: 2.6rem;
      margin-right: 0.8rem; }
      @media only screen and (max-width: 38.5em) {
        .navigation__logo img {
          width: 3rem;
          height: 3rem;
          margin-right: 1.2rem; } }
      @media only screen and (max-width: 38.5em) and (orientation: portrait) {
        .navigation__logo img {
          width: 3rem;
          height: 3rem;
          margin-right: 1.2rem; } }
      @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
        .navigation__logo img {
          width: 3rem;
          height: 3rem;
          margin-right: 1.2rem; } }
  .navigation__left, .navigation__right {
    display: flex;
    justify-content: space-between;
    height: 100%; }
    .navigation__left .email, .navigation__right .email {
      -webkit-user-select: text; }
      @media only screen and (max-width: 52.2em) {
        .navigation__left .email, .navigation__right .email {
          display: none; } }
      @media only screen and (max-width: 52.2em) and (orientation: portrait) {
        .navigation__left .email, .navigation__right .email {
          display: none; } }
      @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
        .navigation__left .email, .navigation__right .email {
          display: none; } }
    .navigation__left > *:not(.email), .navigation__right > *:not(.email) {
      margin-right: 1rem; }
    .navigation__left:first-child, .navigation__right:first-child {
      margin-left: 1rem; }
  .navigation__right {
    align-items: center; }
    @media only screen and (max-width: 38.5em) {
      .navigation__right .time {
        display: none; } }
    @media only screen and (max-width: 38.5em) and (orientation: portrait) {
      .navigation__right .time {
        display: none; } }
    @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
      .navigation__right .time {
        display: none; } }
  .navigation__right > *, .navigation__dropdown-btn {
    padding: 0.6rem 1rem; }
  .navigation__dropdown-btn,
  .navigation__dropdown-content a {
    text-transform: capitalize; }
  .navigation__dropdown {
    overflow: hidden;
    position: relative;
    height: 100%; }
    @media only screen and (max-width: 38.5em) {
      .navigation__dropdown {
        display: none; } }
    @media only screen and (max-width: 38.5em) and (orientation: portrait) {
      .navigation__dropdown {
        display: none; } }
    @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
      .navigation__dropdown {
        display: none; } }
    .navigation__dropdown-btn {
      height: 100%;
      border: none;
      outline: none;
      font-size: inherit;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
      transition: all 0.5s;
      cursor: var(--cursor-point); }
    .navigation__dropdown-content {
      display: none;
      position: fixed;
      background-color: var(--color-grey-dropdown);
      outline: 2px solid;
      /* Links inside the dropdown */ }
      .navigation__dropdown-content a {
        float: none;
        color: black;
        padding: 0.6rem 0.8rem;
        text-decoration: none;
        display: block;
        text-align: left; }
        .navigation__dropdown-content a.quit {
          border-top: 2px solid black;
          text-transform: capitalize;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: space-between; }
          .navigation__dropdown-content a.quit span {
            font-size: 2.2rem; }
        .navigation__dropdown-content a:hover {
          background-color: var(--color-black);
          color: white; }
  .navigation__dropdown-hover:hover .navigation__dropdown-content {
    display: block; }
  .navigation__dropdown-hover:hover .navigation__dropdown-btn {
    background-color: black;
    color: white; }
  .navigation__checkbox {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    cursor: var(--cursor-point);
    opacity: 0 !important; }
    .navigation__checkbox:checked + .navigation__dropdown-content {
      display: block; }

.icons {
  display: flex;
  align-items: center; }
  .icons > *:not(:last-child) {
    margin-right: 0.5rem; }
    @media only screen and (max-width: 38.5em) {
      .icons > *:not(:last-child) {
        margin-right: 0.7rem; } }
    @media only screen and (max-width: 38.5em) and (orientation: portrait) {
      .icons > *:not(:last-child) {
        margin-right: 0.7rem; } }
    @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
      .icons > *:not(:last-child) {
        margin-right: 0.7rem; } }
  .icons i {
    display: block;
    height: 2.5rem;
    width: 2.5rem; }
    @media only screen and (max-width: 38.5em) {
      .icons i {
        height: 2.7rem;
        width: 2.7rem; } }
    @media only screen and (max-width: 38.5em) and (orientation: portrait) {
      .icons i {
        height: 2.7rem;
        width: 2.7rem; } }
    @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
      .icons i {
        height: 2.7rem;
        width: 2.7rem; } }
  .icons-twitter {
    content: url("../images/icons/icon--twitter.png"); }
  .icons-linkedin {
    content: url("../images/icons/icon--linkedin.png"); }
  .icons-github {
    content: url("../images/icons/icon--github.png"); }

@media only screen and (max-width: 52.2em) {
  #open-tabs {
    display: none; } }

@media only screen and (max-width: 52.2em) and (orientation: portrait) {
  #open-tabs {
    display: none; } }

@media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
  #open-tabs {
    display: none; } }

.desktop {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; }
  @media only screen and (max-width: 38.5em) {
    .desktop {
      display: none; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    .desktop {
      display: none; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    .desktop {
      display: none; } }
  .desktop__left .files {
    display: grid;
    height: 100vh;
    row-gap: 6vh;
    grid-row-gap: 6vh;
    grid-template-columns: minmax(2rem, 5rem) min-content 8rem min-content minmax(2rem, 1fr);
    grid-template-rows: minmax(3rem, 5rem) repeat(5, 0.5fr); }
    @supports not (grid-template-columns: minmax(2rem, 5rem) min-content 8rem min-content minmax(2rem, 1fr)) {
      .desktop__left .files {
        grid-template-columns: minmax(2rem, 5rem) -webkit-min-content 8rem -webkit-min-content minmax(2rem, 1fr); } }
    @media only screen and (min-width: 112.5em) and (min-height: 67em) {
      .desktop__left .files {
        row-gap: 6.4rem;
        grid-row-gap: 6.4rem; } }
  .desktop__right {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; }
    .desktop__right-bg {
      width: 40vw;
      height: 70vh;
      background-image: url("../images/desktop-illustration.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain; }
    @media only screen and (max-width: 64em) {
      .desktop__right {
        display: none; } }

.file {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: var(--cursor-point);
  transition: .3s all; }
  .file:hover .file-icon:before {
    opacity: 1; }
  .file:hover .file-icon:after {
    opacity: 1; }
  .file:hover .file-label {
    color: var(--color-yellow); }
  .file:link, .file:visited {
    font-size: inherit;
    color: inherit;
    text-decoration: none; }
  .file:active .file-icon {
    filter: drop-shadow(16px 16px 20px red) invert(75%); }
  .file-icon {
    position: relative;
    display: block;
    margin-bottom: .8rem;
    cursor: inherit;
    transition: .1s all; }
    .file-icon img {
      pointer-events: none;
      position: relative;
      z-index: -1;
      width: 8rem;
      height: 8rem; }
      @media only screen and (min-width: 112.5em) and (min-height: 67em) {
        .file-icon img {
          width: 9rem;
          height: 9rem; } }
    .file-icon::before, .file-icon::after {
      content: "";
      position: absolute;
      width: 3rem;
      height: 5rem;
      background-repeat: no-repeat;
      background-size: 3rem;
      transition: .3s all;
      opacity: 0; }
    .file-icon::after {
      left: -3rem;
      background-image: url("../images/spark--left.svg"); }
    .file-icon::before {
      right: -3rem;
      background-image: url("../images/spark--right.svg"); }
  .file-label {
    margin: 0 auto;
    cursor: inherit;
    transition: .3s all; }

.about-me {
  width: 70rem;
  height: 44.6rem;
  left: -18.8%;
  top: 8.8%; }
  .about-me.clicked {
    left: 10vw;
    top: 14vh; }
  .about-me__main-frame {
    position: absolute;
    width: 100%;
    height: 90.5%;
    background-image: url(../images/about-me--icon.png);
    background-repeat: no-repeat;
    background-size: 25rem;
    background-position: 2rem 2rem;
    overflow: hidden; }
  .about-me__content {
    position: absolute;
    width: 33rem;
    height: 90%;
    overflow-y: scroll;
    overflow-x: hidden;
    right: 2.9rem;
    padding: 3rem 1rem 0 0;
    line-height: var(--text-line-height); }
    @media only screen and (max-width: 38.5em) {
      .about-me__content {
        position: unset;
        padding: unset;
        right: unset;
        height: unset; } }
    @media only screen and (max-width: 38.5em) and (orientation: portrait) {
      .about-me__content {
        position: unset;
        padding: unset;
        right: unset;
        height: unset; } }
    @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
      .about-me__content {
        position: unset;
        padding: unset;
        right: unset;
        height: unset; } }
    .about-me__content a {
      color: var(--color-yellow); }
    .about-me__content::-webkit-scrollbar-thumb {
      background: var(--color-yellow); }
    .about-me__content p:not(:last-child) {
      margin-bottom: 1.2rem; }
    .about-me__content-header {
      margin-bottom: 1.5rem; }
      @media only screen and (max-width: 38.5em) {
        .about-me__content-header {
          margin: 3.5vh 0; } }
      @media only screen and (max-width: 38.5em) and (orientation: portrait) {
        .about-me__content-header {
          margin: 3.5vh 0; } }
      @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
        .about-me__content-header {
          margin: 3.5vh 0; } }

.nowebp .about-me__main-frame {
  background-image: url("../images/about-me--icon.png"); }

.webp .about-me__main-frame {
  background-image: url("../images/about-me--icon.webp"); }

.no-js .about-me__main-frame {
  background-image: url("../images/about-me--icon.png"); }

@media only screen and (max-width: 38.5em) {
  .webp .about-me__main-frame {
    background-image: none; } }

@media only screen and (max-width: 38.5em) and (orientation: portrait) {
  .webp .about-me__main-frame {
    background-image: none; } }

@media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
  .webp .about-me__main-frame {
    background-image: none; } }

.meme-generator {
  width: 93.4rem;
  height: 59.5rem;
  left: -26.5%;
  top: 22.7%; }
  @media only screen and (max-width: 52.2em) {
    .meme-generator {
      width: 87.4rem;
      height: 55.7rem; } }
  @media only screen and (max-width: 52.2em) and (orientation: portrait) {
    .meme-generator {
      width: 87.4rem;
      height: 55.7rem; } }
  @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
    .meme-generator {
      width: 87.4rem;
      height: 55.7rem; } }
  .meme-generator.clicked {
    left: 3vw;
    top: 7.4vh; }
    @media only screen and (max-width: 52.2em) {
      .meme-generator.clicked {
        left: 0.5rem;
        top: 20rem; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .meme-generator.clicked {
        left: 0.5rem;
        top: 20rem; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .meme-generator.clicked {
        left: 0.5rem;
        top: 20rem; } }
  .meme-generator__main-frame {
    height: 82.3%; }
    .meme-generator__main-frame-viewport {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      @media only screen and (max-width: 52.2em) {
        .meme-generator__main-frame-viewport {
          height: 98.4%; } }
      @media only screen and (max-width: 52.2em) and (orientation: portrait) {
        .meme-generator__main-frame-viewport {
          height: 98.4%; } }
      @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
        .meme-generator__main-frame-viewport {
          height: 98.4%; } }
    .meme-generator__main-frame-meme-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-grow: 1;
      height: 35rem; }
    .meme-generator__main-frame-header {
      width: 100%;
      height: 6rem;
      display: flex;
      align-items: center;
      justify-content: flex-start; }
      .meme-generator__main-frame-header > * {
        margin-left: 0.9rem; }
      .meme-generator__main-frame-header--uploadbtn {
        position: relative;
        overflow: hidden; }
        .meme-generator__main-frame-header--uploadbtn input[type="file"] {
          position: absolute;
          left: 0;
          top: 0;
          font-size: 5rem;
          opacity: 0; }
    .meme-generator__main-frame-meme-container {
      position: relative;
      z-index: 1; }
      .meme-generator__main-frame-meme-container:before {
        content: "";
        position: absolute;
        background-image: url("../images/repeat grid.svg");
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        left: -4rem;
        top: 1rem;
        z-index: -1; }
    .meme-generator__main-frame-gallery {
      overflow-x: scroll;
      min-width: 100%;
      min-height: 160px;
      padding: 0.8rem 0;
      display: flex; }
      @media only screen and (max-width: 64em) {
        .meme-generator__main-frame-gallery {
          min-height: 130px; } }
      @media only screen and (max-width: 52.2em) {
        .meme-generator__main-frame-gallery {
          min-height: 110px; } }
      @media only screen and (max-width: 52.2em) and (orientation: portrait) {
        .meme-generator__main-frame-gallery {
          min-height: 110px; } }
      @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
        .meme-generator__main-frame-gallery {
          min-height: 110px; } }

.thumb {
  min-width: 15rem;
  border: solid black;
  margin: 0.5rem;
  background-size: cover;
  background-repeat: no-repeat; }

.canvas {
  width: 300px;
  height: 300px; }
  @media only screen and (max-width: 64em) {
    .canvas {
      width: 270px;
      height: 270px; } }
  @media only screen and (max-width: 60.2em) {
    .canvas {
      width: 240px;
      height: 240px; } }
  @media only screen and (max-width: 60.2em) and (orientation: portrait) {
    .canvas {
      width: 240px;
      height: 240px; } }
  @media only screen and (max-width: 80.5em) and (max-height: 60.2em) and (orientation: landscape) {
    .canvas {
      width: 240px;
      height: 240px; } }
  @media only screen and (max-width: 52.2em) {
    .canvas {
      width: 230px;
      height: 230px; } }
  @media only screen and (max-width: 52.2em) and (orientation: portrait) {
    .canvas {
      width: 230px;
      height: 230px; } }
  @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
    .canvas {
      width: 230px;
      height: 230px; } }
  .canvas-text--top {
    top: 1rem;
    font-size: 2rem; }
  .canvas-text--bottom {
    bottom: 1rem;
    font-size: 1.6rem; }

.input-text {
  position: absolute;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  background-color: transparent;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 1px #000, 2px 2px 1px #000, 2px 2px 1px #000;
  border: solid yellow 2px;
  padding: 0.5rem; }
  .input-text:focus {
    outline: none; }

.thumb.active {
  border: yellow solid; }

.pane {
  z-index: 2;
  position: fixed;
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px) scale(0.1, 0.1);
  transform: translate3d(0px, 0px, 0px) scale(0.1, 0.1);
  opacity: 0;
  transition: all .1s linear;
  pointer-events: none; }
  .pane.clicked {
    pointer-events: unset;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    opacity: 1; }
  @media only screen and (max-width: 38.5em) {
    .pane {
      display: none; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    .pane {
      display: none; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    .pane {
      display: none; } }

.draggable {
  touch-action: none;
  user-select: none; }

.settings {
  width: 37.6rem;
  height: 49.2rem;
  top: 45.3%;
  left: -5.3%; }
  .settings.clicked {
    left: 30vw;
    top: 20vh; }
  .settings__main-pane {
    background-image: url("../images/border-pane-settings.svg");
    background-size: 211.2% 228.3%; }
  .settings__inner-pane {
    width: 95.2%;
    height: 96.8%;
    display: flex;
    flex-direction: column; }
  .settings__main-frame {
    flex: 1;
    /*SAFARI 10.1*/
    height: 90%; }
  .settings__container {
    height: 100%;
    display: flex;
    flex-direction: column; }
    .settings__container > * {
      flex: 1;
      text-align: center;
      padding: 1.4rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around; }
  .settings__background-colors {
    display: flex;
    justify-content: center; }
    .settings__background-colors > * {
      width: 3.6rem;
      height: 3.6rem;
      border-radius: 50%;
      border: black solid 2px;
      cursor: var(--cursor-point);
      transition: transform .2s; }
      .settings__background-colors > *:hover {
        transform: scale(1.1); }
    .settings__background-colors > *:not(:last-child) {
      margin-right: 10px; }
    .settings__background-colors--pink {
      background-color: #ff99c9; }
    .settings__background-colors--lightblue {
      background-color: #bfd7ea; }
    .settings__background-colors--green {
      background-color: #96e072; }
    .settings__background-colors--mint {
      background-color: #44bba4; }
    .settings__background-colors--blue {
      background-color: var(--color-desktop-bg); }
  .settings__fullscreen {
    /*the box around the slider*/ }
    .settings__fullscreen-switch {
      position: relative;
      display: inline-block;
      width: 6rem;
      height: 3.5rem;
      /* Hide default HTML checkbox */
      /*The slider*/ }
      .settings__fullscreen-switch input {
        opacity: 0;
        width: 0;
        height: 0; }
        .settings__fullscreen-switch input:checked + .slider {
          background-color: var(--color-yellow); }
        .settings__fullscreen-switch input:focus + .slider {
          box-shadow: 0 0 1px #2196f3; }
        .settings__fullscreen-switch input:checked + .slider:before {
          -webkit-transform: translateX(2.6rem);
          -ms-transform: translateX(2.6rem);
          transform: translateX(2.6rem); }
      .settings__fullscreen-switch span {
        position: absolute;
        cursor: var(--cursor-point);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-grey);
        -webkit-transition: 0.4s;
        transition: 0.4s;
        border-radius: 3.4rem;
        border: solid 2px black; }
        .settings__fullscreen-switch span:before {
          position: absolute;
          content: "";
          height: 2.6rem;
          width: 2.6rem;
          left: .2rem;
          bottom: .2rem;
          background-color: black;
          -webkit-transition: 0.4s;
          transition: 0.4s;
          border-radius: 50%; }
  .settings__resize {
    /* Width of the outside container */ }
    .settings__resize-slidecontainer {
      width: 12rem;
      margin: 0 auto; }
      .settings__resize-slidecontainer input {
        -webkit-appearance: none;
        /* Override default CSS styles */
        appearance: none;
        width: 100%;
        /* Full-width */
        height: 3.5rem;
        /* Specified height */
        border-radius: 3.4rem;
        background: var(--color-grey);
        /* Grey background */
        border: solid 2px black;
        outline: none;
        /* Remove outline */
        -webkit-transition: 0.2s;
        /* 0.2 seconds transition on hover */
        transition: opacity 0.2s;
        cursor: inherit; }
        .settings__resize-slidecontainer input::-webkit-slider-thumb {
          -webkit-appearance: none;
          appearance: none;
          width: 2.6rem;
          height: 2.6rem;
          border-radius: 50%;
          background: black;
          cursor: var(--cursor-point); }
        .settings__resize-slidecontainer input::-moz-range-thumb {
          width: 2.6rem;
          height: 2.6rem;
          border-radius: 50%;
          background: black;
          cursor: pointer; }
  .settings__effects-select select {
    height: 3.5rem;
    background-color: var(--color-grey);
    border: 2px solid black;
    font-family: inherit;
    font-size: inherit;
    text-transform: capitalize;
    cursor: var(--cursor-point); }
    .settings__effects-select select:focus {
      outline: none; }

.drummer {
  width: 45.1rem;
  height: 59rem;
  top: -15.3%;
  left: 5.8%; }
  .drummer.clicked {
    left: 10vw;
    top: 8vh; }
  .drummer:focus {
    outline: none; }
  .drummer__main-pane {
    background-image: url(../images/border-pane-settings.svg);
    background-size: 95.2rem 134.6rem; }
  .drummer__inner-pane {
    width: 95%;
    height: 96.6%;
    display: flex;
    flex-direction: column; }
  .drummer__main-frame {
    padding: 3rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
  .drummer__canvas-box {
    flex: 0 0 auto;
    width: 35rem;
    height: 10rem;
    align-self: center;
    position: relative;
    overflow: hidden; }
    .drummer__canvas-box > * {
      position: absolute;
      width: 100%;
      height: 100%; }
    .drummer__canvas-box .playback-screen {
      top: 0;
      left: 0; }
      .drummer__canvas-box .playback-screen > * {
        position: absolute;
        top: 0; }
      .drummer__canvas-box .playback-screen .progress-bar {
        height: 100%;
        width: 0.6rem;
        background-color: #fef6ab;
        z-index: 2; }
      .drummer__canvas-box .playback-screen canvas {
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%; }
    .drummer__canvas-box .hello-safari {
      background-color: blue; }
      .drummer__canvas-box .hello-safari span {
        font-size: 2.3rem;
        text-shadow: 2px 2px red; }
      .drummer__canvas-box .hello-safari-highlight {
        color: black;
        font-weight: bold; }
    .drummer__canvas-box .hello,
    .drummer__canvas-box .recording,
    .drummer__canvas-box .recorded {
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center; }
      .drummer__canvas-box .hello span,
      .drummer__canvas-box .recording span,
      .drummer__canvas-box .recorded span {
        font-size: 4.5rem;
        text-shadow: 3px 3px red; }
    .drummer__canvas-box > * span {
      font-family: var(--font-family--pixel);
      text-transform: capitalize;
      color: var(--color-yellow); }
  .drummer__keys {
    flex: 0 0 25rem;
    padding: 0 1rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; }
    .drummer__keys .key.playing {
      filter: brightness(0.5);
      -webkit-filter: brightness(0.5); }
    .drummer__keys .key {
      border: solid black 2px;
      width: 7rem;
      height: 7rem;
      border-radius: 1.5rem;
      text-align: center;
      margin: 0 auto;
      cursor: var(--cursor-point); }
      .drummer__keys .key:nth-child(1), .drummer__keys .key:nth-child(6) {
        background-color: #c3e8f8; }
      .drummer__keys .key:nth-child(2), .drummer__keys .key:nth-child(9) {
        background-color: #fedaca; }
      .drummer__keys .key:nth-child(3), .drummer__keys .key:nth-child(9) {
        background-color: #fef6ab; }
      .drummer__keys .key:nth-child(4), .drummer__keys .key:nth-child(7) {
        background-color: #f8b2bd; }
      .drummer__keys .key:nth-child(5), .drummer__keys .key:nth-child(8) {
        background-color: #c6e3c4; }
      .drummer__keys .key kbd {
        font-family: "Shadows Into Light Two", cursive;
        font-size: 2.2rem;
        display: block;
        padding: 0.5rem; }
      .drummer__keys .key span {
        text-transform: uppercase;
        font-size: 1.3rem; }
  .drummer__buttons {
    flex: 0 0 3rem;
    display: flex;
    justify-content: center;
    /*& button.disable {
      filter: brightness(0.5);
    }*/ }
    .drummer__buttons button {
      border: solid 2px black;
      width: 3rem;
      height: 3rem;
      background-color: var(--color-desktop-tab); }
      .drummer__buttons button:active, .drummer__buttons button:focus {
        outline: none;
        border: solid 2px var(--color-yellow); }
      .drummer__buttons button img {
        width: 1.2rem;
        height: 1.2rem;
        /*SAFARI 10.1 */
        display: inline-block;
        top: 50%;
        transform: translateY(10%); }
      .drummer__buttons button:not(:last-child) {
        margin-right: 1rem; }

.weather {
  width: 85rem;
  height: 54.08rem;
  top: 4%;
  left: -10%; }
  .weather.clicked {
    left: 18vw;
    top: 10vh; }
    @media only screen and (max-width: 52.2em) {
      .weather.clicked {
        left: 3rem; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .weather.clicked {
        left: 3rem; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .weather.clicked {
        left: 3rem; } }
  .weather__main-frame {
    width: 100%;
    height: 92.2%;
    position: relative; }
  .weather__background {
    width: 100%;
    height: 100%;
    background: url("../images/weather/weather-background.png") repeat-x;
    background-size: cover;
    background-position: center;
    z-index: 100; }
  .weather__wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    /*SAFARI 10.1*/
    justify-content: space-between; }
    .weather__wrapper:before, .weather__wrapper:after {
      content: '';
      display: block; }
  .weather__card {
    position: relative;
    width: 27rem;
    height: 33rem;
    outline: 0.4rem solid #06064d; }
    .weather__card.bg-day {
      background: url("../images/weather/weather-card--day.png");
      background-size: cover;
      background-repeat: no-repeat; }
    .weather__card.bg-night {
      background: url("../images/weather/weather-card--night.png");
      background-size: cover;
      background-repeat: no-repeat; }
    .weather__card.animate-thunder {
      animation: lightning 5s infinite 1s ease-out; }
    .weather__card > * {
      position: absolute; }
    .weather__card-character {
      background-image: url(../images/weather/character.png);
      background-size: contain;
      width: 7.8rem;
      height: 8.3rem;
      background-repeat: no-repeat;
      right: 0.6rem;
      bottom: 4rem;
      transform: translateY(0px);
      transition: 0.1s all; }
      .weather__card-character.jump {
        transform: translateY(-2.8rem); }
    .weather__card-sky {
      position: absolute;
      width: 10.9rem;
      height: 10.9rem;
      right: 1rem;
      top: 0.4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .weather__card-sky .sun {
        position: absolute;
        width: 7.3rem;
        height: 7.3rem;
        top: 0.4rem;
        right: 0.9rem;
        animation: shine 2s infinite alternate; }
      .weather__card-sky .moon {
        height: 4.5rem; }
      .weather__card-sky .star {
        position: absolute;
        animation: shine 1s infinite alternate ease-in-out; }
        .weather__card-sky .star--one {
          left: -0.2rem;
          top: 2.9rem;
          height: 2rem; }
        .weather__card-sky .star--two {
          left: 1.9rem;
          top: 0.4rem;
          height: 2.6rem; }
      .weather__card-sky .fog {
        position: relative;
        width: 28.1rem;
        height: 10rem; }
        .weather__card-sky .fog-up {
          transform: translate(-7.2rem, 3.6rem); }
        .weather__card-sky .fog-down {
          transform: translate(-7.3rem, 11rem);
          z-index: 1; }
      .weather__card-sky .thunder {
        position: absolute;
        top: 6.1rem;
        height: 4rem;
        animation: strike 5s infinite 1s ease-out; }
      .weather__card-sky .cloud {
        position: absolute;
        top: 1.7rem;
        height: 4.5rem;
        z-index: 2; }
      .weather__card-sky .sun-behind-cloud,
      .weather__card-sky .moon-behind-cloud {
        position: absolute;
        height: 5.1rem;
        left: 0.2rem;
        top: 0.2rem;
        z-index: 1; }
      .weather__card-sky .dark-cloud {
        position: absolute;
        height: 4rem;
        left: -0.5rem;
        top: 1.5rem;
        z-index: 1; }
      .weather__card-sky .sun-behind-cloud {
        animation: shine 1s infinite alternate ease-in-out; }
      .weather__card-sky .flakes .flake {
        height: 3rem; }
        .weather__card-sky .flakes .flake:not(:last-child) {
          margin-right: 1rem; }
        .weather__card-sky .flakes .flake:nth-child(1) {
          transform: translateY(1.4rem);
          animation: firstDrop 3s infinite ease-out; }
        .weather__card-sky .flakes .flake:nth-child(2) {
          transform: translateY(0);
          animation: secondDrop 2s infinite ease-out; }
        .weather__card-sky .flakes .flake:nth-child(3) {
          transform: translateY(2.5rem);
          animation: firstDrop 4s infinite ease-out; }
      .weather__card-sky .drops {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center; }
        .weather__card-sky .drops .drop {
          height: 3rem; }
          .weather__card-sky .drops .drop:not(:last-child) {
            margin-right: -2.2rem; }
          .weather__card-sky .drops .drop:nth-child(1) {
            transform: translateY(1.4rem);
            animation: firstDrop 1.5s infinite ease-out; }
          .weather__card-sky .drops .drop:nth-child(2) {
            transform: translateY(0);
            animation: secondDrop 1s infinite ease-out; }
          .weather__card-sky .drops .drop:nth-child(3) {
            transform: translateY(2.5rem);
            animation: firstDrop 2.1s infinite ease-out; }
    .weather__card-brick {
      background-image: url("../images/weather/celcius.png");
      background-size: cover;
      width: 4rem;
      height: 4rem;
      right: 3.7rem;
      bottom: 14.5rem;
      cursor: var(--cursor-point);
      border: yellow 0.3rem solid;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem; }
      .weather__card-brick .temp-unit {
        font-family: var(--font-family--pixel);
        color: white; }
      .weather__card-brick.shake {
        animation: shake 0.2s linear 0.1s; }
    .weather__card-search-result {
      max-height: 15rem;
      max-width: 14.5rem;
      margin: 1.5rem 0 0 1.5rem;
      font-family: var(--font-family--pixel);
      text-transform: capitalize; }
      .weather__card-search-result.white {
        color: white; }
      .weather__card-search-result.black {
        color: black; }
      .weather__card-search-result .city {
        font-size: 2.8rem; }
      .weather__card-search-result .temperature {
        font-size: 5rem;
        text-transform: uppercase; }
  .weather__form {
    width: 30rem;
    height: 25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; }
    .weather__form label,
    .weather__form button,
    .weather__form .error {
      text-transform: uppercase;
      font-family: var(--font-family--pixel);
      cursor: var(--cursor-point); }
    .weather__form .error {
      position: absolute;
      top: 63%;
      font-size: 2.5rem;
      font-weight: 400;
      color: red;
      background-color: yellow;
      padding: 0.5rem; }
    .weather__form label {
      color: var(--color-yellow);
      font-size: 4rem; }
    .weather__form input {
      padding: 1.5rem;
      align-self: stretch;
      border: 2px solid #c0c0c0;
      border-radius: 1rem;
      text-align: center;
      font-family: var(--font-family);
      background-color: rgba(255, 255, 255, 0.5);
      caret-color: var(--color-yellow);
      text-transform: capitalize; }
      .weather__form input, .weather__form input::placeholder {
        font-size: 1.8rem; }
      .weather__form input:focus {
        outline-color: yellow; }
      .weather__form input::placeholder {
        text-align: center; }
      .weather__form input.redBorder {
        border: 2px red solid; }
    .weather__form button {
      position: relative;
      z-index: 99;
      padding: 1.2rem 3rem;
      border-radius: 5rem;
      font-size: 2rem;
      background-color: var(--color-yellow);
      transition: 0.2s all;
      border: 1px solid #06064d; }
      .weather__form button, .weather__form button:active, .weather__form button:visited {
        outline: none; }
      .weather__form button:hover {
        transform: scale(1.1); }
      .weather__form button:active {
        transform: scale(1); }

.suggested-places-container {
  position: absolute;
  top: 16rem;
  width: 100%; }
  .suggested-places-container ul {
    list-style: none; }
  .suggested-places-container li {
    position: relative;
    z-index: 200;
    padding: 0.7rem;
    margin-bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: var(--cursor-point);
    text-transform: capitalize; }
    .suggested-places-container li:focus {
      outline: 0.5rem var(--color-desktop-tab) solid; }
    .suggested-places-container li:nth-child(odd) {
      transform: skewX(20deg);
      background-color: var(--color-yellow); }
      .suggested-places-container li:nth-child(odd) span {
        transform: skewX(-20deg); }
    .suggested-places-container li:nth-child(even) {
      transform: skewX(-20deg);
      background-color: #fff; }
      .suggested-places-container li:nth-child(even) span {
        transform: skewX(20deg); }
    .suggested-places-container li span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      max-width: 100ch; }

.skills {
  width: 94.1rem;
  height: 59.8rem;
  top: -36%;
  left: -16%; }
  @media only screen and (max-width: 52.2em) {
    .skills {
      width: 87rem;
      height: 55.3rem; } }
  @media only screen and (max-width: 52.2em) and (orientation: portrait) {
    .skills {
      width: 87rem;
      height: 55.3rem; } }
  @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
    .skills {
      width: 87rem;
      height: 55.3rem; } }
  .skills.clicked {
    left: 2vw;
    top: 10vh; }
    @media only screen and (max-width: 52.2em) {
      .skills.clicked {
        left: 1rem;
        top: 15rem; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .skills.clicked {
        left: 1rem;
        top: 15rem; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .skills.clicked {
        left: 1rem;
        top: 15rem; } }
  .skills__main-frame {
    height: 100%;
    background-color: var(--color-yellow);
    padding: 0 5.3rem; }
    .skills__main-frame-header {
      height: 8rem;
      display: flex;
      align-items: center; }
    .skills__main-frame-content {
      height: 75.5%;
      overflow-y: scroll;
      overflow-x: hidden;
      scrollbar-color: #cd39cd transparent; }
      .skills__main-frame-content::-webkit-scrollbar-thumb {
        background: #cd39cd; }
  .skills__image {
    width: 70rem;
    height: auto;
    display: block;
    border: 2px black solid; }
    @media only screen and (max-width: 52.2em) {
      .skills__image {
        width: 70rem; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .skills__image {
        width: 70rem; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .skills__image {
        width: 70rem; } }

.my-works {
  width: 96.5rem;
  height: 61.4rem;
  top: -36%;
  left: -16%; }
  @media only screen and (max-width: 52.2em) {
    .my-works {
      width: 86.5rem;
      height: 55rem; } }
  @media only screen and (max-width: 52.2em) and (orientation: portrait) {
    .my-works {
      width: 86.5rem;
      height: 55rem; } }
  @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
    .my-works {
      width: 86.5rem;
      height: 55rem; } }
  .my-works.clicked {
    left: 10vw;
    top: 10vh; }
    @media only screen and (max-width: 52.2em) {
      .my-works.clicked {
        left: 2rem;
        top: 18rem; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .my-works.clicked {
        left: 2rem;
        top: 18rem; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .my-works.clicked {
        left: 2rem;
        top: 18rem; } }
  .my-works__main-frame {
    height: 93.4%; }
  .my-works__content {
    height: 100%;
    padding: 3rem 5rem 3rem 4rem;
    display: flex;
    flex-direction: column;
    line-height: var(--text-line-height); }
    @media only screen and (max-width: 52.2em) {
      .my-works__content {
        padding: 1rem 5rem 3rem 3rem; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .my-works__content {
        padding: 1rem 5rem 3rem 3rem; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .my-works__content {
        padding: 1rem 5rem 3rem 3rem; } }
    .my-works__content-top {
      flex-basis: 85%;
      display: flex;
      justify-content: space-between; }
    .my-works__content-bottom {
      flex-basis: 15%;
      display: flex;
      justify-content: center;
      align-items: flex-end; }
      .my-works__content-bottom > *:not(:last-child) {
        margin-right: 2rem; }
  .my-works__computer {
    position: relative;
    flex-basis: 50%; }
    .my-works__computer:before {
      content: "";
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 2;
      position: absolute;
      background-image: url("../images/computer.png");
      background-size: contain;
      background-repeat: no-repeat;
      margin: 0 auto; }
      @media only screen and (max-width: 52.2em) {
        .my-works__computer:before {
          height: 94.4%;
          width: 100%;
          top: 1.4rem; } }
      @media only screen and (max-width: 52.2em) and (orientation: portrait) {
        .my-works__computer:before {
          height: 94.4%;
          width: 100%;
          top: 1.4rem; } }
      @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
        .my-works__computer:before {
          height: 94.4%;
          width: 100%;
          top: 1.4rem; } }
    .my-works__computer video {
      position: absolute;
      top: 6.1rem;
      left: -1.9rem; }
      @media only screen and (max-width: 52.2em) {
        .my-works__computer video {
          top: 6.6rem; } }
      @media only screen and (max-width: 52.2em) and (orientation: portrait) {
        .my-works__computer video {
          top: 6.6rem; } }
      @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
        .my-works__computer video {
          top: 6.6rem; } }
  .my-works__project-info {
    flex-basis: 50%;
    margin-left: 1.5rem; }

.nowebp .my-works__computer:before {
  background-image: url("../images/computer.png"); }

.webp .my-works__computer:before {
  background-image: url("../images/computer.webp"); }

.no-js .my-works__computer:before {
  background-image: url("../images/computer.png"); }

.project {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 2.6rem;
  line-height: var(--text-line-height); }
  .project > *:not(:last-child) {
    margin-bottom: 3rem; }
    @media only screen and (max-width: 52.2em) {
      .project > *:not(:last-child) {
        margin-bottom: 2.3rem; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .project > *:not(:last-child) {
        margin-bottom: 2.3rem; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .project > *:not(:last-child) {
        margin-bottom: 2.3rem; } }
  .project-title h2 {
    text-transform: capitalize;
    display: inline-block; }
  .project-stack {
    max-width: 21.1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start; }
    @media only screen and (max-width: 38.5em) {
      .project-stack {
        max-width: 100%;
        justify-content: unset; } }
    @media only screen and (max-width: 38.5em) and (orientation: portrait) {
      .project-stack {
        max-width: 100%;
        justify-content: unset; } }
    @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
      .project-stack {
        max-width: 100%;
        justify-content: unset; } }
    .project-stack > * {
      text-align: center;
      min-width: 10rem;
      padding: .5rem;
      border: solid 1px black;
      border-radius: 2.4rem;
      background-color: #DCDCDC;
      margin-top: 1rem; }
      @media only screen and (max-width: 38.5em) {
        .project-stack > * {
          margin-right: 2vw; } }
      @media only screen and (max-width: 38.5em) and (orientation: portrait) {
        .project-stack > * {
          margin-right: 2vw; } }
      @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
        .project-stack > * {
          margin-right: 2vw; } }
  .project-link a {
    color: black; }
    .project-link a:first-child {
      margin-right: 2rem; }
      .project-link a:first-child:hover {
        color: var(--color-yellow); }

.properties {
  width: 79.4rem;
  height: 50.6rem;
  top: -36%;
  left: -16%; }
  .properties.clicked {
    left: 27rem;
    top: 13vh; }
    @media only screen and (max-width: 52.2em) {
      .properties.clicked {
        left: 3rem;
        top: 14vh; } }
    @media only screen and (max-width: 52.2em) and (orientation: portrait) {
      .properties.clicked {
        left: 3rem;
        top: 14vh; } }
    @media only screen and (max-width: 80.5em) and (max-height: 52.2em) and (orientation: landscape) {
      .properties.clicked {
        left: 3rem;
        top: 14vh; } }
  .properties__tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6rem; }
    .properties__tabs .btn {
      width: 17rem;
      cursor: var(--cursor-point); }
      .properties__tabs .btn.clicked {
        outline: 2px solid yellow; }
  .properties__content .text {
    color: white; }
    .properties__content .text p {
      margin-bottom: 1.2rem;
      line-height: var(--text-line-height); }
      .properties__content .text p a {
        color: var(--color-yellow); }
  .properties__main-frame {
    background-color: black;
    height: 91.8%;
    padding: 3rem 4rem; }

.copyright {
  margin-top: 8rem; }

#mobile {
  display: none; }
  @media only screen and (max-width: 38.5em) {
    #mobile {
      display: block; } }
  @media only screen and (max-width: 38.5em) and (orientation: portrait) {
    #mobile {
      display: block; } }
  @media only screen and (max-width: 64em) and (max-height: 38.5em) and (orientation: landscape) {
    #mobile {
      display: block; } }

.mobile {
  width: 100%;
  height: 100%; }
  .mobile__main {
    height: 100%; }
  .mobile__pane {
    display: none;
    position: fixed;
    top: 4rem;
    bottom: 13.5rem;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: var(--color-desktop-bg); }
  .mobile-close-btn {
    position: fixed;
    top: 6.7rem;
    right: 2rem; }
  .mobile__content {
    width: 80%;
    padding-top: 5vh;
    padding-left: 4vw; }
  .mobile__about-me-logo {
    width: 18vh;
    height: 18vh; }
  .mobile__skills {
    background-color: var(--color-yellow); }
    .mobile__skills-zoom {
      background-color: transparent;
      margin-left: 3vw;
      border: none; }
    .mobile__skills-content-header {
      display: flex;
      align-items: center; }
    .mobile__skills-content img {
      width: 90vw;
      height: auto;
      margin-top: 3vh;
      border: 1.2px solid black; }
  .mobile__works {
    background-color: var(--color-desktop-tab); }
    .mobile__works-project-container {
      margin-bottom: 10vh; }
      .mobile__works-project-container > *:not(:last-child) {
        margin-bottom: 3.5vh; }
      .mobile__works-project-container h2 {
        display: inline-block; }
  .mobile .bottom-nav {
    height: 13.5rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center; }
    .mobile .bottom-nav button,
    .mobile .bottom-nav a {
      background-color: transparent;
      font-size: var(--font-size-mobile-nav); }
      .mobile .bottom-nav button img,
      .mobile .bottom-nav a img {
        width: 6.9rem;
        height: 6.9rem; }
    .mobile .bottom-nav button {
      border: none;
      outline: none;
      font-family: inherit; }
      .mobile .bottom-nav button:link, .mobile .bottom-nav button:visited, .mobile .bottom-nav button:active {
        outline: none; }
    .mobile .bottom-nav a {
      text-decoration: none;
      color: inherit;
      text-align: center; }
      .mobile .bottom-nav a p {
        text-align: center;
        font-size: inherit; }

.mob-icon {
  width: 6vw;
  height: 6vw; }
  .mob-icon-zoom-in {
    content: url("../images/mobile/icon--zoom-in@2x.png"); }
  .mob-icon-zoom-out {
    content: url("/images/mobile/icon--zoom-out@2x.png"); }