:root {--g:#E11584;}
a {color: var(--g); TEXT-DECORATION: none; padding:0 2px;}
a:hover {TEXT-DECORATION: underline}

h1 {    margin-bottom:-26px; font-size:3rem;}
body {  color:#1D1D1F; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:1.6rem;}
button {background:var(--g); border:none; border-radius:25px; padding:12px 24px; cursor:pointer;
}
button a {color: white; font-size:1.5rem;} 
footer {font-size:1rem; margin-top:20px;}
li {    text-align: left;}

.l {    padding:6%; width:150px}
.i {    width:250px; height:200px}
.c {    color:dimgray; font-size:1rem;}

/* MENU */

#t { display: none; }

label {
  display: block;
  position: absolute;
  top: 3%;
  right: 7%;
  width: 30px;
  height: 20px;
  cursor: pointer;
  z-index: 9999;
}

label span {
  position: absolute;
  width: 100%;
  height: 4px;
  background: var(--g);
  transition: .3s;
}
label span:nth-child(1) { top: 0; }
label span:nth-child(2) { bottom: 0; }

.m {
  display: none;
  position: fixed;
  inset: 0;
  background: white;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

.m a {
  padding: 20px;
  font-size: 2.5rem;
  font-weight:bold;
}

#t:checked ~ .m { display: flex; }
#t:checked ~ label span:nth-child(1) { top: 8px; transform: rotate(45deg); }
#t:checked ~ label span:nth-child(2) { bottom: 8px; transform: rotate(-45deg); }


/* SLIDE */

.s {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin:10% 0;
}

.b {
  flex: 0 0 250px;           
  scroll-snap-align: start;
  height: 200px;            
  border: solid lightgray 1px;   
  border-radius:5px;
  margin-right: 10px;       
}


/* DESKTOP */
@media (min-width: 768px) {
    
body {  padding:0 20%;}
li {    text-align: center; border:solid red 1px; padding-left: 30%; width:60%}
label{  top: 4%; right: 4%;}
}