@charset "UTF-8";
/* RESET moderno */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

ul, ol {
  list-style: none;
}

html {
  font-size: clamp(14px, 1.5vw, 18px);
}

:root {
  --bg-body-bg: 255, 255, 255;
  --bg-primary: 13, 110, 253;
  --bg-accent: 255, 228, 132;
  --bg-violet: 113, 44, 249;
  --bg-pink: 214, 51, 132;
}

body {
  background-color: #F8F8F8;
  background-image: linear-gradient(180deg, rgba(var(--bg-body-bg), 0.01), rgba(var(--bg-body-bg), 1) 85%), radial-gradient(ellipse at top left, rgba(var(--bg-accent), 0.5), transparent 50%), radial-gradient(ellipse at top right, rgba(var(--bg-primary), 0.5), transparent 50%), radial-gradient(ellipse at center right, rgba(var(--bg-violet), 0.5), transparent 50%), radial-gradient(ellipse at center left, rgba(var(--bg-pink), 0.5), transparent 50%);
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  color: #757575;
  min-height: 100vh;
}
@media (max-width: 576px) {
  body {
    background-image: linear-gradient(100deg, rgba(var(--bg-body-bg), 0.01), rgba(var(--bg-body-bg), 1) 85%), radial-gradient(ellipse at top left, rgba(var(--bg-accent), 0.5), transparent 50%), radial-gradient(ellipse at top right, rgba(var(--bg-primary), 0.5), transparent 50%), radial-gradient(ellipse at center right, rgba(var(--bg-violet), 0.5), transparent 50%), radial-gradient(ellipse at center left, rgba(var(--bg-pink), 0.5), transparent 50%);
  }
}

a {
  color: #5DA9F7;
  text-decoration: none;
}

.site-header {
  max-width: 1274px;
  margin: 65px auto;
}
@media (max-width: 575px) {
  .site-header {
    margin: 35px auto;
  }
}
@media (max-width: 390px) {
  .site-header {
    margin: 15px auto;
  }
}
.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .site-header nav {
    flex-direction: column;
  }
}
.site-header nav menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  align-items: center;
}
@media (max-width: 575px) {
  .site-header nav menu {
    gap: 10px;
  }
}
.site-header nav menu li a {
  padding: 8px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 100%;
  transition: all 0.3s ease;
}
.site-header nav menu li a:hover {
  box-shadow: 0 0 0 2px rgba(93, 169, 247, 0.3);
  color: #317ff9;
}

