* {
  margin: 0;
  padding: 0;
  box-sizing:  border-box;
  font-size: 100%;
  font-weight: normal;
}


h1 {
  font-size: 22px;
  margin-bottom: 20px;
  font-family: 'IBM Plex Mono', monospace;
  z-index: 888;

}

h2 {
  font-size: 16px;
  margin-bottom: 100px;
  font-family: 'IBM Plex Mono', monospace;
  font-style: italic;
  z-index: 888;
}

body {
  background-color: whitesmoke;
  margin:  20px 50px;
  padding: 20px 20px;
}

h3 {
  font-size: 72pt;
  line-height: 0.9;
  word-break: keep-all;
  z-index: 888;
}

h3.bluu {
  font-family: Bluu;
}

h3.picnic {
  font-family: Picnic;
}

h3.apfelgrotezk {
  font-family: ApfelGrotezk;
}

h3.compagnon {
  font-family: Compagnon;
}

h3.halibutserif {
  font-family: HalibutSerif;
}

h3.knewave {
  font-family: Knewave;
}


h3.mattone {
  font-family: Mattone;
}


article {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  max-width: 90ch;
  line-height: 1.5;
  padding-top: 100px;
  padding-bottom: 20px;
  z-index: 999;

}

b {
  font-weight: 600;
}

a {
  color: olive;
}

a:hover {
  color: darkkhaki;

}

.active {
  background-color: orangered;
}

footer {
  font-size: 11px;
  margin-top: 40px;
  position: fixed;
  left: 20;
  bottom: 0;
  padding-bottom: 40px;
}

.scoop {
        position: absolute;
        top:  50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 500px;
      }

.base {
  position: absolute;
  z-index: 777;
  bottom: 0;
  left: 450px;
  width: 300px;
  height: 300px;
  background-image:
      linear-gradient(229deg, rgba(255,250,205,0.8), rgba(255,255,0,0) 70.71%),
      linear-gradient(127deg, rgba(220,20,60,0.8), rgba(178,34,34,0) 70.71%),
      linear-gradient(336deg, rgba(250,128,114,0.8), rgba(220,20,60,0) 70.71%);
    border-radius: 60%;
}


.topping {

}


.border {
  border-style: solid;
  border-width: 2px;
  margin-top: 100px;
  margin-bottom: 140px;
  border-color: gainsboro;


}