/* Fonts */
@font-face {
  font-family: "Buck Spark";
  src: url(/fonts/BuckSparkLight.woff2);
  font-weight: normal;
}
@font-face {
  font-family: "Buck Spark";
  src: url(/fonts/BuckSparkRegular.woff2);
  font-weight: bold;
}

/* Variables */
:root {
  /* Text Shadows */
  --text-shadow-heading:       1px 1px 5px rgba(0, 0, 0, 0.2);
  --text-shadow-body:          1px 1px 3px rgba(0, 0, 0, 0.2);
  --text-shadow-other:         1px 1px 2px rgba(0, 0, 0, 0.4);
  
  /* Box Shadows */
  --main-box-shadow:           1px 1px 5px rgba(0, 0, 0, 0.34);
  --input-box-shadow:          1px 1px 5px rgba(0, 0, 0, 0.25);
  --input-focus-box-shadow:    0px 0px 20px #80dcc9;
  --hover-box-shadow:          1px 1px 10px rgba(0, 0, 0, 0.34);

  --input-bg:                  linear-gradient(to top, #80dcc9, #ffffffc2);

  --form-submit-btn-bg:        linear-gradient(to top, #012e39, #004457);
  
  --foreground-color-alt-1:   #5ad8ff;
  --foreground-color-alt-2:   #00fff9;

  --search-btn-bg:              linear-gradient(to top, #1cdfb5 0%, #80dcc9 100%);

  --grid-cat-content-bg:        linear-gradient(163deg, rgb(0 0 0 / 47%) 0%, rgb(0 0 0 / 69%) 100%);
  --grid-item-content-bg:       linear-gradient(163deg, rgb(186 218 255 / 47%) 0%, rgb(255 255 255 / 69%) 100%);

  --menu-link-hover-bg:         linear-gradient(199deg, #1ad3af, #067b7e);

  --box-border-radius:          0.2rem;
  --input-border-radius:        0.25rem;

  /* Headings and Paragraphs */
  --heading-color:              var(--foreground-color-alt-2);
  --heading-font-family:        sans-serif;
  
  --heading-size-h1:            1.7rem;
  --heading-size-h2:            1.5rem;
  --heading-size-h3:            1rem;
  --heading-size-h4:            1rem;
  --heading-size-h5:            1rem;

  --heading-weight-h1:          600;

  --p-font-family:              sans-serif;

  /* Devices */
  --desktop-device-min-width:   800px;
  --desktop-content-max-width:  1200px;
  --desktop-content-width:      100vw;
}

/* Common Elements */
html {
  font-size: 16.6px;
  font-family: var(--p-font-family), Tahoma, Geneva, Verdana, sans-serif;
  background: #000c15;
  line-height: 1rem;
}

body {
  padding: 0;
  margin: 0;
}

a {
  color: var(--foreground-color-alt-2);
  line-height: 1;
  display: inline-block;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 1rem;
  background: linear-gradient(45deg, #0c282c, #000000);
  background-attachment: fixed;
  color: #fff;
  overflow: hidden;
}

h1,
h2, 
h3, 
h4, 
h5 {
  font-family: var(--heading-font-family);
  line-height: 1em;
}

h1 {
  text-shadow: var(--text-shadow-heading);
  margin: 0;
  font-size: var(--heading-size-h1);
  margin-top: 2rem;
}

h2 {
  font-size: var(--heading-size-h2);
}

h3 {
  font-size: var(--heading-size-h3);
}

h4 {
  font-size: var(--heading-size-h4);
}

h5 {
  font-size: var(--heading-size-h5);
}

h1, h2, h3, h4, h5 {
  color: var(--heading-color);
}

p {
  text-shadow: var(--text-shadow-body);
}

p.breadcrumbs {
}

p.breadcrumbs a {
  text-decoration: none;
}

div#PageTitle {
  display: flex;
  flex-direction: column-reverse;
  padding: 2.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 5;
}

main::before {
  content: ' ';
  width: 100vw;
  height: 50vh;
  transform: rotate(145deg);
  background: linear-gradient(145deg, #01037b 0%, #f8008b 100%);
  position: fixed;
  top: -32vh;
  box-shadow: 10px 10px 100px rgba(123, 1, 93, 0.5);
  z-index: 0;
  border-top: 1px solid #f800dd;
}

body::before {
  content: ' ';
  width: 140vw;
  height: 70vh;
  transform: rotate(195deg);
  background: linear-gradient(145deg, #01147b 0%, #00ecf8 100%);
  position: fixed;
  top: -20vh;
  left: -20vw;
  box-shadow: 10px 10px 100px rgb(1, 54, 123);
  z-index: 0;
  border-top: 1px solid #00a7f8;
}

main > * {
  position: relative;
  z-index: 5;
}

@media only screen and (min-width: 1024px) {
  main {
    padding: 4rem 5vw;
  }
    
}


@media only screen and (min-width: 760px) {

    main::before {
      width: 50vw;
      height: 50vh;
    }
    
    body::before {
      width: 70vw;
      height: 70vh;
      left: 0;
    }
}

.hidden {
  display: none;
}

/**
 * Predictive Inputs & Options
 */

div.predictive-options {
  position: absolute;
  z-index: 2;
  border: 1px solid;
  background: rgba(0,0,0,0.8);
  margin-top: 4rem;
}

div.predictive-options > div {
  cursor: pointer;
  padding: 0 0.5rem;
  line-height: 2;
  border-bottom: 1px solid;
}

div.predictive-options > div:hover {
  background-color: #004457;
}

/**
 * Forms
 */
form input[type=input],
form input[type=search],
form input[type=password],
form input[type=number],
form select,
form textarea {
  line-height: 2rem;
  border-radius: var(--input-border-radius);
  border: 0;
  margin: 0.5rem 0 0;
  background: var(--input-bg);
  padding: 0 0.5rem;
  box-shadow: var(--input-box-shadow);
  font-family: sans-serif;
}

form select {
  padding: 0.5rem;
}

form input[type=input]:focus,
form input[type=search]:focus,
form input[type=password]:focus,
form input[type=number]:focus,
form select:focus,
form textarea:focus,
form button:focus {
  outline: none;
  box-shadow: var(--input-focus-box-shadow);
  border: 2px solid var(--foreground-color-alt);
}

form input[type=input][readonly=readonly] {
  background: transparent;
  color: rgba(255,255,255,0.85);
  box-shadow: none;
  padding: 0;
}

form button {
  line-height: 1.8rem;
  border-radius: var(--input-border-radius);
  border: 0;
  margin: 0.5rem 0 0;
  background: var(--form-submit-btn-bg);
  padding: 0 1rem;
  box-shadow: var(--main-box-shadow);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

#SearchInputContainer {
  backdrop-filter: brightness(0.8) blur(50px);
  border-radius: var(--box-border-radius);
  overflow: hidden;
  padding: 1rem 3rem;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  border: 1px solid rgba(255,255,255,0.5);
  box-sizing: border-box;
  margin-bottom: 1rem;
}

#SearchInputContainer form {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  flex: 1;
}

#SearchInputContainer form button {
  margin: 0;
  padding: 0.5rem 2rem;
  background: var(--search-btn-bg);
  text-shadow: var(--text-shadow-body);
  cursor: pointer;
  transition: all 333ms;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 200;
  box-sizing: border-box;
}

#SearchInputContainer form button:hover {
  background: var(--search-btn-bg);
}

#SearchInput {
  margin: 0;
  flex: 1;
  padding: 0 1rem;
  margin-right: 0.5rem;
  text-align: center;
}

#SearchInput:focus {
  border: 2px solid var(--foreground-color-alt);
}

div.component-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 20rem;
  max-width: 30vw;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--box-border-radius);
  position: relative;
  backdrop-filter: brightness(0.85) blur(10px);
  border-top: 1px solid rgb(19 47 43 / 23%);
  border-bottom: 1px solid rgb(137 193 185 / 42%);
}

