@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap");
:root {
  --hue: 200;
  --primary: hsl(var(--hue), 95%, 23%);
  --contrast: hsl(0, 0%, 90%);
  --behind-opacity: 0.05; }

html, body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  color: var(--primary);
  min-height: 100vh;
  scroll-behavior: smooth; }
  html ::selection, body ::selection {
    background-color: var(--primary);
    color: var(--contrast); }

.inverted-selection ::selection, #about ::selection, #projects .top ::selection, #footer ::selection {
  background-color: var(--contrast);
  color: var(--primary); }

html {
  background-color: var(--contrast); }
  html.darkmode {
    --contrast: hsl(0, 0%, 10%);
    --primary: hsl(var(--hue), 97%, 42%);
    --behind-opacity: 0.05; }
  html.switch--dark {
    animation-name: darkmode-on; }
  html.switch--light {
    animation-name: darkmode-off; }
  html.switch--dark, html.switch--light {
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 250ms; }

@keyframes darkmode-on {
  0% {
    --contrast: hsl(0, 0%, 90%);
    --primary: hsl(var(--hue), 97%, 42%); }
  4% {
    --contrast: hsl(0, 0%, 86.8%);
    --primary: hsl(var(--hue), 96.92%, 41.24%); }
  8% {
    --contrast: hsl(0, 0%, 83.6%);
    --primary: hsl(var(--hue), 96.84%, 40.48%); }
  12% {
    --contrast: hsl(0, 0%, 80.4%);
    --primary: hsl(var(--hue), 96.76%, 39.72%); }
  16% {
    --contrast: hsl(0, 0%, 77.2%);
    --primary: hsl(var(--hue), 96.68%, 38.96%); }
  20% {
    --contrast: hsl(0, 0%, 74%);
    --primary: hsl(var(--hue), 96.6%, 38.2%); }
  24% {
    --contrast: hsl(0, 0%, 70.8%);
    --primary: hsl(var(--hue), 96.52%, 37.44%); }
  28% {
    --contrast: hsl(0, 0%, 67.6%);
    --primary: hsl(var(--hue), 96.44%, 36.68%); }
  32% {
    --contrast: hsl(0, 0%, 64.4%);
    --primary: hsl(var(--hue), 96.36%, 35.92%); }
  36% {
    --contrast: hsl(0, 0%, 61.2%);
    --primary: hsl(var(--hue), 96.28%, 35.16%); }
  40% {
    --contrast: hsl(0, 0%, 58%);
    --primary: hsl(var(--hue), 96.2%, 34.4%); }
  44% {
    --contrast: hsl(0, 0%, 54.8%);
    --primary: hsl(var(--hue), 96.12%, 33.64%); }
  48% {
    --contrast: hsl(0, 0%, 51.6%);
    --primary: hsl(var(--hue), 96.04%, 32.88%); }
  52% {
    --contrast: hsl(0, 0%, 48.4%);
    --primary: hsl(var(--hue), 95.96%, 32.12%); }
  56% {
    --contrast: hsl(0, 0%, 45.2%);
    --primary: hsl(var(--hue), 95.88%, 31.36%); }
  60% {
    --contrast: hsl(0, 0%, 42%);
    --primary: hsl(var(--hue), 95.8%, 30.6%); }
  64% {
    --contrast: hsl(0, 0%, 38.8%);
    --primary: hsl(var(--hue), 95.72%, 29.84%); }
  68% {
    --contrast: hsl(0, 0%, 35.6%);
    --primary: hsl(var(--hue), 95.64%, 29.08%); }
  72% {
    --contrast: hsl(0, 0%, 32.4%);
    --primary: hsl(var(--hue), 95.56%, 28.32%); }
  76% {
    --contrast: hsl(0, 0%, 29.2%);
    --primary: hsl(var(--hue), 95.48%, 27.56%); }
  80% {
    --contrast: hsl(0, 0%, 26%);
    --primary: hsl(var(--hue), 95.4%, 26.8%); }
  84% {
    --contrast: hsl(0, 0%, 22.8%);
    --primary: hsl(var(--hue), 95.32%, 26.04%); }
  88% {
    --contrast: hsl(0, 0%, 19.6%);
    --primary: hsl(var(--hue), 95.24%, 25.28%); }
  92% {
    --contrast: hsl(0, 0%, 16.4%);
    --primary: hsl(var(--hue), 95.16%, 24.52%); }
  96% {
    --contrast: hsl(0, 0%, 13.2%);
    --primary: hsl(var(--hue), 95.08%, 23.76%); }
  100% {
    --contrast: hsl(0, 0%, 10%);
    --primary: hsl(var(--hue), 95%, 23%); } }
