body {position: relative; width: auto; height: auto; --s: 0.3vw; --c:#eceaea 20% 30%; background: linear-gradient(135deg,skyblue 5%,var(--c),#0000 0), repeating-linear-gradient(45deg,var(--c),azure 0 70%); background-size: var(--s) var(--s);}
h1:not(.text){font-size: 3vw; color: darkblue; display: flex; justify-content: center; line-height: 1;}
h2:not(.text){font-size: 2vw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
.grid{display:grid; grid-template-columns: 1fr 2fr; grid-auto-rows: minmax(4vw auto); grid-gap:1vw;}
.grid1{display:grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(4vw auto); grid-gap:1vw;}
.grid2{display:grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(4vw auto); grid-gap:1vw;}
.grid3{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(4vw auto); grid-gap:1vw;}
h3{margin-left: 1vw; font-weight: 700;}
h4{ margin-left: 2vw;}
hr{height: 0.5vw;background:linear-gradient(45deg, lightgreen, burlywood, orange);}
.ex{margin-left: 2vw; text-decoration: underline;}
.spec-1{margin-left:2vw;}
.spec-2{margin-left:4vw;}
.spec-3{margin-left:6vw;}
pre{font-family: Arial, Helvetica, sans-serif; font-size: 1vw; color: darkgreen;border: none;}
.pre-1{width: 30vw;}
.pre-2{width: 40vw;}
button{display: block; margin-left: 4vw; background-color: lightgreen; color: black; width: 8vw; height: 2vw;}
em{ font-weight: 600; color: blue;}