html {
 font-size: 6.25%;
}

body {
 font-size: 20rem;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

* {
 box-sizing: border-box;
}

header {
 position: relative;
 display: inline-flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 20px;
 width: 100%;
 height: 72px;
 box-sizing: border-box;
 overflow: hidden;
 margin-bottom: 20px;
 margin-top: -8px;
}

header #logo {
 display: inline-block;
 width: 50px;
 height: 50px;
 margin-right: 10px;
 /* border: 1px solid red; */
}

header #logo:hover {
 animation: spin 4s linear infinite;
}

header #logo a:hover {
 border: none;
}

@keyframes spin {
 100% {
  transform: rotate(360deg);
 }
}

header brand a,
header brand a:link,
header brand a:hover,
header brand a:visited {
 color: teal;
 border: none;
}

header brand a:hover {
 color: indianred;
}

header brand a:active {
 color: dodgerblue;
}

.logoSvg {
 fill: teal;
 /* fill: hsla(180, 100%, 25%, 1); */
}

.logoSvg:hover {
 /* fill: dodgerblue; */
 fill: hsla(180, 100%, 25%, 0.7);
}
.logoSvg:active {
 fill: indianred;
}

header brand {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 color: teal;
 /* font-family: Arial, Helvetica, sans-serif; */
 font-size: 28rem;
 font-weight: bold;
 line-height: 60px;
}

header brand span {
 font-size: 22rem;
 font-family: sans-serif;
 font-weight: normal;
 margin-left: 10px;
 color: maroon;
}

.navBarLines {
 cursor: pointer;
 transform: scale(0.8);
}

.navBarLine1,
.navBarLine2,
.navBarLine3 {
 width: 35px;
 height: 5px;
 background-color: #333;
 margin: 6px 0;
 transition: 0.4s;
}

.navBarLineChange .navBarLine1 {
 transform: translate(0, 11px) rotate(-45deg);
}

.navBarLineChange .navBarLine2 {
 opacity: 0;
}

.navBarLineChange .navBarLine3 {
 transform: translate(0, -11px) rotate(45deg);
}

.navBarLineColor {
 background-color: maroon;
}

nav {
 display: none;
 position: absolute;
 width: 300px;
 top: 52px;
 /* top:50px; */
 right: -400px;
 max-height: 700px;
 padding: 10px;
 z-index: 999;
 overflow: scroll;
 background-color: whitesmoke;
 border: 1px solid teal;
}

.navChange {
 display: block;
 animation: slideIn 1s forwards;
 animation-delay: 0s;
}

@keyframes slideIn {
 100% {
  right: 30px;
 }
}

.navSubMenu::before {
 content: '\25B8';
 padding-right: 5px;
 margin-left: 10px;
}

nav div {
 display: none;
}

.navSubMenuToggle {
 display: block;
}

nav a,
nav a:link,
nav a:visited {
 color: black;
 text-decoration: none;
 box-sizing: border-box;
 margin: 0 20px;
 padding: 0px 10px;
 width: 250px;
 height: 40px;
 line-height: 40px;
}

nav a:hover {
 color: teal;
 /* border-bottom: 1px dotted red; */
 /* background-color: hsl(180, 100%, 25%); */
 background-color: teal;
 border-radius: 0 20px 20px 0;
 color: white;
 /* padding-left: 20px; */
}

a,
a:link,
a:visited {
 color: SteelBlue;
 text-decoration: none;
 box-sizing: border-box;
 height: 20px;
}

a:hover {
 color: teal;
 /* background-color: teal; */
 border-bottom: 1px solid red;
}

a:active {
 color: dodgerblue;
}

nav a {
 display: block;
 padding: 4px;
 font-size: 20rem;
}

footer {
    margin-top: auto;
 /* margin-top: 270px; */
 padding: 10px 20px;
 font-size: 16rem;
 background-color: whitesmoke;
 color: dimgray;
}

footer menu {
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 /* margin-bottom: 0px; */
}

footer a,
footer a:link {
 /* margin-top: -610px; */
 /* margin-left: 0px; */
 margin-right: 20px;
 font-weight: normal;
 color: dimgray;
}

footer copy {
 display: block;
 /* margin-top: 10px; */
 /* margin-bottom: 50px    ; */
 font-weight: normal;
 color: dimgray;
}

.mainHome {
 margin: auto;
 width: 90%;
 height: 620px;
 /* height: 100%; */
 padding: 20px 40px;
 /* border: 2px solid red; */
 overflow: hidden;
 color: white;
 background-color: black;
}

.mainHome iframe {
 display: block;
 margin: auto;
 width: 100%;
 height: 540px;
 /* height: 100%; */
 overflow: hidden;
 color: white;
 border: 2px solid green;
}

.homeSplash {
 display: flex;
 justify-content: start;
 align-items: center;
 /* border: 4px solid pink; */
 padding: 10px;
 overflow: hidden;
}

.homeSplashText {
 display: block;
 margin: auto;
 margin-top: -20px;
 padding: 100px;
 font-size: 24px;
 /* background: red; */
 /* border: 4px solid white; */
}

.homeSplashImage {
 /* border: 2px solid cyan; */
 /* margin-left: -120px; */
 margin-top: -50px;
 width: 400px;
 height: 400px;
}