@keyframes darkmode-off {
  0% {
    --contrast: hsl(0, 0%, 10%);
    --primary: hsl(var(--hue), 95%, 23%); }
  4% {
    --contrast: hsl(0, 0%, 13.2%);
    --primary: hsl(var(--hue), 95.08%, 23.76%); }
  8% {
    --contrast: hsl(0, 0%, 16.4%);
    --primary: hsl(var(--hue), 95.16%, 24.52%); }
  12% {
    --contrast: hsl(0, 0%, 19.6%);
    --primary: hsl(var(--hue), 95.24%, 25.28%); }
  16% {
    --contrast: hsl(0, 0%, 22.8%);
    --primary: hsl(var(--hue), 95.32%, 26.04%); }
  20% {
    --contrast: hsl(0, 0%, 26%);
    --primary: hsl(var(--hue), 95.4%, 26.8%); }
  24% {
    --contrast: hsl(0, 0%, 29.2%);
    --primary: hsl(var(--hue), 95.48%, 27.56%); }
  28% {
    --contrast: hsl(0, 0%, 32.4%);
    --primary: hsl(var(--hue), 95.56%, 28.32%); }
  32% {
    --contrast: hsl(0, 0%, 35.6%);
    --primary: hsl(var(--hue), 95.64%, 29.08%); }
  36% {
    --contrast: hsl(0, 0%, 38.8%);
    --primary: hsl(var(--hue), 95.72%, 29.84%); }
  40% {
    --contrast: hsl(0, 0%, 42%);
    --primary: hsl(var(--hue), 95.8%, 30.6%); }
  44% {
    --contrast: hsl(0, 0%, 45.2%);
    --primary: hsl(var(--hue), 95.88%, 31.36%); }
  48% {
    --contrast: hsl(0, 0%, 48.4%);
    --primary: hsl(var(--hue), 95.96%, 32.12%); }
  52% {
    --contrast: hsl(0, 0%, 51.6%);
    --primary: hsl(var(--hue), 96.04%, 32.88%); }
  56% {
    --contrast: hsl(0, 0%, 54.8%);
    --primary: hsl(var(--hue), 96.12%, 33.64%); }
  60% {
    --contrast: hsl(0, 0%, 58%);
    --primary: hsl(var(--hue), 96.2%, 34.4%); }
  64% {
    --contrast: hsl(0, 0%, 61.2%);
    --primary: hsl(var(--hue), 96.28%, 35.16%); }
  68% {
    --contrast: hsl(0, 0%, 64.4%);
    --primary: hsl(var(--hue), 96.36%, 35.92%); }
  72% {
    --contrast: hsl(0, 0%, 67.6%);
    --primary: hsl(var(--hue), 96.44%, 36.68%); }
  76% {
    --contrast: hsl(0, 0%, 70.8%);
    --primary: hsl(var(--hue), 96.52%, 37.44%); }
  80% {
    --contrast: hsl(0, 0%, 74%);
    --primary: hsl(var(--hue), 96.6%, 38.2%); }
  84% {
    --contrast: hsl(0, 0%, 77.2%);
    --primary: hsl(var(--hue), 96.68%, 38.96%); }
  88% {
    --contrast: hsl(0, 0%, 80.4%);
    --primary: hsl(var(--hue), 96.76%, 39.72%); }
  92% {
    --contrast: hsl(0, 0%, 83.6%);
    --primary: hsl(var(--hue), 96.84%, 40.48%); }
  96% {
    --contrast: hsl(0, 0%, 86.8%);
    --primary: hsl(var(--hue), 96.92%, 41.24%); }
  100% {
    --contrast: hsl(0, 0%, 90%);
    --primary: hsl(var(--hue), 97%, 42%); } }
.font-title, #navbar .inner #brand {
  font-family: "Raleway", cursive; }

.container, #projects .top h3, #projects .bottom {
  max-width: 1280px;
  margin: 0 auto; }
  @media only screen and (max-width: 1312px) {
    .container, #projects .top h3, #projects .bottom {
      padding-left: 16px;
      padding-right: 16px; } }

