@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
    /*background:#fff; */
    /*font-family: arial;
    color: #202020; */
    text-align:left;
    padding: 0 20%;
    font-family: "Courier Prime", monospace;
    font-weight: 300;
    line-height: 1.4;
color: var(--lightColor);
}

h1 {margin-top:8%; font-size: 3em;}
h2 {margin-top:5%; font-size: 2.6em;}
h3 {font-size: 2em;}
p {font-size: 1.4em;}
.small {font-size: 1.4em;}

hr {margin: 40px 0; border-bottom: 0; border-top: 2px dashed; border-color: var(--lightColor);}
footer {display: block; height: 3.5em; width: 100%;}


.reference {
  list-style: none;
  padding: 0;
}
.reference li {
  display: inline-block;
  font-size: 1.4em;
  padding: 8px 0;
}
.reference li a {
  padding: 8px;
}
.reference li a:after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  background: deeppink;
  opacity: 0;
  transform: translate(15%, -100%);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;
  border: 2px solid #000;
  border-radius: 3px;
}
.reference li a:hover:after {
  width: 280px;
  height: 160px;
  opacity: 1;
  transform: translate(30%, -120%);
}
.reference li #piacentina:after {
  background-image: url(../img/prev-piacentina.jpg);
}
.reference li #atipico:after {
  background-image: url(../img/prev-atipico.jpg);
}
.reference li #perfetto:after {
  background-image: url(../img/prev-perfetto_2023.jpg);
}
.reference li #technobrush:after {
  background-image: url(../img/prev-technobrush.png);
}
.reference li #prontodoc:after {
  background-image: url(../img/prev-prontodoc.png);
}
.reference li #locanda-bortolino:after {
  background-image: url(../img/prev-bortolino.jpg);
}
.reference li #la-lune-rebelle:after {
  background-image: url(../img/prev-llr.jpg);
}
.reference li #gabbiano-danza:after {
  background-image: url(../img/prev-gabbiano-danza.jpg);
}
.reference li #ironbutterfly:after {
  background-image: url(../img/prev-ironbutterfly.jpg);
}
.reference li #glam:after {
  background-image: url(../img/prev-6glam.jpg);
}
.reference li #gabbiano:after {
  background-image: url(../img/prev-gabbiano.jpg);
}

.reference li #bottega-ashtanga:after,
.reference li #estetica-glamour:after,
.reference li #hbt-sa:after,
.reference li #myrtha:after,
.reference li #intercos:after {
  background-image: url(../img/placeholder-site.jpg);
}

.collaborations {
  list-style: none;
  padding: 0;
}
.collaborations li {
  display: inline-block;
  font-size: 1.4em;
  padding: 8px 0;
}
.collaborations li a {
  padding: 8px;
}
.collaborations li a:after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  background: deeppink;
  opacity: 0;
  transform: translate(15%, -100%);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s;
  border: 2px solid #000;
  border-radius: 50%;
}
.collaborations li a:hover:after {
  width: 96px;
  height: 96px;
  opacity: 1;
  transform: translate(30%, -120%);
}
.collaborations li #giusti-eventi:after {
  background-image: url(../img/logo-giusti-eventi.jpg);
}
.collaborations li #layout:after {
  background-image: url(../img/logo-layout.jpg);
}
.collaborations li #your-digital-web:after {
  background-image: url(../img/logo-yourdigitalweb.jpg);
}
.collaborations li #master-studio:after {
  background-image: url(../img/logo-master-studio.jpg);
}
.collaborations li #complana:after {
  background-image: url(../img/logo-complana.png);
}
.collaborations li #different-web:after {
  background-image: url(../img/logo_dw.jpg);
}
.collaborations li #kamonweb:after {
  background-image: url(../img/logo-kamonweb.jpg);
}
.collaborations li #boncompagni:after {
  background-image: url(../img/logo-boncompagni.jpg);
}
.collaborations li #giovannimessina:after {
  background-image: url(../img/logo-giovannimessina.png);
}
.collaborations li #rebula:after {
  background-image: url(../img/logo-rebula.png);
}

@media (max-width:767px) {
  body {
    padding: 8% !important;
    /*background-image: linear-gradient(to right bottom, #ffffff, #f2edff, #e8daff, #e0c6fd, #dbb2f8, #c8b4fc, #b3b5ff, #9db7ff, #77cbff, #4fdeff, #40eeff, #5ffbf1);*/
  }
  h1 {font-size: 1em;}
}


html {
  background: var(--lightBg);
  --lightBtn: #134bff;
  --lightBg: #fff;
  --lightColor: #232323;

  --lightLink: #134bff;
}

html[data-theme='dark'] {
   background: var(--lightBg);
  --lightBtn: #FFBD07;
  --lightBg: #232323;
  --lightColor: #fff;

  --lightLink: #FFBD07;
}

p {
  /*font-family: 'Poppins', sans-serif;
  font-weight: 300;*/
  color: var(--lightColor);
}

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


.container {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.container p {font-size: 1rem;}


input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 55px;
  height: 30px;
  background: var(--lightBtn);
  margin: 8px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: '';
  background: #fff;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 4px;
 transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 320ms;
}

input:checked + label {
  background: #FFBD07;
}

input:checked + label:after {
  left: calc(100% - 5px);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: cubic-bezier(0.68, -0.55, 0.27, 01.55) 420ms!important;
  transition-delay: 0!important;
}