:root {
  --blue-dark: #0c3677;
  --blue-med: #066392;
  --blue-light: #67b3c3;
  --blue-pale: #bddfe6; }

html {
  background: url("/images/btvs-background.jpg") no-repeat top fixed, var(--blue-dark);
  background-size: cover; }

body {
  padding: 2%; }

* { box-sizing: border-box; }

#header {
  text-align: center;
  color: var(--blue-pale);
  font-family: sans-serif;
  font-size: 1.5em; }

#links {
  position: relative; }

#db {
  width: 96%;
  background: white;
  margin: 5px; /* match outline below */
  border-radius: 48px;
  padding: 10px 25px 10px 25px;
  outline: 5px dotted var(--blue-pale); }

.link {
  position: absolute; }

.link:hover {
  border-bottom: 5px dotted var(--blue-pale); }

.btvs {}

.ats {
  right: 0px;
  top: 50px; }

.themes {
  left: 44%;
  top: 100px; }

.parallels {
  top: 200px;
  left: 19%; }

.airdate {
  top: 310px;
  right: 200px; }

.linkpic {
  width: 100%;
  height: auto; }

.linktext {
  position: absolute;
  top: 44%;
  width: 100%;
  text-align: center;
  color: white; }

.square {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: var(--blue-light); }

.circle {
  position: relative;
  height: 100px;
  width: 100px;  
  background-color: var(--blue-light);
  border-radius: 50%; }