#navbar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 2;
  height: 108px; }
  #navbar .inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primary);
    padding-left: 41px;
    padding-right: 25px; }
    @media only screen and (max-width: 420px) {
      #navbar .inner {
        justify-content: flex-end; } }
    #navbar .inner #brand {
      font-size: 2.25em;
      font-weight: 600; }
      @media only screen and (max-width: 420px) {
        #navbar .inner #brand {
          display: none; } }
    #navbar .inner nav {
      display: flex;
      justify-content: flex-end;
      align-items: center; }
      #navbar .inner nav > :not(:last-child) {
        margin-right: 25px;
        opacity: 0.6; }
        @media only screen and (max-width: 600px) {
          #navbar .inner nav > :not(:last-child) {
            display: none; } }
      #navbar .inner nav a {
        text-transform: uppercase;
        font-weight: 500;
        text-decoration: none;
        color: var(--primary); }
        #navbar .inner nav a:last-child {
          border: 4px solid var(--primary);
          border-top: none;
          border-right: none;
          padding: 15px 30px;
          position: relative;
          font-weight: 600;
          color: var(--primary);
          display: flex;
          align-items: center;
          background-color: var(--contrast); }
          @media only screen and (max-width: 600px) {
            #navbar .inner nav a:last-child {
              padding: 18px 30px; }
              #navbar .inner nav a:last-child span {
                display: none; } }
          #navbar .inner nav a:last-child > span {
            margin-left: 15px; }
          #navbar .inner nav a:last-child::after {
            position: absolute;
            content: "";
            border: 4px solid var(--contrast);
            border-top: none;
            border-right: none;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0; }
          #navbar .inner nav a:last-child:hover {
            background-color: var(--primary);
            color: var(--contrast); }

section {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-color: var(--contrast); }
  section .container, section #projects .top h3, #projects .top section h3, section #projects .bottom, #projects section .bottom {
    width: 100%; }
  section .hero-nav {
    position: absolute;
    height: 80px;
    width: 100%;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; }
    section .hero-nav > a {
      font-size: 1.6em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--primary);
      position: relative;
      padding: 15px 2vw; }
      @media only screen and (max-width: 700px) {
        section .hero-nav > a {
          font-size: 1.2em; } }
      section .hero-nav > a::after {
        padding: 15px 2vw;
        content: attr(data-value);
        position: absolute;
        top: 130%;
        right: 0;
        left: 0;
        bottom: -5em;
        color: var(--contrast);
        background-color: var(--primary);
        transition: top 150ms ease-in-out; }
      section .hero-nav > a:hover::after {
        top: 0; }

#hero {
  margin: 0;
  background-color: transparent; }
  #hero .hero-container {
    overflow: hidden;
    border: 4px solid var(--primary);
    margin: 25px;
    display: flex;
    align-items: center;
    font-size: 1.8vh;
    width: calc(100vw - 73px);
    min-height: calc(100vh - 58px);
    position: relative;
    outline: 25px solid var(--contrast); }
    @media only screen and (max-width: 600px) {
      #hero .hero-container {
        font-size: 1.2vh; } }
    #hero .hero-container > * {
      z-index: 1; }
    #hero .hero-container::before {
      position: fixed;
      content: "Developer";
      overflow: hidden;
      font-weight: 600;
      font-size: 75vh;
      opacity: var(--behind-opacity);
      color: var(--primary);
      top: 0.5em;
      left: 0.2em;
      z-index: -1; }
    #hero .hero-container h3 {
      font-size: 1.6em;
      font-weight: 300;
      margin-bottom: -2.45em; }
    #hero .hero-container h1 {
      width: 100%;
      color: var(--primary);
      font-size: 5em;
      font-weight: 400; }
    #hero .hero-container h2 {
      width: 100%;
      margin-top: -2em;
      font-size: 2em;
      font-weight: 300;
      text-align: right; }