div.component-form.alt-form {
  padding: 0;
}

div.component-form.alt-form label {
  text-align: left;
  padding: 0 0.75rem;
  color: #1cdfb5;
}

div.component-form pre {
  text-shadow: var(--text-shadow-other);
  overflow: scroll;
  backdrop-filter: brightness(0.5);
  padding: 0.75rem;
}

div.component-form div.component-form-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0.5rem 0;
  position: relative;
}

div.component-form div.component-form-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 2.5rem;
}

div.component-form div.component-form-buttons > * {
  cursor: pointer;
}

/**
 * Tables
 */

table {
  border-spacing: 0;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--box-border-radius);
  overflow: hidden;
  min-width: 80%;
  backdrop-filter: brightness(0.85) blur(10px);
}

table th,
table td {
  padding: 0.6rem;
  text-align: center;
}

table thead tr th.wide,
table tbody tr th.wide,
table tbody tr td.wide {
  min-width: 30%; 
  text-align: left;
}

table th:last-of-type,
table td:last-of-type {
  text-align: right;
}

table tbody th:nth-of-type(0),
table tbody td:nth-of-type(0),
table tbody th:nth-of-type(1),
table tbody td:nth-of-type(1),
table thead tr th:nth-of-type(0),
table thead tr th:nth-of-type(1),
table thead tr th:nth-of-type(2) {
  text-align: left;
}