.soluciones {
  padding-block: 4rem;
}
.soluciones .title {
  font-size: 180%;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #313131;
  text-align: center;
}
.soluciones .subtitle {
  font-size: 120%;
  margin-bottom: clamp(2rem, 4vh, 4rem);
  color: #757575;
  text-align: center;
}
.soluciones .grid {
  overflow-anchor: hidden;
}
.soluciones .grid ul {
  display: grid;
  grid-template-areas: "web centro uxui" "responsive centro autogestionable" "optimizacion centro soporte";
  grid-template-columns: 330px 1fr 330px;
  column-gap: 3rem;
  min-height: 510px;
  max-width: 1320px;
  margin: 0 auto;
}
.soluciones .grid ul li {
  padding-top: 2rem;
}
.soluciones .grid ul li:nth-child(1) {
  text-align: right;
}
.soluciones .grid ul li:nth-child(1) > img {
  margin-left: auto;
  margin-right: -47px;
}
.soluciones .grid ul li:nth-child(2) {
  text-align: left;
}
.soluciones .grid ul li:nth-child(2) > img {
  margin-right: auto;
  margin-left: -46px;
}
.soluciones .grid ul li:nth-child(3) {
  text-align: right;
}
.soluciones .grid ul li:nth-child(3) > img {
  margin-left: auto;
  margin-right: -53px;
}
.soluciones .grid ul li:nth-child(4) {
  text-align: left;
}
.soluciones .grid ul li:nth-child(4) > img {
  margin-right: auto;
  margin-left: -45px;
}
.soluciones .grid ul li:nth-child(7) {
  text-align: right;
}
.soluciones .grid ul li:nth-child(7) > img {
  margin-left: auto;
}
.soluciones .grid ul li:nth-child(3) {
  text-align: right;
}
.soluciones .grid ul li:nth-child(3) > img {
  margin-left: auto;
}
.soluciones .grid ul li:nth-child(5) {
  text-align: right;
}
.soluciones .grid ul li:nth-child(5) > img {
  margin-left: auto;
  margin-right: -46px;
}
.soluciones .grid ul li:nth-child(6) {
  text-align: left;
}
.soluciones .grid ul li:nth-child(6) > img {
  margin-right: auto;
  margin-left: -45px;
}
.soluciones .grid ul li > img {
  display: block;
}
.soluciones .grid ul li strong {
  color: #5DA9F7;
  font-size: 0.95rem;
  font-weight: bold;
  display: block;
}
.soluciones .grid ul li span {
  color: #757575;
  font-size: 0.8rem;
  max-width: calc(100% - 67px);
  display: block;
}
.soluciones .grid ul li:nth-child(1) {
  grid-area: web;
  display: flex;
  flex-flow: column;
  align-items: end;
}
.soluciones .grid ul li:nth-child(2) {
  grid-area: uxui;
}
.soluciones .grid ul li:nth-child(3) {
  grid-area: responsive;
  display: flex;
  flex-flow: column;
  align-items: end;
  transform: translateX(-60px);
}
.soluciones .grid ul li:nth-child(4) {
  grid-area: autogestionable;
  transform: translateX(60px);
}
.soluciones .grid ul li:nth-child(5) {
  grid-area: optimizacion;
  display: flex;
  flex-flow: column;
  align-items: end;
}
.soluciones .grid ul li:nth-child(6) {
  grid-area: soporte;
}
.soluciones .grid ul li.content {
  grid-area: centro;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -3rem;
}
.soluciones .grid ul li.content div {
  aspect-ratio: 1/1;
  border-radius: 100%;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.3rem;
}
.soluciones .grid ul li.content div img {
  margin-top: -2rem;
}
.soluciones .grid ul li.modal-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.soluciones .grid ul li.modal-hidden.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.soluciones .grid ul li.modal-hidden div {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
@media (max-width: 1280px) {
  .soluciones .grid {
    margin-left: -3rem;
    margin-right: -3rem;
    overflow-x: hidden;
  }
  .soluciones .grid ul {
    column-gap: 2rem;
    min-height: auto;
  }
  .soluciones .grid .modal-hidden p {
    font-size: 0.7rem;
    line-height: 1.6;
  }
}
@media (max-width: 1040px) {
  .soluciones .grid ul {
    column-gap: 1rem;
  }
}
@media (max-width: 980px) {
  .soluciones .grid {
    margin-left: 0;
    margin-right: 0;
  }
  .soluciones .grid ul {
    grid-template-areas: "web          uxui           " "responsive   autogestionable" "optimizacion soporte        ";
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
  }
  .soluciones .grid ul li {
    transform: translateX(0) !important;
  }
  .soluciones .grid ul li.content {
    display: none;
  }
  .soluciones .grid ul li span {
    max-width: none;
  }
  .soluciones .grid ul li:nth-child(odd) > img {
    margin: 0 0 0 auto !important;
  }
  .soluciones .grid ul li:nth-child(even) > img {
    margin: 0 auto 0 0 !important;
  }
}

@media (max-width: 980px) {
  .soluciones .grid ul li.modal-hidden.web,
  .soluciones .grid ul li.modal-hidden.uxui,
  .soluciones .grid ul li.modal-hidden.responsive,
  .soluciones .grid ul li.modal-hidden.autogestion,
  .soluciones .grid ul li.modal-hidden.optimizacion,
  .soluciones .grid ul li.modal-hidden.soporte {
    display: none !important;
  }
}
@media (min-width: 981px) {
  .soluciones .grid ul li.web,
  .soluciones .grid ul li.uxui,
  .soluciones .grid ul li.responsive,
  .soluciones .grid ul li.autogestion,
  .soluciones .grid ul li.optimizacion,
  .soluciones .grid ul li.soporte {
    grid-area: centro;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -3rem;
  }
  .soluciones .grid ul li.web div,
  .soluciones .grid ul li.uxui div,
  .soluciones .grid ul li.responsive div,
  .soluciones .grid ul li.autogestion div,
  .soluciones .grid ul li.optimizacion div,
  .soluciones .grid ul li.soporte div {
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.3rem;
    text-align: center;
  }
}
.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: white;
}

