:root{
  --color1: rgb(0, 110, 210);
  --color2: rgb(30, 0, 100);
  --angle: 45deg;
}

html{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12pt;
  color: azure;

  text-wrap: wrap;
  hyphens: auto;
}

body{
  margin: 0%;
  height: 100%;
  bottom: 0;

  /*background-image: linear-gradient(var(--angle),  var(--color1), var(--color2));*/
  /*background-color: #131313;*/
  background-color: black;
  background-position: center;
  background-attachment: fixed;
  object-fit: cover;
  
}

h1, h2, h3{
  font-family:'Coda', Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 0;
  margin-bottom: .5em;
}

hr{
  color: azure;
  margin: 0 0 1em 0;
}

a{
  text-decoration: none;
  color: skyblue;
  transition: .25s;
}

a:hover{color: deepskyblue}


form{margin: 1em 0 1em 0;}
input{width: 100%;}
textarea{width: 100%; height: 10em;}


/* --- Navbar --- */
.navbar{
  z-index: 2;
  width: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.85);
  font-family: 'Coda', Verdana, Geneva, Tahoma, sans-serif;
}

.navbar ul{
  list-style-type: none;
  display: inline-block;
  margin: 0;
  padding-left: 5%;
  vertical-align: middle;
}

.navbar li{
  float: left;
  transition: .5s;
}

.navbar li a, .dropbtn{
  display: block;
  color: azure;
  text-align: left;
  padding: .75em;
  text-decoration: none;
  transition: .5s;
}

.navbar li > a:hover{
  color: black;
  background-color: azure;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  background-color: rgba(0, 0, 0, 0.85);
  color: azure;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: azure;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#active{
  background-color: azure;
  color: black;
}

/* --- End Navbar --- */

/* --- Grid Parameters --- */

/* Grid Column Types */
.grid-container{
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 1em;
  padding: 4em 5% 0em 5%;
}

.grid-full{grid-column: span 6;}
.grid-blog{grid-column: span 6;}
.grid-span{grid-column: span 4;}
.grid-half{grid-column: span 3;}
.grid-third{grid-column: span 2;}
.grid-small{grid-column: span 1;}

.grid-half-tall{grid-column: span 3; grid-row: span 2;}

.grid-thumbnail{grid-column: span 2; display: grid;}

.grid-thumbnail img{
  width: 100%;
  transition: .5s;
}
.grid-thumbnail img:hover{opacity: 85%;}

.grid-blog{
  height: 400px;
  width: 100%;
  /*border-radius: 5px;*/
  transition: .5s;
  background-position: center;
  background-size: cover;
}

.grid-blog > h2,
.grid-blog > h3{padding: 1em 1em 0em 1em; text-shadow: 0px 0px 3px black;}
.grid-blog > p{padding: 0em 1em 0em 1em; text-shadow: 0px 0px 3px black;}

.grid-blog:hover{opacity: 85%;}
.link {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.grid-container > div{position: relative;}
.grid-container > div video{width: 100%;}
.grid-container > div img{width: 100%;}


/* Thumbnail Overlays */
.overlay{
  display: grid;
  align-items: center;
  position: absolute;

  width: 100%;
  height: 100%;
  
  color: azure;
  text-align: center;
  font-family: 'Coda', monospace;
  text-decoration: none;

  opacity: 0;
  transition: .5s;
}

.overlay:hover{
  background-color: rgba(0, 0, 0, 0.7);
  color: azure;
  opacity: 1;
}

/* --- End Grid --- */

button{
  background-color: azure;
  border: none;
  color: black;
  margin-top: 1em;
  padding: 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;

  transition: .5s;
}

button:hover{
  background-color:deepskyblue;
  color: azure;
}

.footer{
  display: block;
  padding: 1em;
  position: relative;
  bottom: 0;
  text-align: center;
  width: auto;
}

.widget{height: 1em;}

#copyright{color: azure;}
#home-mobile{display: none;}

#foreground{
  object-fit: cover;
  position: fixed;
  top: 0; left: 0;
  z-index: -1;
  height: inherit;
  width: 100%;
  opacity: .15;
}

/* Specific Elements */

#about-text{font-size: 4em;}

#ogre-splash{font-family: OGRE 'Courier New', Courier, monospace; font-size: 8em; overflow-wrap: break-word;}
#ogre-specimen{font-family: OGRE, 'Courier New', Courier, monospace; font-size: 5em; overflow-wrap: break-word; word-break: break-all;}


/* Responsive Scaling */

/* Large Screens */

@media screen and (min-width: 3840px)
{
  .navbar ul{padding-left: 20%;}
  .grid-container{padding: 0em 20% 0em 20%;}
}

/* Mobile */

#menu-mobile{display: none;}
@media mobile, screen and (max-width: 1080px)
{
  html{font-size: 14pt;}

  #about-text{font-size: 2em;}

  #menu-mobile{display: inline-block;}
  .menu-web{display: none;}

  .grid-container{gap: .5em;}

  .grid-full{grid-column: span 6;}
  .grid-span{grid-column: span 6;}
  .grid-half{grid-column: span 3;}
  .grid-third{grid-column: span 6;}
  .grid-thumbnail{grid-column: span 3;}

  #ogre-splash{font-size: 2em;}
  #ogre-specimen{font-size: 2em;}


}

@font-face{
  font-family: "OGRE";
  src:  url("OGRE.otf") format("opentype"), 
        url("OGRE.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}