body{
  background-image:linear-gradient(black 60%, maroon);
  text-align: center;
}
.title {
  font-size:50px;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  color:white;
}
.grid {
  display:grid;
  grid-template-columns:10% 80% 10%;
  gap:30px;
}
.col2 {
  grid-column:2;
  display:flex;
  justify-content: center;
}
.box {
  background-color:red;
  width:60%;
  min-width:450px;
  padding-bottom:-20px;
  border-radius: 20px;
  border:2px solid white;
  transition:transform 0.2s ease-in ease-out;
}
.box h1 {
  font-size:30px;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.box h2 {
  font-size:30px;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight:600;
  font-style:normal;
  text-align:right;
}
.box p {
  font-size:20px;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight:500;
  font-style:normal;
}
.row1 {grid-row:1;} .row2 {grid-row:2;} .row3 {grid-row:3} .row4{grid-row:4;} .row5{grid-row:5} .row6{grid-row:6;} .row7{grid-row:7;} .row8{grid-row:8;}.row9{grid-row:9;} .row10{grid-row:10;} .row11{grid-row:11;} .row12{grid-row:12;} .row13{grid-row:13;} .row14{grid-row:14;} .row15{grid-row:15;} .row16{grid-row:16;} .row17{grid-row:17;} .row18{grid-row:18;} .row19{grid-row:19;} .row20{grid-row:20;} .row21{grid-row:21;} .row22{grid-row:22;}
.row23{grid-row:23;} .row24{grid-row:24;} .row25{grid-row:25;}.row26{grid-row:26;} .row27{grid-row:27;} .row28{grid-row:28;} .row29{grid-row:29;} .row30{grid-row:30;} .row31{grid-row:31;} .row32{grid-row:32;} .row33{grid-row:33;} .row34{grid-row:34;} .row35{grid-row:35;} .row36{grid-row:36;} .row37{grid-row:37;} .row38{grid-row:38;} .row39{grid-row:39;} .row40{grid-row:40;} .row41{grid-row:41;} .row42{grid-row:42;} .row43{grid-row:43;} .row44{grid-row:44;} .row45{grid-row:45;} .row46{grid-row:46;} .row47{grid-row:47;} .row48{grid-row:48;} .row49{grid-row:49;} .row50{grid-row:50;} 
.round {
  border-radius:30px;
}
.toggle-input { display: none; }
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in ease-out;
}
.toggle-input:checked ~ .content {
  max-height: 500px;
}
.toggle-label {
  font-size:25px;
  text-decoration:underline;
}
a {
  font-size:20px;
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-weight:500;
  font-style:normal;
  color:black;
}
:root {
  --text: #e4e4e6;
  --accent: #7f5af0;
}
      nav {
        position: sticky;
        top: 0;
        z-index: 1000;`
        background: rgba(14,14,16,0.75);
        backdrop-filter: blur(12px);
        padding: 1rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        gap: 1.8rem;
        flex-wrap: wrap;
      }

      nav ul li a {
        text-decoration: none;
        color: var(--text);
        font-weight: 500;
        font-size: 1.1rem;
        transition: 0.25s ease;
        padding-bottom: 4px;
        border-bottom: 2px solid transparent;
      }

      nav ul li a:hover {
        color: var(--accent);
        border-bottom-color: var(--accent);