body {
  background-color: #020408;
  color:            #f3f6fb;
  font-family:      sans-serif;
  font-size:        16pt;
  margin:           0;
  display:          flex;
  justify-content:  center;
}
header {
  margin-top:       10pt;
  margin-bottom:    30pt;
}
footer {
  margin-top:       80pt;
  font-size:        12pt;
  text-align:       center;
  border-top:       1px solid #333;
  padding-top:      2pt;
}
p {
  line-height:      1.6;
}
h4 {
  margin-top:       30pt;
  margin-bottom:    8pt;
}
a {
  color:            lightblue;
}
a:visited {
  color:            lightblue;
}

/* App Name */
.app-name {
  font-size:        18pt;
  font-weight:      bold;
}

/* Container */
.container {
  width:            800pt;
  padding:          10pt;
}
@media (max-width:  820px) {
  .container {
    width:          90%;
  }
}

/* Carousel */
.carousel {
  position:         relative;
  width:            100%;
  overflow:         hidden;
}
.carousel img {
  width:            100%;
  display:          none;
}
.carousel img.active {
  display:          block;
}

/* Arrow buttons */
.prev, .next {
  position:         absolute;
  top:              50%;
  transform:        translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color:            white;
  border:           none;
  width:            40pt;
  height:           40pt;
  cursor:           pointer;
  border-radius:    50%;
  font-size:        20pt;
  display:          flex;
  align-items:      center;
  justify-content:  center;
}
.prev { 
  left:             10pt;
}
.next { 
  right:            10pt;
}