* {
  box-sizing:               border-box;
  margin:                   0;
  outline:                  none;
  overflow-x:               hidden;
  padding:                  0;
  text-decoration:          none;
  transition:               0.3s;
}

:root {
  --color-bg:               #292929;
  --color-text:             #F1F1F1;
  --color-subtitle:         #BABABA;
  --color-brand:            #D9D9D9;
  --color-bg-header:        #19191999;
  --color-active:           #A4C1FF;
  --color-active-bg:        #A4C1FF1A;
  --color-action-bg:        #A4C1FF66;
  --color-alpha-bg:         #F1F1F133;
  --color-card-bg:          #353535;
}

#light-mode-toggle {
  display:                  none;
}

body {
  background-color:         var(--color-bg);
  color:                    var(--color-text);
  font-family:              "DM Sans", sans-serif;
  font-size:                1.1em;
  letter-spacing:           0.1em;
  line-height:              160%;
}

h1 {
  font-size:                3em;
}

h1, h2, h3, h4, h5, h6 {
  line-height:              150%;
}

h2, h3, h4, h5, h6 {
  font-weight:              400;
}

img {
  max-width:                100%;
  height:                   fit-content;
}

header {
  background-color:         var(--color-bg-header);
  backdrop-filter:          blur(16px);
  -webkit-backdrop-filter:  blur(16px);
  box-shadow:               0px 8px 24px rgba(50, 50, 50, 0.05);
  font-size:                0.9em;
  padding:                  16px 0;
  position:                 fixed;
  top:                      0;
  width:                    100%;
  z-index:                  100;
}

footer {
  background-color:         var(--color-bg-header);
  padding:                  16px 0;
  width:                    100%;

  a {
    color:                  var(--color-text);
  }
}

nav {
  align-items:              center;
  display:                  flex;
  justify-content:          left;
  margin:                   0 12.5%;
}

nav a {
  display:                  inline-flex;
}

nav a span {
  font-weight:              700;
}

.logo {
  color:                    var(--color-brand);
  gap:                      12px;
}

