@import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&display=swap');

/* reset? */
:where(:not(article) p) {
  margin:unset;
}

/* variables */
:root{
  --bg1: var(--green);
  --bg2: white;
  --bg-x:10vw;
  --bg-y:calc(var(--bg-x) * 0.5);
  --pad:1rem;
  --border:2px;
  --bor:calc(var(--border) * 0.5);
  --width: 400px;
  --contained: min(calc(var(--width) + (var(--pad) * 2) + (var(--border) * 2)),90%);
  --green: hsl(120deg 45% 56%);
}

/* background */
/*html {*/
/*  background-color:var(--bg1);*/
/*  background-image:*/
/*  radial-gradient(circle at 100% 150%, var(--bg1) 24%, var(--bg2) 24%, var(--bg2) 28%, var(--bg1) 28%, var(--bg1) 36%, var(--bg2) 36%, var(--bg2) 40%, transparent 40%, transparent),*/
/*  radial-gradient(circle at 0    150%, var(--bg1) 24%, var(--bg2) 24%, var(--bg2) 28%, var(--bg1) 28%, var(--bg1) 36%, var(--bg2) 36%, var(--bg2) 40%, transparent 40%, transparent),*/
/*  radial-gradient(circle at 50%  100%, var(--bg2) 10%, var(--bg1) 10%, var(--bg1) 23%, var(--bg2) 23%, var(--bg2) 30%, var(--bg1) 30%, var(--bg1) 43%, var(--bg2) 43%, var(--bg2) 50%, var(--bg1) 50%, var(--bg1) 63%, var(--bg2) 63%, var(--bg2) 71%, transparent 71%, transparent),*/
/*  radial-gradient(circle at 100% 50%, var(--bg2) 5%, var(--bg1) 5%, var(--bg1) 15%, var(--bg2) 15%, var(--bg2) 20%, var(--bg1) 20%, var(--bg1) 29%, var(--bg2) 29%, var(--bg2) 34%, var(--bg1) 34%, var(--bg1) 44%, var(--bg2) 44%, var(--bg2) 49%, transparent 49%, transparent),*/
/*  radial-gradient(circle at 0    50%, var(--bg2) 5%, var(--bg1) 5%, var(--bg1) 15%, var(--bg2) 15%, var(--bg2) 20%, var(--bg1) 20%, var(--bg1) 29%, var(--bg2) 29%, var(--bg2) 34%, var(--bg1) 34%, var(--bg1) 44%, var(--bg2) 44%, var(--bg2) 49%, transparent 49%, transparent);*/
/*  background-size: var(--bg-x) var(--bg-y);*/
/*}*/

html {
background:
    radial-gradient(var(--bg1) 3px, transparent 4px),
    radial-gradient(var(--bg1) 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
    #fff;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

body {
  color: black;
  font-family: 'Alef', sans-serif;;
  max-width:var(--contained);
  margin-inline:auto;
  background:var(--bg2);
}
  
h1 {
 text-align:center;
 text-wrap: balance;
 line-height:1;
 /*padding-block-start:var(--pad);*/
}
header,main,footer {
  padding:var(--pad);
  border-style: solid;
  border-inline-width:2px;
  border-block-width:1px;
}
header {
  border-block-start-width:2px;
}
footer {
  border-block-end-width:2px;
}
main > * + * {
  margin-block-start: 1em;
}
figure {
  /*width:var(--width);*/
  margin:unset;
  /*padding:1rem;*/
}
figure img {
  /*object-fit:cover;*/
  max-width:100%;
}
figcaption {
  margin-block-start:1rem;
}
hr {
  /*border-width:var(--border);*/
  border-style:solid;
}
.controller-wrapper {
  display:flex;
  justify-content:center;
  gap:calc(var(--pad) * 0.5);
}
.controller-wrapper button {
  --size:2rem;
  display: grid;
  place-items:center;
  width:var(--size);
  height:var(--size);
  padding:0;
  border-radius:50%;
  background: var(--green);
  border:var(--border) solid;
  color:black;
}
.controller-wrapper button:hover {
  cursor:pointer;
    background: white;
}
.controller-wrapper button svg {
  scale:1.25;
}
.status {
  text-align:center;
}