ViewportNewbProj.css

/*this is a test for flexbox and grid*/
/*ABLS Color Palette - lightest to darkest
1 - #eeeeee
2 - #eaffc4
3 - #b6c399
4 - #6a856a
5 - #333333*/

body {
  background-color: #333333;
  font-family: monospace;
}

#Stripes {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
  /*rgba(51, 51, 51, 1),
  rgba(51, 51, 51, 1) 2px,*/
    #6a856a,
    #6a856a 2px,
    transparent 2px,
    transparent 4px
    );
}

.area-a {
  grid-area: header;
  text-align: center;
  font-size: 75px;
  color: #b6c399;
}

.area-b {
  grid-area: topNav;
  text-align: center;
}

input[type=radio] {
  display: none;
}

input + label {
  color: #b6c399;
  display: inline-block;
  padding: 50px 20px 2px 20px;
}

.area-c {
  grid-area: LNav;
  font-size: 75px;
  color: #b6c399;
padding: 50% 0%;
text-align: center;
}

.area-d {
  grid-area: RNav;
  font-size: 75px;
  color: #b6c399;
  padding: 50% 0%;
  text-align: center;
}

.area-e {
  grid-area: BotNav;
}

.area-f {
  grid-area: Vp;
  border-style: solid;
  border-width: medium;
  border-radius: 10px;
  border-color: #b6c399;
}

.area-g {
  grid-area: spacer;
}

.area-h {
  grid-area: footer;
}

.container {
  display: grid;
  width: 100%;
  grid: [row1-start]". header header header ." 3fr [row1-end]
  [row1-start]". . topNav . ." 1fr [row1-end]
  [row1-start]". LNav Vp RNav ." 4fr [row1-end]
  [row1-start]". botNav botNav botNav ." 2fr [row1-end]
  [row1-start]"spacer spacer spacer spacer spacer" 1fr [row1-end]
  [row1-start]". footer footer footer ." 2fr [row1-end]
  / 1fr 1fr 10fr 1fr 1fr ;
}

p {
  padding: 10px;
}

hr:nth-of-type(1) {
  max-width: 20%;
  border-color: #eaffc4;
}

hr:nth-of-type(2){
  max-width: 25%;
  border-color: #b6c399;
}

hr:nth-of-type(3){
  max-width: 30%;
  border-color: #6a856a;
}