:root {
  --underlinecolorblue: rgba(69, 171, 239, 0.3);
  --underlinecolorred: rgba(252, 92, 101, 0.3);
  --underlinecolorblack: rgba(119, 140, 163, 0.3);

  --underlinestart: 0.1em;
  --underlineend: 0.35em;
  --underlinefontheight: 1.14em;
}

@import url('https://fonts.googleapis.com/css2?family=Suez+One&display=swap');

*{
  margin: 0;
  padding: 0;
}

body, html{
  height: 100%;
}

/*h1, h2, h3 {
  font-family: 'Suez One', serif;
  letter-spacing: 0.05em;
}*/

.aligncenter{
   text-align: center;
}

.full-width {
   width:100%;
}


.contentdiv {
  width: 80vw;
  margin: 30px 10vw;
  max-width: 1000px;
  text-align: center;
}

.fullwidthcontentdiv {
  width: 100vw;
  text-align: center;
  margin-top: 30px;
}


.fullwidthcontentdiv > h1, .fullwidthcontentdiv > h2, .fullwidthcontentdiv > h3, .fullwidthcontentdiv > p {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

.fullwidthcenter{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  width: 100%;
  overflow: hidden;
}

.contentdiv .justify {
  text-align: justify
}

a.design:link, a.design:visited { /* unvisited & visited link */
  color: #00b8ff;
}

a.design:hover, a.design:active {
  transition: all 0.1s;
  color: white;
  background-color: #00b8ff;
  border-radius: 4px;
  padding: 10px;
  margin: -10px;
  z-index: 5;
}

.numberedheader{
  text-align: left;
  margin-left: 2em;
}

.numberedheader-number{
  color: black;
  opacity: 0.1;
  font-size: 4em;
  z-index: -1;
  font-weight: bold;
  margin-bottom: -0.6em;
}

.numberedheader h2{
  margin-left: 15px;
}

.margintop{
  margin-top: 20px;
}
.marginbottom{
  margin-bottom: 20px;
}

.tourleveleasy .underlined,
.underlined.blue {
  display: inline;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent var(--underlinestart),
    var(--underlinecolorblue) var(--underlinestart),
    var(--underlinecolorblue) var(--underlineend),
    transparent var(--underlineend),
    transparent var(--underlinefontheight)
  );
}

.tourlevelmedium .underlined,
.underlined.red {
  display: inline;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent var(--underlinestart),
    var(--underlinecolorred) var(--underlinestart),
    var(--underlinecolorred) var(--underlineend),
    transparent var(--underlineend),
    transparent var(--underlinefontheight)
  );
}

.tourlevelhard .underlined,
.underlined.black {
  display: inline;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent var(--underlinestart),
    var(--underlinecolorblack) var(--underlinestart),
    var(--underlinecolorblack) var(--underlineend),
    transparent var(--underlineend),
    transparent var(--underlinefontheight)
  );
}