#about {
  background-color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1vh;
  flex-direction: column;
  overflow: hidden; }
  @media only screen and (max-width: 600px) {
    #about {
      font-size: 0.8vh; } }
  #about p {
    z-index: 3;
    text-align: right;
    font-size: 3em;
    letter-spacing: 0.2em;
    padding: 0 25px;
    color: var(--contrast);
    font-weight: 500; }
    @media only screen and (max-width: 1300px) {
      #about p {
        padding: 0 50px; } }
    @media only screen and (max-width: 800px) {
      #about p {
        text-align: justify; } }
    #about p::before {
      pointer-events: none;
      z-index: 0;
      padding: 0 25px;
      position: fixed;
      content: attr(data-value);
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      color: var(--contrast);
      font-size: 6em;
      opacity: var(--behind-opacity);
      transform: rotate(8deg) translate(-9%, -5%) scale(1.5); }
    #about p .separator {
      display: block;
      position: relative; }
      #about p .separator::before {
        content: "About me";
        color: var(--contrast);
        font-size: 3em;
        position: absolute;
        right: -100vw;
        left: 50%;
        text-align: left;
        bottom: calc(100% + 2vh); }
      #about p .separator::after {
        border-top: 4px solid var(--contrast);
        top: -1.5vh;
        right: -100vw;
        left: 50%;
        bottom: 0;
        position: absolute;
        content: ""; }
      @media only screen and (max-width: 1000px) {
        #about p .separator::after, #about p .separator::before {
          left: 20%; }
        #about p .separator::before {
          font-size: 2em;
          bottom: calc(100% + 0.4em); } }
  #about .socials {
    position: relative;
    z-index: 3;
    text-align: right; }
    @media only screen and (max-width: 1300px) {
      #about .socials {
        margin-right: 25px; } }
    @media only screen and (max-width: 800px) {
      #about .socials {
        text-align: center; } }
    #about .socials svg {
      height: 6vh;
      margin: 16px 25px;
      fill: var(--contrast); }
      @media only screen and (max-width: 800px) {
        #about .socials svg {
          height: 5vh;
          margin: 8px 12.5px; } }

#skills {
  display: flex;
  justify-content: center;
  overflow: hidden; }
  #skills .navigation {
    margin: 25px; }
  #skills .left {
    width: 20vw;
    display: flex;
    align-items: center; }
    #skills .left h1 {
      text-align: center;
      left: -11vw;
      position: absolute;
      transform: rotate(-90deg);
      font-size: 19vw;
      color: var(--primary); }
      @media only screen and (max-width: 1000px) {
        #skills .left h1 {
          left: -12vw; } }
      @media only screen and (max-width: 600px) {
        #skills .left h1 {
          font-size: 20vw;
          left: -15vw; } }
  #skills .right {
    width: 80vw;
    background-color: var(--primary);
    border: 25px solid var(--contrast);
    border-left: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    overflow-y: auto;
    overflow-x: hidden; }
    #skills .right .skills {
      list-style-type: none;
      display: flex;
      justify-content: center;
      flex-wrap: wrap; }
      #skills .right .skills li {
        margin: 1vw;
        padding: 25px;
        background-color: var(--contrast);
        color: var(--primary);
        border: 4px solid var(--contrast);
        font-size: 2.8vw;
        cursor: pointer;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        transition: color 25ms ease-in-out, background-color 25ms ease-in-out;
        position: relative;
        overflow: hidden; }
        #skills .right .skills li a {
          color: inherit;
          text-decoration: none;
          z-index: 2; }
        #skills .right .skills li:nth-child(1n+5) {
          font-size: 2vw;
          padding: 20px; }
        #skills .right .skills li:nth-child(1n+10) {
          font-size: 1.5vw;
          padding: 15px; }
        @media screen and (max-width: 800px) {
          #skills .right .skills li:nth-child(1n) {
            padding: 15px;
            font-size: 4vw; } }
        #skills .right .skills li:hover {
          background-color: transparent;
          color: var(--contrast); }
        #skills .right .skills li .icon {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          display: flex;
          justify-content: center;
          align-items: center; }
          #skills .right .skills li .icon img {
            z-index: 0;
            transform: scale(3) rotate(-30deg);
            height: 1em;
            opacity: var(--behind-opacity); }