table tbody tr:hover th,
table tbody tr:hover td {
  background-color: rgba(0,0,0,0.5);
}

table thead {

}

table thead tr th {
  background-color: rgb(33,33,33, 0.5);
  color: rgba(255,255,255,0.90);
  font-weight: 100;
  padding-top: 1rem;
}

table tbody {

}

table tbody tr th,
table tbody tr td {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
  font-weight: 100;
  vertical-align: baseline;
}

table tbody tr th {

}

table tbody tr td {

}

table tbody tr th.view-link,
table tbody tr td.view-link {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  padding: 0;
}

table tbody tr th.view-link a,
table tbody tr td.view-link a {
  display: flex;
  flex: 1;
  padding: 0.6rem;
}

/**
 * Content Grid & Category List Wrapper
 */
section.content-grid {
  width: 100%;
}

section.content-grid h2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

div.category-list-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  margin: 1rem 0;
  max-width: 1200px;
  width: 100vw;
  position: relative;
  z-index: 2;
}

ol.category-list,
section.content-grid ol.content-list {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  margin: 0 0 2rem;
}

ol.category-list li,
section.content-grid ol.content-list li {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: stretch;
  width: 50%;
}

ol.category-list li a,
section.content-grid ol.content-list li a {
  display: flex;
  flex: 1;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0.25rem;
  box-shadow: var(--main-box-shadow);
  border-radius: var(--box-border-radius);
  background: var(--grid-content-item-bg);
  transition: all 333ms;
  aspect-ratio: 16 / 6;
  text-shadow: var(--text-shadow-other);
  color: #ffcf00;
  font-weight: 500;
  text-decoration: none;
}

ol.category-list li a {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 1rem;
  padding: 1rem;
  box-shadow: var(--main-box-shadow);
  border-radius: var(--box-border-radius);
  background: var(--grid-cat-content-bg);
  transition: all 333ms;
  aspect-ratio: 16 / 6;
  text-shadow: var(--text-shadow-other);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 4px solid;
  backdrop-filter: brightness(0.75) blur(10px);
}

section.content-grid ol.content-list li a {
  background: rgba(0,0,0,1);
  color: #fff;
  /* border: 1px solid #5ad8ff; */
  aspect-ratio: 16/9;
  position: relative;
  margin-bottom: 4rem;
  color: rgb(255,255,255,0.5);
}

ol.category-list li a, 
ol.content-list li a,
section.content-grid ol.content-list li a {

  /*background: linear-gradient(45deg, #01757b 0%, #00ecf8);*/
  background: #000;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  display: flex;
  padding: 1rem;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--box-border-radius);
  line-height: 2rem;
  display: flex;
  flex: 1;
  cursor: pointer;
  font-weight: 400;
  font-family: var(--heading-font-family);


  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 2px solid;
  border-color: #00fffd;
}

section.content-grid ol.content-list li a div.item-overlay {
  display: flex;
  opacity: 0;
  transition: all 333ms;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #60004a, #01328c);
  padding: 1rem;
  border-radius: var(--box-border-radius);
  border: 2px solid #ff07aa;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-bottom: 0;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1em;
}

ol.category-list li a:hover {
  color: var(--foreground-color-alt);
}

ol.category-list li a:hover, 
ol.content-list li a:hover,
section.content-grid ol.content-list li a:hover {
    background-color: rgba(0,0,0,0.5);
}

section.content-grid ol.content-list li a:hover {
  background: rgba(0,200,200,0.5);
  box-shadow: var(--hover-box-shadow);
}

section.content-grid ol.content-list li a:hover div.item-overlay {
  opacity: 1;
}

section.content-grid ol.content-list li a div.item-overlay > span:nth-of-type(2) {
  font-size: 1rem;
  margin-top: 1rem;
  opacity: 0.8;
}

ol.category-list li a span,
section.content-grid ol.content-list li a span {
  font-weight: 200;
}

section.content-grid ol.content-list li a div.item-info > div:first-of-type > span {
  font-weight: 400;
  color: #fff;
}

section.content-grid ol.content-list li a div.item-info > div:first-of-type > span:nth-of-type(2) {
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #00fff7;
}

ol.category-list li a span {
  color: rgba(255,255,255,0.5);
}

