/* 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." */

:root {
  --background-colour: #0043ae;
  --border-colour: #011e7a;
  --dark-border-colour: #031266;
  --darker-border-colour: #00093a;
  --red-colour: #ff022c;
}

body {
  background-color: #0043ae;
  color: white;
  font-family: Verdana;
  margin: 0;
}

h1 {
  text-align: center;
  margin: 0;
  font-size: 50px;
  text-shadow: #031266 4px 4px;
  text-transform: capitalize;
}

a {
  color: white;
}

a:hover {
  font-weight: bold;
}

.cut-overflow {
  overflow: hidden;
  /* padding: 2rem 1rem; */
}

.social-links {
  font-weight: bold;
}

.social-links:hover {
  color: white;
  font-weight: normal;
}

.directory-links {
  text-decoration: none;
}

.wrapper {
  width: 1100px; /* 900px */
  margin: auto;
  /* min-width: 1100px; */ 
  /* background-color: aliceblue; */
  /* background-size: contain; */
}

#headerlogo {
  position: static; /*sticky*/
  left: 219px;
}

.maintable {
  /* padding: 10px; */
  /* background-color: brown; */
  margin: 1% auto;
  border-collapse: collapse;
  /* border-color: #011e7a;
  border: 50px; */
  border-spacing: 0;
  width: 1100px;
  min-height: 1000px;
}

.leftbar, .rightbar {
  width: 20%;
  background-image: url(/images/graphics/navbox.png);
  background-repeat: repeat;
  /* background-color: #011e7a; */
  /* background-size: cover; */ 
  padding: 10px;
  border: 5px solid #031266;
  text-align: center;
}

.leftbar-hidden, .rightbar-hidden {
  width: 20%;
  padding: 10px;
  text-align: center;
}

.middlesection {
  width: 60%;
  background-size: cover; 
  padding: 10px 20px;
}

.center-text {
  text-align: center;
}

.right-align-text {
  text-align: right;
}

.center-image {
  margin: 10px auto 10px; display: block;
}

.footer {
  background-color: #031266;
}

td {
  vertical-align: top;
}

.nav-heading, .nav-alt-heading-grey, .nav-alt-heading-purple, .nav-alt-heading-yellow, .nav-alt-heading-green, .nav-alt-heading-cyan, .nav-alt-heading-blue, .nav-alt-heading-dark-blue {
  display: inline-block; 
  margin-bottom: 0; 
  padding: 5px; 
  text-shadow: #031266 2px 2px;
  text-transform: capitalize;
  /* border-style: ridge;
  border-collapse: separate; */
}

.nav-heading {
  border: 5px #ff022c ridge;
  background-image: url(/images/graphics/navheadings.png);
}

.nav-alt-heading-grey {
  border: 5px #787878 ridge; 
  background-image: url(/images/graphics/navaltheadings-grey.png);
}

.nav-alt-heading-purple {
  border: 5px #8002ff ridge; 
  background-image: url(/images/graphics/navaltheadings-purple.png);
}

.nav-alt-heading-yellow {
  border: 5px #feff02 ridge; 
  background-image: url(/images/graphics/navaltheadings-yellow.png);
}

.nav-alt-heading-green {
  border: 5px #80cc34 ridge; 
  background-image: url(/images/graphics/navaltheadings-green.png);
}

.nav-alt-heading-cyan {
  border: 5px #009590 ridge; 
  background-image: url(/images/graphics/navaltheadings-cyan.png);
}

.nav-alt-heading-blue {
  border: 5px #0043ae ridge; 
  background-image: url(/images/graphics/navaltheadings-blue.png);
}

.nav-alt-heading-dark-blue {
  border: 5px #031266 ridge; 
  background-image: url(/images/graphics/navbox.png);
}

.image-shadow {
  -webkit-filter: drop-shadow(3px 5px #011e7a);
  -moz-filter: drop-shadow(3px 5px #011e7a);
  -ms-filter: drop-shadow(3px 5px #011e7a); 
  -o-filter: drop-shadow(3px 5px #011e7a);
   filter: drop-shadow(3px 5px #011e7a); 
}

.image-shadow2 {
  -webkit-filter: drop-shadow(3px 5px #00093a);
  -moz-filter: drop-shadow(3px 5px #00093a);
  -ms-filter: drop-shadow(3px 5px #00093a); 
  -o-filter: drop-shadow(3px 5px #00093a);
   filter: drop-shadow(3px 5px #00093a); 
}

.date-and-time {
  margin-top: 0; font-size: small;
}

hr {
  height: 2px;
  background-color: #2176ff;
  border: none;
}

/* Courtesy of https://www.html-code-generator.com/css/speech-bubble-generator */
.bubble { 
  position: relative;
  background: #ffffff;
  color: #000000;
  font-family: Verdana;
  font-size: 16px;
  /* line-height: 90px; */
  text-align: center;
  width: 250px;
  height: 100px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 0 5px 0;
  border: #00093a solid 3px;
}
.bubble:after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  z-index: 1;
  border-style: solid;
  border-width: 20px 20px 0 0;
  border-color: #ffffff transparent transparent transparent;
  top: 75%;
  right: -20px;
  margin-top: -10px;
}
.bubble:before {
  content: '';
  position: absolute;
  width: 0;
  z-index: 0;
  border-style: solid;
  border-width: 23px 23px 0 0;
  border-color: #00093a transparent transparent transparent;
  top: 75%;
  right: -26px;
  margin-top: -13px;
  display: block;
}

.grow {
  -webkit-transition: all .1s ease-in-out; 
  -moz-transition: all .1s ease-in-out; 
  -o-transition: all .1s ease-in-out; 
  -ms-transition: all .1s ease-in-out;   
  transition: all .1s ease-in-out;   
}
.grow:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2); 
}

.pulsate-fwd {
	-webkit-animation: pulsate-fwd 1s ease-in-out infinite ;
	        animation: pulsate-fwd 1s ease-in-out infinite ;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-1-3 15:3:11
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation pulsate-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#splash-text {
  font-family: 'Courier New', Courier, monospace;
}

.text-shadow {
  text-shadow: #031266 2px 2px;
}

/* ---------------------------------------------------- */

.recommended-col {
  width: 45%;
  text-align: center;
}

.video-col {
  width: 35%;
  text-align: center;
  padding-top: 10px;
}

.blog-col {
  width: 20%;
  text-align: center;
  font-size: .8em;
  padding-top: 10px;
}

.small-table-heading {
  font-family: 'Courier New', Courier, monospace;
  font-size: large;
}

.small-text {
  font-size: small;
}

span {
  text-shadow: none;
  font-weight: normal;
}

span:hover {
  text-shadow: 0px 0px 20px gold;
  /* font-style: oblique; */
}

.center-element {
  width: 50%;
  margin: 0 auto;
}

.fixed-element {
  position: absolute;
}

.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.recommended-col img, .video-col img {
  -webkit-filter: drop-shadow(3px 3px #011e7a);
  -moz-filter: drop-shadow(3px 3px #011e7a);
  -ms-filter: drop-shadow(3px 3px #011e7a); 
  -o-filter: drop-shadow(3px 3px #011e7a);
  filter: drop-shadow(3px 3px #011e7a); 
} 

.recommended-col img:hover, .video-col img:hover {
  -webkit-filter: drop-shadow(0px 0px 5px gold);
  -moz-filter: drop-shadow(0px 0px 5px gold);
  -ms-filter: drop-shadow(0px 0px 5px gold);
  -o-filter: drop-shadow(0px 0px 5px gold);
  filter: drop-shadow(0px 0px 5px gold); 
}