#projects {
  display: flex;
  flex-direction: column; }
  #projects .top {
    background-color: var(--primary);
    color: var(--contrast);
    text-align: center;
    padding-bottom: 250px; }
    #projects .top h1 {
      font-size: 6em; }
    #projects .top h3 {
      font-size: 2em;
      font-weight: 400;
      margin-top: -2em; }
  #projects .bottom {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px; }
    @media only screen and (max-width: 1200px) {
      #projects .bottom {
        grid-template-columns: repeat(2, 1fr); } }
    @media only screen and (max-width: 700px) {
      #projects .bottom {
        grid-template-columns: 1fr; } }
    #projects .bottom .card {
      overflow-x: hidden;
      overflow-y: visible;
      text-align: center;
      position: relative;
      top: -200px;
      border: 4px solid var(--primary);
      background-color: var(--contrast);
      color: var(--primary);
      padding: 15px 15px 48px; }
      #projects .bottom .card .title {
        position: relative;
        font-size: 2em;
        text-transform: uppercase; }
        #projects .bottom .card .title::before {
          content: attr(data-value);
          position: absolute;
          transform: scale(2);
          opacity: var(--behind-opacity); }
      #projects .bottom .card .description {
        font-size: 1.3em;
        letter-spacing: 0.15em; }
      #projects .bottom .card a, #projects .bottom .card .status {
        color: var(--primary);
        text-decoration: none;
        font-size: 1.4em;
        font-weight: bold;
        display: inline-block;
        margin-top: 1em;
        margin-bottom: 1em; }
      #projects .bottom .card .status {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5; }
        #projects .bottom .card .status .material-icons-round {
          margin-right: 10px; }
      #projects .bottom .card .technos {
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end; }
        #projects .bottom .card .technos .techno {
          background-color: var(--primary); }
          #projects .bottom .card .technos .techno img {
            height: 24px;
            padding: 12px; }

#darkmode-container {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 10000;
  cursor: pointer;
  width: 72px;
  height: 36px;
  background-color: var(--primary);
  outline: 4px solid var(--primary); }
  #darkmode-container input {
    position: absolute;
    opacity: 0;
    top: -200%;
    cursor: pointer; }
  #darkmode-container label {
    z-index: 10;
    position: absolute;
    display: block;
    background-color: var(--contrast);
    cursor: pointer;
    width: 36px;
    height: 100%;
    left: 0;
    transition: left 250ms ease-in-out; }
  #darkmode-container .icons {
    z-index: 11;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center; }
    #darkmode-container .icons .material-icons-round {
      width: 36px;
      height: 36px;
      font-size: 28px;
      display: flex;
      justify-content: center;
      align-items: center; }

#footer {
  width: auto !important;
  position: relative;
  z-index: 3;
  background-color: var(--primary);
  min-height: 60vh;
  margin-top: -50px;
  padding: 50px;
  color: var(--contrast);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  #footer > :not(:last-child) {
    margin-bottom: 2em; }
  #footer .contact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 29px;
    transform: translateY(-50%); }
    #footer .contact a {
      color: var(--primary);
      outline: 4px solid var(--primary);
      background-color: var(--contrast);
      padding: 25px 10vw;
      font-size: 2em;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      transition: transform 250ms ease-in-out; }
      #footer .contact a .material-icons-round {
        margin-right: 0.5em; }
      #footer .contact a:hover, #footer .contact a:focus {
        background-color: var(--primary);
        color: var(--contrast);
        outline-color: var(--contrast); }
  #footer .socials a {
    border: none; }
  #footer .socials svg {
    height: 60px;
    fill: var(--contrast); }
  #footer .socials > :not(:last-child) {
    margin-right: 2.5em; }
  #footer .madewith h3 > :not(:last-child) {
    margin-right: 0.5em; }
  #footer a {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--contrast);
    border-bottom: 2px solid var(--contrast); }
  #footer .copyright {
    font-weight: bold;
    display: inline-flex;
    justify-content: center;
    align-items: center; }
    #footer .copyright > :not(:last-child) {
      margin-right: 0.5em; }

