* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box; 
}

:root {
  /* varialbles for frequent use */
  --cl-bghead:    #0b9b1e;
  --cl-bgnav:     rgb(255, 242, 199);
  --cl-bgarticle: rgb(0, 225, 255);
  --cl-bgaside:   rgb(255, 216, 131);
  --cl-bgaside2:  rgb(255, 184, 31);
  --cl-bgfoot:    #0a6320;
}

#background-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }

body {
    background-color: #333;
}

#mainbody {
  display: flex;
  flex-flow: row wrap;
  min-height: calc(100vh - 200px)
}

article {
  display: flex;
  background-color: rgba(0, 225, 255, .4);
  border: 25px groove blue;
  width: calc(80% - 100px);
  height:calc(100vh - 200px);
  margin: 25px;
}

article h1 {
  text-align: center;
  margin-left: 35%;
  font-size: 300%;
}

aside {
  width: 100%;
  height: 50vh;
  display: flex;
}

.aside1 {
  display: flex;
  background-color: rgba(0, 225, 255, .4);
  border: 25px groove blue;
  width: calc(50% - 50px);
  height: 50vh;
  margin: 25px;
}

.aside2 {
  display: flex;
  background-color: rgba(165, 23, 23, 0.4);
  border: 25px groove red;
  width: calc(50% - 50px);
  height: 50vh;
  margin: 25px;
}

.navigation {
  background-color: rgba(165, 23, 23, 0.4);
  border: 25px groove red;
  height:calc(100vh - 200px);
  width: 20%;
  margin: 25px;
}

.navigation h2 {
  font-size: 300%;
}

nav a {
  display:inline-block;
  width: 80%; height: 45px;
  background-color: rgba(0, 0, 0, .4);
  margin: 10px;
  justify-content: center;
}

footer {

  background-color: rgba(255, 0, 242, 0.4);
  width: 100%;
}



















    /* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

a:hover {
  color: hotpink;
}

a:active {
  color: blue;
}

.navbar {
  overflow: hidden;
  background-color: rgba(0, 225, 255, .7);
  font-family: Arial;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; 
  margin: 0; 
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(204, 59, 59, 0.8);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: rgb(255, 73, 73);
}

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