html {box-sizing:border-box;font-size:100%}
*,:after,:before{box-sizing:inherit}
body {background-color:#000;background-image:linear-gradient(#000 2%,#222 108%);color:#fff;min-height:100vh;text-align:center;font-family:Roboto,sans-serif}
.logo{width:400px}
a.featured:hover,a:hover{background-color:#222;color:#666}
a{display:block;max-width:400px;margin:0 auto 15px;padding:15px 20px;font-size:.85rem;color:#999;border:2px solid #999;text-decoration:none;transition:all .2s ease-in-out}
a.featured{position:relative;background-color:#fff;color:#000;font-weight:700}
a.featured:before{content:"";position:absolute;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid #000}
h1{font-size:16px;text-transform:uppercase;font-weight:400;letter-spacing:2px}
h2{font-size:14px;text-transform:uppercase;font-weight:400;letter-spacing:2px}
h3{font-size:12px;text-transform:uppercase;font-weight:400;letter-spacing:2px}
p{font-size:10px;text-transform:uppercase;font-weight:400;letter-spacing:2px}
.channels{display:flex;max-width:400px;margin:0 auto}
.channels a{flex:1;padding:5px 10px;margin-right:10px;background-color:#222;border:none}
.channels a:last-child{margin-right:0}
.channels a:hover{text-decoration:underline}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 400px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border:none;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  font-size:10px;
  text-transform:uppercase;
  font-weight:400;
  letter-spacing:2px
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}