.logo-sign {
  background-image:         url(../img/logo.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          contain;
  width:                    44px;
}

.logo span {
  line-height:              50px;
  min-width:                144px;
}

.logo-sign-footer {
  background-image:         url(../img/logo.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          contain;
  display:                  inline-flex;
  width:                    44px;
}

ul {
  list-style-type:          none;
  display:                  flex;
  align-items:              center;
  margin:                   0 auto;
  padding:                  0;
  overflow:                 hidden;
}

.menu li {
  display:                  inline-block;
  padding:                  0 2.5em;
  text-align:               center;
}

ul li a {
  color:                    var(--color-text);
}

nav ul li::after {
  background-color:         var(--color-text);
  content:                  "";
  display:                  block;
  height:                   3px;
  margin:                   0 auto;
  transition:               0.3s;
  width:                    0%;
}

nav ul li:hover::after {
  width:                    100%;
}

.actions {
  display:                  flex;
  align-items:              center;
  gap:                      40px;
  justify-content:          center;
}

.button {
  align-items:              center;
  background-color:         transparent;
  border:                   var(--color-active) 3px solid;
  border-radius:            8px;
  color:                    var(--color-active);
  cursor:                   pointer;
  display:                  inline-flex;
  float:                    right;
  font-size:                1.1em;
  font-weight:              600;
  gap:                      16px;
  justify-content:          center;
  letter-spacing:           0.05em;
  padding:                  16px 24px;
  text-align:               center;
  text-decoration:          none;  
}

.button:hover {
  background-color:         var(--color-active-bg);
  font-weight:              600;
}

.button:active {
  background-color:         var(--color-action-bg);;
  font-weight:              600;
}

.pdf-icon {
  background-image:         url(../img/pdf.svg);
  height:                   24px;
  width:                    25px;
}

.theme {
  display:                  flex;
  align-items:              center;
  justify-content:          center;
  gap:                      12px;
}

.toggle {
  background:               transparent;
  border:                   2px solid var(--color-text);
  border-radius:            30px;
  cursor:                   pointer;
  display:                  inline-block;
  height:                   30px;
  position:                 relative;
  transition:               background 0.3s;
  width:                    48px;
}

.toggle::before {
  background:               var(--color-text);
  border-radius:            50%;
  content:                  "";
  height:                   22px;
  left:                     2px;
  position:                 absolute;
  top:                      2px;
  transition:               transform 0.3s;
  width:                    22px;
}

.toggle:hover {
  background:               var(--color-alpha-bg);
}

#light-mode-toggle:checked + .toggle::before {
  transform:                translateX(18px);
}

.moon-icon {
  background-image:         url(../img/theme-dark-on.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          contain;
  height:                   24px;
  opacity:                  1.0;
  width:                    24px;
}

.sun-icon {
  background-image:         url(../img/theme-dark-off.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          contain;
  height:                   24px;
  opacity:                  0.5;
  width:                    24px;
}

.hero {
  align-items:              center;
  display:                  flex;
  justify-content:          center;
  padding:                  100px 20% 0 12%;
}

.id-photo {
  left:                     0;
  position:                 relative;
  top:                      0;
  z-index:                  -1;
}

.del-id-blur {
  opacity:                  1.0;
}

.del-id-photo {
  background-image:         url(../img/del-id-photo.png);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          auto;
  height:                   100%;
  left:                     0;
  position:                 absolute;
  top:                      0;
  width:                    100%;
}

.connector-id-photo {
  position:                 absolute;
  right:                    0;
  top:                      32%;
  width:                    28.5%;
}

.content {
  width:                    65%;
}

.greetings {
  float:                    left;
  font-size:                2em;
  line-height:              normal;
}

.hello {
  line-height:              2em;
}

.contacts {
  display:                  flex;
  gap:                      1em;
  margin:                   16px 0 24px 0;
}

.contact-icon {
  background-color:         var(--color-text);
  border-radius:            24px;
  display:                  inline-flex;
  padding:                  8px;
}

.contact-whats {
  background-image:         url(../img/whatsapp.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          auto;
  height:                   26px;
  width:                    26px;
}

.contact-email {
  background-image:         url(../img/email.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          auto;
  height:                   26px;
  width:                    26px;
}

.contact-linkedin {
  background-image:         url(../img/linkedin.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          auto;
  height:                   26px;
  width:                    26px;
}

.quote {
  border:                   2px solid var(--color-alpha-bg);
  border-radius:            16px;
  display:                  inline-flex;
  padding:                  20px 40px 24px 56px;
  position:                 relative;
}

.quote p {
  font-size:                1.1em;
  font-style:               italic;
  line-height:              1.6em;
}

.quote-start {
  background-image:         url(../img/quote-start.svg);
  height:                   20px;
  left:                     0;
  position:                 absolute; 
  top:                      0; 
  width:                    24px;  
}

.quote-end {
  background-image:         url(../img/quote-end.svg);
  bottom:                   0;
  height:                   20px; 
  position:                 absolute; 
  right:                    0;
  width:                    24px;
}

.myself {
  padding:                  100px 0 0;
}

.title {
  background-image:         url(../img/curves.svg);
  background-position:      left;
  background-repeat:        repeat-x;
  margin:                   0 12.5%;
}

.curveless {
  background-color:         var(--color-bg);
  padding:                  0 24px 0 28px;
  margin-left:              -28px;
}

.subtitle {
  font-weight:              600;
  line-height:              2em;
  margin:                   0 0 24px 0;
}

.about {
  align-items:              center;
  display:                  flex;
  justify-content:          center;
  padding:                  0 20% 40px 12%;
}

.about-photo {
  left:                     0;
  position:                 relative;
  top:                      0;
  z-index:                  -1;
}

.id-photo, .about-photo {
  margin-left:              0;
  text-align:               center;
}

.del-coffee-blur {
    opacity:                0.5;
  }

.del-coffee-photo {
  background-image:         url(../img/del-coffee-photo.png);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          auto;
  height:                   100%;
  left:                     0;
  position:                 absolute;
  top:                      0;
  width:                    100%;
}

.text-about {
  font-size:                1.1em;
  margin-bottom:            32px;
}

.text-footer-note {
  border-top:               1px solid var(--color-alpha-bg);
  font-size:                0.9em;
  font-style:               italic;
  padding-top:              8px;
}

.vert-rule {
  color:                    var(--color-subtitle);
  margin:                   0 0.3em;
}

.link {
  color:                    var(--color-active);
  font-weight:              600;
  position:                 absolute;
  bottom: 24px;
  right: 24px;
}

.link-icon {
  background-image:         url(../img/arrow-right.svg);
  float:                    right;
  height:                   24px;
  margin-left:              8px;
  width:                    24px;
}

.back {
  color:                    var(--color-active);
  display:                  flex;
  font-weight:              600;
  gap:                      8px;
  margin:                   0 12.5% 24px;
  justify-content:          start;
}

.back:hover {
  text-decoration:          underline;
}

.back-icon {
  background-image:         url(../img/arrow-left.svg);
  height:                   24px;
  width:                    24px;
}

.cases {
  display:                  flex;
  gap:                      32px;
  justify-content:          left;
  padding:                  40px 12.5%;
}

.case-card {
  background-color:         var(--color-bg);
  border:                   3px solid var(--color-alpha-bg);
  border-radius:            40px;
  box-shadow:               0px 0px 64px 16px rgba(115,115,115,0.1);
  font-size:                0.9em;
  margin:                   80px auto 120px;
  min-width:                496px;
  padding:                  32px;
  position:                 relative;
}

.case-card:hover {
  background-color:         var(--color-card-bg);
  cursor:                   pointer;

  .link {
    text-decoration:        underline;
  }

  .case-classified {
    background-color:       var(--color-card-bg);
  }
}

.case-soon {
  background-color:         #BDD9FF;
  border-radius:            0 0 18px 0;
  color:                    #064F83;
  font-size:                0.9em;
  font-weight:              600;
  left:                     0;
  padding:                  4px 12px;
  position:                 absolute;
  top:                      0;
}

.case-classified {
  background-color:         var(--color-bg);
  border-radius:            24px 0 0 0;
  bottom:                   -1px;
  padding:                  16px 12px 12px 18px;
  position:                 absolute;
  right:                    0;
}

.case-classified-icon {
  background-image:         url(../img/lock.svg);
  display:                  block;
  height:                   24px;
  width:                    20px;
}

.case-link {
  color:                    var(--color-text);
}

.case-title {
  font-weight:              600;
  margin:                   1em 0;
}

.case-subtitle {
  margin:                   0 0 40px;
}

.case-detail {
  margin:                   144px 0 0;
}

.case-detail-card {
  align-items:              center; 
  border:                   3px solid var(--color-alpha-bg);
  border-radius:            24px;
  display:                  inline-flex; 
  justify-content:          space-between; 
  margin:                   40px 0;
  padding:                  0;
  width:                    100%;
}

.case-grid {
  border-right:             3px solid var(--color-alpha-bg);
  min-height:               stretch;
  padding:                  24px; 
  width:                    25%;

  h3 {
    font-weight:            700;
    margin-bottom:          4px;
  }
}

.case-grid:last-child {
  border:                   0;
}

.case-emoji {
  float:                    left;
  font-size:                2em;
  line-height:              normal;
  margin-right:             16px;
}

.case-exposition {
  border-bottom:            2px solid var(--color-alpha-bg);
  margin:                   40px 0;
  width:                    100%;
  padding-bottom:           48px;
}

.case-exposition:last-child {
  border-bottom:            0;
}

.case-topic {
  
  h2 {
    font-weight:            700;
    line-height:            2em;
  }
}

.case-explication {
  display:                  block;
  padding-left:             64px;
}

.case-content {
  line-height:              2.0em;
  margin:                   0 12.5% 80px;
  min-height:               calc(100% - 492px);
}

.case-thumb {
  position:                 absolute;
  top:                      50%;
  left:                     50%;
  transform:                translate(-50%, -50%);
}

.case-device {
  color:                    var(--color-subtitle);
  margin:                   0 0 16px;
}

.case-mobile-icon {
  background-image:         url(../img/case-mobile-icon.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  float:                    left;
  height:                   24px;
  margin-right:             4px;
  width:                    24px;
}

.case-desktop-icon {
  background-image:         url(../img/case-desktop-icon.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  float:                    left;
  height:                   24px;
  margin-right:             4px;
  width:                    24px;
}

.case-tablet-icon {
  background-image:         url(../img/case-tablet-icon.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  float:                    left;
  height:                   24px;
  margin-right:             4px;
  width:                    24px;
}

.case-itau {
  background-color:         #EC7000;
  border-radius:            16px 16px 0 16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-itau-gallery {
  align-items:              center;
  background-color:         #EC7000;
  border-radius:            16px;
  display:                  inline-flex;
  height:                   240px;
  justify-content:          space-around;
  width:                    100%;
}

.case-c6 {
  background-color:         #1A1A1A;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-c6-gallery {
  align-items:              center;
  background-color:         #1A1A1A;
  border-radius:            16px;
  display:                  inline-flex;
  height:                   240px;
  justify-content:          space-around;
  width:                    100%;
}

.case-99 {
  background-color:         #FFDD00;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-cb {
  background-color:         #0033C6;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-via {
  background-color:         #5D4EE8;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-gptw {
  background-color:         #022F61;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-wm {
  background-color:         #1A75CE;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-tp {
  background-color:         #013D79;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-sp {
  background-color:         #DBDBDB;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.case-s2 {
  background-color:         #05BEE1;
  border-radius:            16px;
  display:                  flex;
  height:                   240px;
  overflow-y:               hidden;
  position:                 relative;
  justify-content:          center;
}

.footer-left {
  display:                  block;
  width:                    50%;
}

#privacy-policy {
  margin:                   144px 0 0;
}

.privacy-policy {
  margin:                   16px 0;
}

.privacy-policy:hover, .footer-link:hover {
  text-decoration:          underline;
}

.privacy-policy-img {
  margin:                   2em;
  text-align:               center;
}

.privacy-policy-emoji {
  font-size:                4em
}

.privacy-policy-content {
  line-height:              2.0em;
  margin:                   0 12.5% 80px;
  min-height:               calc(100% - 485px);
}

.privacy-policy-title, .case-highlight {
  background-image:         url(../img/curves.svg);
  background-position:      left;
  background-repeat:        repeat-x;
  margin:                   0 12.5%;
}

.privacy-policy-subtitle {
  font-weight:              700;
}

.privacy-policy-list {
  display:                  block;
}

.privacy-policy-note {
  border-top:               1px solid var(--color-alpha-bg);
  font-size:                0.9em;
  margin-top:               40px;
  padding-top:              40px;
}

.footer-right {
  display: block;
  text-align:               right;
  width:                    50%;
}

.footer-contact {
  margin:                   0 0 16px;
}

.footer-link {
  display:                  inline-flex;
  gap:                      12px;
}

.footer-link-text {
  font-weight:              600;
  min-width:                272px;
  text-align:               left;
}

.contact-whats-footer {
  background-image:         url(../img/whatsapp-light.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          auto;
  height:                   26px;
  width:                    26px;
}

.contact-email-footer {
  background-image:         url(../img/email-light.svg);
  background-repeat:        no-repeat;
  background-position:      center;
  background-size:          auto;
  height:                   26px;
  width:                    26px;
}

.unauthorized-content {
  line-height:              2.0em;
  margin:                   0 12.5% 80px;
  min-height:               calc(100% - 675px);
}

:has(#light-mode-toggle:checked) {
  --color-bg:               #EBEBEB;
  --color-text:             #202020;
  --color-subtitle:         #404040;
  --color-brand:            #303030;
  --color-bg-header:        #FFFFFF99;
  --color-active:           #003AB8;
  --color-active-bg:        #003AB81A;
  --color-action-bg:        #003AB84D;
  --color-alpha-bg:         #2020201A;
  --color-card-bg:          #F5F5F5;

  .logo-sign, .logo-sign-footer {
    background-image:       url(../img/logo-light.svg);
  }
  .pdf-icon {
    background-image:       url(../img/pdf-light.svg);
  }
  .moon-icon {
    background-image:       url(../img/theme-light-off.svg);
    opacity:                0.5;
  }
  .sun-icon {
    background-image:       url(../img/theme-light-on.svg);
    opacity:                1.0;
  }
  .del-id-photo {
    background-image:       url(../img/del-id-photo-light.png);
  }
  .del-id-blur {
    opacity:                0.3;
  }
  .contact-whats {
    background-image:       url(../img/whatsapp-light.svg);
  }
  .contact-email {
    background-image:       url(../img/email-light.svg);
  }
  .contact-linkedin {
    background-image:       url(../img/linkedin-light.svg);
  }
  .quote-start {
    background-image:       url(../img/quote-start-light.svg);
  }
  .quote-end {
    background-image:       url(../img/quote-end-light.svg);
  }
  .title, .privacy-policy-title, .case-highlight {
    background-image:       url(../img/curves-light.svg);
  }
  .del-coffee-photo {
    background-image:       url(../img/del-coffee-photo-light.png);
  }
  .del-coffee-blur {
    opacity:                1.0;
  }
  .case-mobile-icon {
    background-image:       url(../img/case-mobile-icon-light.svg);
  }
  .case-desktop-icon {
    background-image:       url(../img/case-desktop-icon-light.svg);
  }
  .case-tablet-icon {
    background-image:       url(../img/case-tablet-icon-light.svg);
  }
  .case-classified-icon {
    background-image:       url(../img/lock-light.svg);
  }
  .link-icon {
    background-image:       url(../img/arrow-right-light.svg);
  }
  .back-icon {
    background-image:       url(../img/arrow-left-light.svg);
  }
  .contact-whats-footer {
    background-image:       url(../img/whatsapp.svg);
  }
  .contact-email-footer {
    background-image:       url(../img/email.svg);
  }
}

@media screen and (max-width: 319px) {
  body {
    font-size:              0.6em;
  }
  nav .logo .logo-sign {
    width:                  20px;
    height:                 21px;
  }
  .greetings {
    margin-left:            0;
  }
  .case-topic {
    margin-bottom:          8px;
  }
  .case-explication {
    padding-left:           0;
  }
  .del-id-photo, .del-coffee-photo {
    background-size:        contain;
    left:                   20%;
    top:                    -10%;
    width:                  60%; 
  }
  .case-card {
    margin:                 24px 0 80px;
    min-width:              100%;
    padding:                0;

    .case-soon {
      border-radius:        0 0 24px 0;
      padding:              4px 12px 4px 20px;
    }

    .case-title, .case-device, .case-subtitle {
      padding:              0 16px;
    }
    .case-device {
      line-height:          2.7em;
      margin:               0 0 8px;
    }
    .link {
      line-height:          3.1em;
    }
  }
}

@media screen and (max-width: 479px) {
  nav .button {
    width:                  auto;
  }
  .pdf-icon {
    display:                none;
  }
  #home .content .name {
    font-size:              1.6em;
  }
  #home .content .text {
    font-size:              1.3em;
  }
  #about .content .subtitle {
    line-height:            normal;
  }
}

@media screen and (max-width: 767px) {
  nav .logo span {
    display:                none;
  }
  nav .button {
    padding:                12px;
  }
  nav .button::after {
    content:                "CV";
    display:                block;
  }
  nav .button span {
    display:                none;
  }
  .actions {
    gap:                    16px;
    justify-content:        space-around;
  }
  .theme {
    float:                  right;
    gap:                    8px;
  }
  .contacts {
    justify-content:        center;
  }
  #about .title, #cases .title {
    background-image:       none !important;
    font-size:              2em;
  }
  .cases {
    padding:                0 12.5%;
  }
  .footer-link-text {
    display:                none;
  }
}

@media screen and (max-width: 1279px) {
  .menu li, .menu li a {
    display:                none;
  }
  .hero {
    display:                block;
    padding-right:          12%;
  }
  .content {
    margin:                 -22% 0 10%;
    width:                  100%;
  }
  .about {
    display:                block;
    padding-right:          12%;
  }
  .about .content {
    margin-top:             -35%;
  }
  .myself {
    padding:                0;
  }
  .case-detail-card {
    display:                block;
  }
  .case-grid {
    border-bottom:          3px solid var(--color-alpha-bg);
    border-right:           0;
    min-height:             stretch;
    padding:                8px 16px; 
    width:                  100%;
  }
  .privacy-policy-title, .case-highlight {
    background-image:       none !important;
    font-size: 2em;
  }
}

@media screen and (min-width: 320px) and (max-width: 332px) {
  .case-subtitle {
    margin:                 0;
  }
}

@media screen and (min-width: 320px) and (max-width: 354px) {
  #light-mode-toggle:checked + .toggle::before {
    transform:              translateX(48%);
  }
  .logo {
    margin-right:           16px;
  }
}
@media screen and (min-width: 320px) and (max-width: 375px) {
  #about .content .greetings {
    padding:                24px 8px 0 0;
  }
}

@media screen and (min-width: 376px) and (max-width: 430px) {
  #about .content .greetings {
    padding:                6px 8px 0 0;
  }
}

@media screen and (min-width: 320px) and (max-width: 719px) {
  .case-card {
    margin:                 24px 0 80px;
    min-width:              100%;
    padding:                16px;
  }
  .case-itau, .case-c6, .case-99, .case-cb, .case-via, .case-gptw, .case-wm, .case-tp, .case-sp, .case-s2 {
    border-radius:          24px;
  }
  .case-explication {
    padding:                16px 0 0 0;
  }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
  body {
    font-size:              1.0em;
  }
  nav .logo .logo-sign {
    display:                block;
    width:                  44px;
    height:                 48px;
  }
  .logo {
    width:                  25%;

    span {
      display:              none;
    }
  }
  .actions {
    width:                  100%;
  }
  nav .button {
    width:                  40%;
  }
  .del-id-photo {
    background-size:        contain;
    left:                   12%;
    top:                    -10%;
    width:                  75%;
  }
  .del-coffee-photo {
    background-size:        contain;
    left:                   17%;
    top:                    -14%;
    width:                  65%;
  }
}

@media screen and (min-width: 720px) and (max-width: 767px) {
  .case-card {
    margin:                 24px 0 80px;
    min-height:             590px;
    min-width:              90%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .pdf-icon {
    display:                none;
  }
  .del-id-photo {
    background-size:        contain;
    left:                   25%;
    top:                    -10%;
    width:                  45%;
  }
  .del-coffee-photo {
    background-size:        contain;
    left:                   25%;
    top:                    -14%;
    width:                  45%;
  }
}

@media screen and (min-width: 768px) and (max-width: 816px) {
  .button {
    padding:                16px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .id-photo {
    margin-top:             -12.5%;
  }
}

@media screen and (min-width: 981px) and (max-width: 1279px) {
  .del-id-photo {
    background-size:        contain;
    left:                   30%;
    top:                    -5%;
    width:                  40%;
  }
  .del-coffee-photo {
    background-size:        contain;
    left:                   30%;
    top:                    -18%;
    width:                  40%;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1371px) {
  .about .content .greetings {
    padding:                24px 8px 0 0;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1479px) {
  .menu li {
    padding:                0 1em;
  }
  .hero .content {
    margin-top:             40px;
  }
  .hero {
    padding:                100px 12% 0;
  }
  .about {
    padding:                0 12% 40px;
  }
  .about .content {
    margin-top:             64px;
  }
}