:root {
  --bluedeath: #0001a0;
  --lightblue: #F0F8FF;
  --yellow: #faed8f;
  --header-text: var(--bluedeath);
  --stars: var(--bluedeath);
  --star-content-empty: "☆";
  --star-content-full: "★";
  --decorator: var(--star-content-empty);
  --background-blue: #b5d2ed;
  --text: #001A58;
  --text-background: white;
  --link-text: #5C8DFF;
  --link-hover: var(--yellow);
  --alt-table-background: var(--lightblue);
  --dark-table-background: #D7ECFF;
}

body {
  background: var(--background-blue);
  font-family: "Candara", "Open Sans", sans-serif;
  font-size:16px;
  color: var(--text);
  }
  
a {
    color: var(--link-text);
    text-decoration: none
  }
  
a:hover {
  color: var(--link-hover);
  text-decoration: none
  }
  
h2, h3 {
  color: var(--header-text);
}

.shift-left {
  margin-left: -12px;
  padding: 0px;
}

.big-button {
  background-color: rgba(255, 255, 255, 0);
  border: none;
  color: var(--link-text);
  padding: 2px 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

button {
  background-color: rgba(255, 255, 255, 0);
  border: none;
  color: var(--link-text);
  padding: 6px 6px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

button:hover {
  color: var(--link-hover);
}
  
.border {
  background: white;
  border-bottom: 3px solid var(--bluedeath);
}
  
.tiny {
  font-size: 9px;
  margin: 0 auto;
  text-align: center;
  }
  
/*Everything in the main box goes in this*/
.wrapper {
  width: 1000px;
  border: 3px solid var(--bluedeath);
  margin: 0 auto;
  top: 0px;
  }
  
.header {
  background: var(--text-background);
  height: 70px;
  border-bottom: 3px solid var(--bluedeath);
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
  overflow: hidden;
  background-size:cover;
  vertical-align: middle;
  }
  
.long-header {
  background: var(--text-background);
  height: 70px;
  border-bottom: 3px solid var(--bluedeath);
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
  overflow: hidden;
  background-size:cover;
  vertical-align: middle;
  }

 /*If you want to use a smaller title or normal text, add .header p or .header h4 or whatever to the list*/
.header h2, .header h3, .header h1 {
  font-weight: bold;
  color: var(--header-text);
  text-align: center;
  border: 0px solid var(--bluedeath);
  opacity: 0.999999;
}

.header h2, .header h3, .long-header h1 {
  font-weight: bold;
  color: var(--header-text);
  text-align: center;
  border: 0px solid var(--bluedeath);
  opacity: 0.999999;
}

/*Navbar*/
.links {
  background: var(--text-background);
  padding: 10px;
  border-bottom: 3px solid var(--bluedeath);
  text-align: center;
  }
  
.links a {
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  font-size:17px;
  font-family: "Copperplate";
  }
  
/*Navigation links.*/
.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before {
  content: var(--decorator);
  color: var(--stars);
  }
  
.links li:after {
  content: "";
  }
  
.links .last:after {
  content: var(--decorator);
  color: var(--stars);
  }
  
.links li:before, .links li:after {
  letter-spacing: 0.1em;
  }

/*Fanvid Links*/
.mini-links ul {
  padding: 0;
  margin: 0;
}

.mini-links li {
  display: inline-block;
  text-align: left;
  }

.mini-links li:after {
  content: " ⋅ ";
  }
  
.mini-links .last:after {
  content: "";
  }

.main {
  padding: 15px;
  padding-bottom: 25px;
  margin: 0 auto;
  background: var(--text-background);
  }
  
.footer {
  background: var(--text-background);
  padding: 20px;
  padding-top:5px;
  padding-bottom:5px;
  border-top: 3px solid var(--bluedeath);
  font-size:14px;
  }
  
  
/*For narrow screens*/
@media (min-width: 596px) and (max-width: 1040px) {
  .wrapper {
    width: 95%;
    }
  }

@media (min-width: 481px) and (max-width: 595px) {
  .wrapper {
      width: 95%;
  }
  .long-header {
      height: 110px;
      padding-left: 85px;
      padding-right: 85px;
  }
  }

.moodCode {
    height: 80px;
    width: 90%;
    margin-left: -2px;
}

@media (max-width: 480px) {
    .wrapper {
        width: 95%;
    }
    .long-header {
        height: 110px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .tableMoods {
        font-size: 12px;
    }
    .mini-links li:after {
        content: "";
    }
}

.moodCode {
    height: 80px;
    width: 90%;
    margin-left: -2px;
}

/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
  border: 1px solid #DAECFF;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: var(--alt-table-background);
}

tr:nth-child(odd) {
  background-color: var(--text-background);
}

.tableIcons {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 0;
}

.tableIcons td, th {
  background-color: var(--text-background);
  text-align: left;
  padding: 6px;
}

.tableMoods {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 80px;
  background-color: var(--bluedeath);
  opacity: 1;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -40px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--bluedeath) transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
}