section.content-grid div.item-info {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0.5rem 0.35rem 0;
  line-height: 1rem;
  color: rgba(255,255,255,0.75);
}

section.content-grid ol.content-list li a:hover {
  color: rgba(255,255,255,0.9);
}

section.content-grid ol.content-list li a:hover div.item-info {
  color: rgba(255,255,255,1);
}

section.content-grid div.item-info > div {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

section.content-grid div.item-info > div > span {
  display: flex;
  height: 2em;
  line-height: 2em;
}

section.content-grid div.item-info {

}

/**
  sidebar
*/
section#sidebar {
  padding: 0;
}

div#watchlive {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.sidebar-button {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  border-radius: var(--box-border-radius);
  overflow: hidden;
}

section#sidebar a.button img {
  border-radius: var(--box-border-radius) var(--box-border-radius) 0 0;
  max-width: 100%;
}

.sidebar-button {
  background: linear-gradient(45deg, #36cef4, #2773b0);
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  display: flex;
  padding: 1rem;
  border-bottom: 1px solid #00fffd;
  border-right: 1px solid #00bbba;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--box-border-radius);
  box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.95);
  line-height: 2rem;
  display: flex;
  flex: 1;
  cursor: pointer;
  font-weight: 400;
  font-family: sans-serif;
  font-size: 1.2rem;
}

.sidebar-button span:nth-of-type(2) {

}

a.sidebar-button-container {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.sidebar-button a.sidebar-button-container {
  display: flex;
}

section#sidebar h2 {
  margin: 1rem 0;
  padding-top: 1rem;
}

/**
  Blog Articles
*/
div.blog-article {
  margin-bottom: 2rem;
  border-bottom: 1px solid #ffffff50;


  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.34);
  border-radius: 0.25rem;
  background: linear-gradient(163deg, rgb(0 0 0 / 47%) 0%, rgb(0 0 0 / 69%) 100%);
  transition: all 333ms;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: #17b3d1;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 4px solid;
  display: flex;
  flex-direction: column;
  backdrop-filter: brightness(0.85) blur(10px);
  overflow: hidden;
  background-size: cover;
  margin-bottom: 2rem;
}

div.blog-article h2 {
  margin-bottom: 0.75rem;
  margin-top: 0;
}

div.blog-article p.article-meta {
  color: #ffffff99;
  font-weight: 100;
  margin-top: 0;
  margin-bottom: 0;
}

div.blog-article header {
  padding: 1rem;
}

div.blog-article header a,
p.breadcrumbs a,
h1 a {
  display: inline-block;
  text-decoration: none;
}

div.blog-article content {
  background: linear-gradient(to bottom, #0086a2 0%, #4c0060 1000px, #4c0060 100%);
  background-size: 100vh 160vh;
  border-top: 1px solid #0894a9;
  color: rgba(255, 255, 255, 0.8);
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 1rem 0;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  background-position: top;
  position: relative;
  font-size: 1.2rem;
  line-height: 1.3;
}

div.blog-article content p {
  margin-top: 0;
  line-height: 1.38;
}

div.blog-article content ul {
  margin-top: 0;
}

div.blog-article content ul li {
  margin-bottom: 0.5rem;
}

div.blog-article content h2, 
div.blog-article content h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  margin-top: 1rem;
}


div.blog-article aside {
  display: flex;
}

div.blog-article aside img {
  max-width: 100%;

}

div.blog-article footer {
  
}

@media only screen and (min-width: 800px) {
  main {
    padding: 4rem 1rem;
  }

  section.content-grid {
    max-width: var(--desktop-content-max-width);
    width: var(--desktop-content-width);
  }
  
  ol.category-list,
  section.content-grid ol.content-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  ol.category-list li,
  section.content-grid ol.content-list li {
    max-width: 25%;
    width: 25%;
  }

  ol.category-list li a,
  section.content-grid ol.content-list li a {
    margin: 1rem;
  }

  section.content-grid ol.content-list li a {
    margin: 1rem 1rem 4rem;
  }

  div.category-list-wrapper,
  section.content-grid div.content-list-wrapper {
    margin: 2rem 0;
  }

  #SearchInputContainer {
    width: 30vw;
    min-width: 25rem;
    padding: 1rem;
  }
  
  ol.category-list li a span, 
  section.content-grid ol.content-list li a span {

  }

  section.content-grid ol.content-list li a div.item-overlay {
    font-size: 1.8rem;
  }
  
  div.blog-article {
    max-width: 800px;
  }
}