.slides {
  display: flex;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 40px 30px;
  text-align: center;
  max-height: 514px;
  height: 514px;
  display: grid;
  align-items: center;
  align-content: center;
  gap: 20px;
}

.slide .title {
  font-size: 220%;
  font-weight: bold;
  margin-bottom: 10px;
  color: #313131;
}

.slide p {
  font-size: 125%;
  margin: 0 auto 20px;
  color: #757575;
  max-width: 730px;
  width: 90%;
}

.navigation {
  position: absolute;
  width: 100%;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.nav-dot {
  width: 10px;
  height: 10px;
  background: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.nav-dot.active {
  background: #5DA9F7;
}

@media (max-width: 414px) {
  .slide {
    padding: 20px 30px;
    height: 474px;
    gap: 10px;
  }
  .slide .title {
    font-size: 180%;
  }
  .slide p {
    font-size: 110%;
  }
}
.section-carousel {
  margin-bottom: 2rem;
}
.section-carousel > .linkedin .title {
  font-size: 160%;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #313131;
  text-align: center;
}
.section-carousel > .linkedin .carousel-nav {
  justify-content: space-between;
}
.section-carousel > .linkedin .carousel-track {
  gap: 2rem;
}
.section-carousel > .linkedin .btn {
  font-size: 80%;
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  margin-bottom: 1.2rem;
}
.section-carousel > .linkedin .card {
  gap: 0.8rem;
  text-align: left;
  padding: 1.2rem;
  min-height: 190px;
}
.section-carousel > .linkedin .card.expanded .person-message {
  max-height: 1000px; /* suficiente para mostrar todo */
  -webkit-line-clamp: unset;
  overflow: visible;
}
.section-carousel > .linkedin .card .person-info {
  display: grid;
  grid-template-columns: 37px auto;
  gap: 1rem;
}
.section-carousel > .linkedin .card .person-info img {
  width: 37px;
  height: 37px;
  border-radius: 50%;
}
.section-carousel > .linkedin .card .person-info .person-name {
  font-size: 1rem;
  font-weight: bold;
}
.section-carousel > .linkedin .card .person-info .person-work {
  font-size: 0.8rem;
  font-weight: normal;
  color: gray;
}
.section-carousel > .linkedin .card .person-message {
  font-size: 0.8rem;
  color: #757575;
  font-style: italic;
  max-height: 4.5em; /* aprox 3 líneas */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* número de líneas a mostrar */
  -webkit-box-orient: vertical;
  transition: max-height 0.3s ease;
  cursor: pointer;
}
.section-carousel > .phrases {
  display: grid;
  grid-template-columns: minmax(300px, 466px) auto;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .section-carousel > .phrases {
    grid-template-columns: auto;
    justify-content: center;
  }
}
.section-carousel > .phrases .title {
  font-size: 180%;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #313131;
}
@media (max-width: 1600px) {
  .section-carousel > .phrases .title br {
    display: none;
  }
}
@media (max-width: 767px) {
  .section-carousel > .phrases .title {
    text-align: center;
  }
}

.phrases .carousel-wrapper {
  width: 63vw;
}
@media (max-width: 991px) {
  .phrases .carousel-wrapper {
    width: 60vw;
  }
}
@media (max-width: 767px) {
  .phrases .carousel-wrapper {
    width: 90vw;
  }
}

.carousel {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.carousel-track {
  display: flex;
  min-width: 100%;
  /* Eliminamos scrollbar si querés */
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  flex: 0 0 50%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 0.5rem;
}
.carousel-item .item-title {
  font-size: 38px;
  font-weight: normal;
  color: #313131;
}
.carousel-item p {
  color: #757575;
}

/* 3 items */
@media (min-width: 768px) {
  .carousel-item {
    flex: 0 0 33.3333%;
  }
}
/* 4 items */
@media (min-width: 1200px) {
  .carousel-item {
    flex: 0 0 25%;
  }
}
.carousel-nav {
  display: flex;
  gap: 1rem;
}
@media (max-width: 767px) {
  .carousel-nav {
    display: none;
  }
}

.carousel-btn {
  background: #5DA9F7;
  border: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
}
.carousel-btn:hover {
  box-shadow: 1px 8px 12px 0px rgba(6, 43, 79, 0.2);
  background: #317ff9;
}
.carousel-btn.prev img {
  transform: scale(-1);
}

.card {
  padding: 65px;
  border-radius: 1rem;
  display: grid;
  align-items: center;
  justify-content: space-between;
  background: white;
  gap: 4rem;
  margin-bottom: 3rem;
}
.card.contact {
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (max-width: 576px) {
  .card {
    padding: 25px;
  }
}
.card.hosting {
  grid-template-columns: minmax(345px, 60%) auto;
}
@media (max-width: 576px) {
  .card.hosting {
    grid-template-columns: auto;
  }
  .card.hosting figure {
    max-width: 55%;
    margin: 0 auto;
  }
}
.card.design {
  grid-template-columns: auto minmax(345px, 50%);
}
@media (max-width: 576px) {
  .card.design {
    grid-template-columns: auto;
  }
}
.card.presentaciones {
  grid-template-columns: minmax(345px, 70%) auto;
}
@media (max-width: 576px) {
  .card.presentaciones {
    grid-template-columns: auto;
  }
  .card.presentaciones figure {
    display: none;
  }
}
.card.presentaciones figure {
  margin-right: -65px;
}
@media (max-width: 576px) {
  .card.presentaciones figure {
    margin-right: auto;
  }
}
.card article .title {
  font-size: 180%;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: #313131;
}
.card article p {
  margin-bottom: 1.5rem;
}
.card article .item-list {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
.card article .item-list li {
  position: relative;
  margin-bottom: 0.3rem;
  font-size: 80%;
  padding: 0.3rem 1rem 0.3rem 2rem;
}
.card article .item-list li::before {
  content: "✔";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #22c55e;
}
.card article .media-list {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
}
.card article .media-list li {
  margin-bottom: 0.3rem;
  padding: 0;
}
.card article .group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
}
@media (max-width: 576px) {
  .card article .group {
    grid-template-columns: 1fr;
  }
}
.card article .group .list {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  margin-left: 2rem;
  list-style: disc;
}
.card article .group .list li {
  margin-bottom: 0.3rem;
  font-size: 80%;
  padding: 0;
}
@media (max-width: 576px) {
  .card article .group .list {
    margin-left: 1rem;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.card article .btn {
  margin-left: 0;
}
@media (max-width: 576px) {
  .card article .btn {
    margin-inline: auto;
  }
}
.card.herramientas {
  text-align: center;
  justify-content: initial;
}
.card figcaption {
  display: none;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
}
@media (min-width: 768px) {
  .form-row {
    grid-template-columns: repeat(3, auto);
  }
}

.floating-label .form-group {
  position: relative;
  margin-bottom: 1.5em;
}

.floating-label input,
.floating-label textarea {
  width: 100%;
  padding: 1.2em 0.8em 0.4em 0.8em;
  font-size: 1em;
  border: 1px solid rgba(93, 169, 247, 0.4);
  border-radius: 4px;
  background: none;
  outline: 2px solid #fff;
  transition: all 0.3s linear;
}

.floating-label input:is(:focus),
.floating-label textarea:is(:focus) {
  border-color: #5DA9F7;
  outline: 2px solid rgba(93, 169, 247, 0.2509803922);
}

/* Label encima del input */
.floating-label label {
  position: absolute;
  top: 1.1em;
  left: 0.8em;
  color: #757575;
  font-size: 1em;
  pointer-events: none;
  transition: 0.2s ease all;
  background: white;
  padding: 0 0.2em;
}

/* Estilo cuando el input tiene focus o contenido */
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label textarea:focus + label,
.floating-label textarea:not(:placeholder-shown) + label {
  top: -0.6em;
  left: 0.6em;
  font-size: 0.75em;
  color: #313131;
}

/* Oculta el placeholder cuando hay label */
.floating-label input::placeholder,
.floating-label textarea::placeholder {
  color: transparent;
}

.alert {
  background: #f8f8f8;
  padding: 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  margin-bottom: 2rem;
  margin-top: -1rem;
  display: none;
}

.form-msg {
  padding-bottom: 1rem;
  text-align: center;
}

.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

#mail-status.error {
  color: darkorange;
}

#mail-status.success {
  color: darkgreen;
}

footer {
  display: grid;
  justify-content: center;
  text-align: center;
  padding-bottom: 5rem;
}
footer img {
  margin: 0 auto 0.6rem;
}
footer small {
  font-size: 0.7rem;
}

.wrap {
  max-width: 1762px;
  margin: 0 auto;
  width: 90%;
}

.btn {
  border: 0;
  border-radius: 0.3rem;
  display: flex;
  margin: 0 auto;
  width: fit-content;
  background: #5DA9F7;
  color: white;
  align-items: center;
  padding: 0.7rem 2.3rem;
  font-size: 120%;
  font-weight: bold;
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px #317ff9;
  cursor: pointer;
}
.btn:hover {
  box-shadow: 1px 8px 12px 0px rgba(6, 43, 79, 0.2);
  background: #317ff9;
}

hr {
  border-width: 0 0 1px 0;
  border-color: #F8F8F8;
  margin-bottom: 2rem;
}

body:not(.dark) .dark-brand {
  display: none;
}
body:not(.dark) .light-brand {
  display: block;
}

body.dark {
  background-color: #272727;
  background-image: linear-gradient(180deg, rgba(33, 37, 41, 0.02), rgb(33, 37, 41) 85%), radial-gradient(ellipse at top left, rgba(13, 110, 253, 0.5), transparent 50%), radial-gradient(ellipse at top right, rgba(255, 228, 132, 0.5), transparent 50%), radial-gradient(ellipse at center right, rgba(113, 44, 249, 0.5), transparent 50%), radial-gradient(ellipse at center left, rgba(214, 51, 132, 0.5), transparent 50%);
  color: #F8F8F8;
}
body.dark .dark-brand {
  display: block;
}
body.dark .light-brand {
  display: none;
}
body.dark h1 {
  color: #F8F8F8;
}
body.dark .slide p {
  color: #F8F8F8;
}
body.dark .btn {
  background: white;
  color: #222;
  text-shadow: none;
}
body.dark .btn:hover {
  color: #5DA9F7;
}
body.dark .nav-dot.active {
  background: #fff;
}
body.dark .media-list img {
  filter: brightness(100);
}
body.dark .carousel-btn {
  background: white;
}
body.dark .carousel-btn img {
  filter: brightness(0);
}
body.dark .soluciones .grid ul li.content div {
  border: 1px solid #313131;
}
body.dark .theme .checkbox-label {
  background-color: #313131;
}
body.dark .card,
body.dark .slider {
  background: #313131;
}
body.dark .slide .title,
body.dark .soluciones .title,
body.dark .hosting .title,
body.dark .card article .title,
body.dark .section-carousel > div .title,
body.dark .carousel-item .item-title {
  color: #F8F8F8;
}
body.dark nav menu li a {
  color: #F8F8F8;
}
body.dark nav menu li a:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: white;
}
body.dark .nav-dot {
  background: #222;
}
body.dark hr {
  border-color: #272727;
}
body.dark .soluciones .subtitle,
body.dark .soluciones .grid ul li span {
  color: #F8F8F8;
}
body.dark .floating-label input,
body.dark .floating-label textarea {
  border: 1px solid rgb(38, 38, 38);
  outline: 2px solid #464646;
  color: white;
}
body.dark .floating-label label {
  color: white;
  background: #313131;
}
body.dark .floating-label input:focus + label,
body.dark .floating-label input:not(:placeholder-shown) + label,
body.dark .floating-label textarea:focus + label,
body.dark .floating-label textarea:not(:placeholder-shown) + label {
  color: white;
}
body.dark footer small {
  color: #757575;
}
@media (min-width: 981px) {
  body.dark .soluciones .grid ul li.web div,
  body.dark .soluciones .grid ul li.uxui div,
  body.dark .soluciones .grid ul li.responsive div,
  body.dark .soluciones .grid ul li.autogestion div,
  body.dark .soluciones .grid ul li.optimizacion div,
  body.dark .soluciones .grid ul li.soporte div {
    background-color: #313131;
  }
}

.theme .checkbox {
  opacity: 0;
  position: absolute;
}
.theme .checkbox-label {
  background-color: white;
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.theme .checkbox-label .ball {
  background-color: #5DA9F7;
  width: 21px;
  height: 21px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}
.theme .checkbox:checked + .checkbox-label .ball {
  transform: translateX(24px);
}
.theme .icon {
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
}
.theme .icon.sun {
  background-image: url(../images/sun-fill.svg);
}
.theme .icon.moon {
  background-image: url(../images/moon-stars-fill.svg);
}

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