* {
  box-sizing: border-box
}

:active,
:focus {
  outline: none;
  -webkit-highlight: none;
  -webkit-tap-highlight-color: transparent
}

html {
  line-height: 1.15
}

body {
  margin: 0;
  padding: 0;
  font: normal 1rem/1.5 system-ui, sans-serif;
  color: #fff;
  background: #2c8e98
}

p {
  margin: 0 0 1rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  padding: 0
}

h1 {
  margin: 0 0 2rem;
  font-size: 2rem
}

h2 {
  display: flex;
  margin: 0 0 2.5rem;
  font-size: 1.5rem
}

h2:before {
  content: "class";
  display: block;
  margin: auto .6rem .4rem 0;
  padding: .25rem .2rem;
  font-size: .6rem;
  font-style: italic;
  font-weight: normal;
  line-height: 1;
  color: #3e7193;
  background: #fff;
  border-radius: .1rem
}

h3 {
  margin: 3rem 0 1rem
}

h3 span {
  font-weight: normal
}

main {
  display: block;
  max-width: 800px;
  margin: auto;
  padding: 5vh 1rem 0
}

section,
article {
  display: block;
  margin: 5rem 0
}

section button {
  display: block;
  margin: 1.5rem 0 0;
  padding: 1rem 1.5rem;
  font: inherit;
  font-size: .9rem;
  font-weight: bold;
  line-height: 1;
  color: #f5f5f5;
  background: #24304c;
  border: 0;
  border-radius: .3rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-highlight: none
}

section button:active,
section button:focus {
  color: #fff;
  background: #1c356c;
  outline: 0;
  -webkit-tap-highlight-color: transparent
}

section button:hover {
  opacity: .95
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  color: #222;
  background: #eee;
  border-radius: .5rem
}

.modal .content {
  min-width: 50vh;
  min-height: 25vh
}