:root {--g:#D41B67;}
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; text-align:center; font-size:1.6rem; background-color: #fafafa;}
main {  }
button {background:var(--g); border:none; border-radius:25px; padding:12px 24px; cursor:pointer;}
button a {color: white; font-size:1.5rem;} 
.l {    padding:6%; width:150px; height:150px}
.i {    width:250px; height:200px}
footer {font-size:1rem; margin-top:120px;}
.f {    color:dimgray;}

/* MENU */
#t { display: none; }
label { display: block; position: absolute; top: 3%; right: 8%; 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; font-size:1.6rem;}
.m a { padding: 20px; font-size: 3rem; 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; scrollbar-color:pink; height:210px}
.b { flex: 0 0 250px; scroll-snap-align: start; width:250px; height:200px; margin-right: 20px;}


/* ROTATE */
.r { animation: r linear both; animation-timeline: scroll(root block);}
@keyframes r {
    from { transform: rotate(3deg);}
    to   { transform: rotate(0deg);}
}

/* CODE */
.c {    background:#f4f4f4; padding:6px; border:1px solid #ccc; overflow-x:auto; text-align:left; width:96%;  margin: auto; font-size:1.2rem;}

/* 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%;}
.c {    width:40%;}
}