#reviews {
  margin-top: -100px;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; }
  #reviews h2 {
    font-size: 12em;
    margin: 0 auto;
    display: inline-block;
    position: relative;
    padding-right: 0.08em; }
    @media only screen and (max-width: 830px) {
      #reviews h2 {
        font-size: 8em; } }
    @media only screen and (max-width: 600px) {
      #reviews h2 {
        font-size: 18vw; } }
    #reviews h2::after, #reviews h2::before {
      position: absolute;
      content: "";
      height: 0.15em;
      background-color: var(--primary);
      width: 100%;
      top: 50%; }
    #reviews h2::before {
      right: 100%; }
    #reviews h2::after {
      left: 100%; }
  #reviews .description {
    font-size: 1.6em;
    max-width: 1200px;
    padding: 0 25px 25px;
    text-align: center; }
  #reviews .reviews {
    margin-bottom: 10em;
    display: flex;
    flex-direction: column-reverse; }
    #reviews .reviews .year {
      padding-left: 2em;
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      align-items: flex-end; }
      @media only screen and (max-width: 800px) {
        #reviews .reviews .year {
          padding: 0; } }
      #reviews .reviews .year__title {
        width: 100%;
        font-size: 8em;
        font-weight: bold; }
        @media only screen and (max-width: 800px) {
          #reviews .reviews .year__title {
            font-size: 6em;
            text-align: center; } }
      #reviews .reviews .year .months {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column-reverse;
        align-items: flex-end; }
        #reviews .reviews .year .months .month {
          width: calc(100% - 16em);
          position: relative;
          min-height: 200px;
          display: flex;
          padding-left: 2em;
          flex-direction: column-reverse;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center; }
          @media only screen and (max-width: 800px) {
            #reviews .reviews .year .months .month {
              width: calc(100% - 3em);
              margin: auto;
              padding: 3em 0 0;
              text-align: center; } }
          #reviews .reviews .year .months .month__title {
            width: 100%;
            font-size: 3em;
            text-transform: uppercase;
            font-weight: bold;
            justify-content: flex-start;
            position: absolute;
            top: 0;
            bottom: 0;
            text-align: center;
            display: inline-block;
            right: 0; }
            @media only screen and (min-width: 800px) {
              #reviews .reviews .year .months .month__title {
                right: 100%;
                text-align: right;
                padding-right: 0.2em; }
                #reviews .reviews .year .months .month__title::before {
                  position: absolute;
                  content: "";
                  width: 0.5em;
                  top: 0;
                  bottom: 0;
                  background-color: var(--primary);
                  left: calc(100% + .25em); } }
          #reviews .reviews .year .months .month .review-box {
            width: calc(100% - 50px);
            max-width: 800px;
            padding: 7.5px; }
            #reviews .reviews .year .months .month .review-box .review {
              border: 4px solid var(--primary);
              padding: 15px 15px 3em;
              position: relative; }
              #reviews .reviews .year .months .month .review-box .review .name {
                font-size: 1.8em;
                padding: 0;
                margin: 0 0 0.5em; }
                #reviews .reviews .year .months .month .review-box .review .name .client {
                  display: block;
                  font-size: 0.5em;
                  opacity: 0.8; }
              #reviews .reviews .year .months .month .review-box .review .img-box {
                width: calc(100% - 30px); }
                #reviews .reviews .year .months .month .review-box .review .img-box .preview {
                  margin: auto;
                  display: block;
                  border: 4px solid var(--primary);
                  padding: 4px;
                  width: 100%; }
                #reviews .reviews .year .months .month .review-box .review .img-box .sub-preview {
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                  margin: auto;
                  background-color: var(--primary);
                  border: 4px solid var(--primary);
                  color: var(--contrast);
                  padding: 8px 4px;
                  font-size: 18px;
                  font-weight: bold; }
                  #reviews .reviews .year .months .month .review-box .review .img-box .sub-preview .note, #reviews .reviews .year .months .month .review-box .review .img-box .sub-preview .price, #reviews .reviews .year .months .month .review-box .review .img-box .sub-preview .tip {
                    display: flex;
                    align-items: center; }
              #reviews .reviews .year .months .month .review-box .review .comment {
                padding: 15px 7.5px;
                font-size: 1.2em;
                text-align: justify; }
              #reviews .reviews .year .months .month .review-box .review .view {
                position: absolute;
                bottom: 0;
                right: 0;
                background-color: var(--primary);
                color: var(--contrast);
                padding: 10px 12px;
                text-decoration: none;
                font-size: 1.2em;
                text-transform: uppercase;
                font-weight: bold;
                outline: 4px solid transparent; }
                #reviews .reviews .year .months .month .review-box .review .view:hover {
                  background-color: transparent;
                  color: var(--primary);
                  outline: 4px solid var(--primary); }
              #reviews .reviews .year .months .month .review-box .review .technos {
                position: absolute;
                bottom: 0;
                left: 0;
                display: flex;
                background-color: var(--primary);
                padding: 6px 12px;
                gap: 12px; }
                #reviews .reviews .year .months .month .review-box .review .technos img {
                  width: 26px; }
    #reviews .reviews .year:last-child .month:last-child .month__title::before {
      bottom: -600px; }

.darkmode #darkmode-container label {
  left: 50%; }
.darkmode #skills .right .skills li .icon {
  filter: invert(1); }
.darkmode #projects .bottom .card .technos img {
  filter: invert(1); }
.darkmode #reviews .review .technos img {
  filter: invert(1); }

/*# sourceMappingURL=main.css.map */