/* _ _ _ _ _ _ _ _ 
  | | | | | | | | |
   \_/|___|___|\_/ */
body {
    background-color:blanchedalmond;
    text-align: center;
}
h1 {
    font-size:50pt;
    font-family:'Lucida Sans', 'Lucida Sans Regular';
    color:rgb(96, 52, 20);
}
h2 {
  font-family:'Lucida Sans', 'Lucida Sans Regular';
  color:rgb(131, 76, 36);
}
ul {
    list-style-type: none;
}
li {
    display: inline;
}
    li a:link {
        text-decoration: none; 
    }
    li a:hover {
        background-color:gold;
    }
    li a:active {
        background-color:gold;
        color:rgb(131, 76, 36);
    }
.current-page {
    background-color:rgb(131, 76, 36);
    color:white;
}
#nav {
    font-size:20pt
}

header#canvas {
    width:55vw;
    height:39.604vw;
    margin:5vw auto 0 auto;
}   
section,article {
    float:left;
}
article#row1 {
    width:100%;
    height:15.1%;
}
article#row2 {
    width:100%;
    height:9.9%;
}
    section.red2 {
        width:1.7%;
        height:100%;
    }
    section.green2 {
        margin-left:0.9%;
        width:3.5%;
        height:100%;
    }
    section.blue2 {
        margin-left:1.2%;
        width:1%;
        height:100%;
    }
    section.orange2 {
        margin-left:2.4%;
        width:3.6%;
        height:100%;
    }
    section.lightblue2 {
        margin-left:2.5%;
        width:8.1%;
        height:100%;
    }
    section.darkgreen2 {
        margin-left:1%;
        width:1%;
        height:100%;
    }
    section.purple2 {
        margin-left:2.6%;
        width:1%;
        height:100%;
    }
    section.darkblue2 {
        margin-left:0.7%;
        width:2%;
        height:100%;
    }
    section.pink2 {
        margin-left:2.8%;
        width:1.9%;
        height:100%;
    }
    section.orange22 {
        margin-left:5.8%;
        width:3.9%;
        height:100%;
    }
    section.lightblue22 {
        margin-left:2.3%;
        width:8.1%;
        height:100%;
    }
    section.red22 {
        margin-left:2.48%;
        width:2.2%;
        height:100%;
    }
    section.darkblue22 {
        margin-left:5.7%;
        width:8.3%;
        height:100%;
    }
    section.red23 {
        margin-left:5.7%;
        width:17.62%;
        height:100%;
    }

article#row3 {
    width:100%;
    height:9.4%;
}
    
article#row4 {
    width:100%;
    height:9.7%;
}
    section.pink4 {
        width:6.1%;
        height:100%;
    }
    section.darkblue4 {
        margin-left:4.65%;
        width:14.15%;
        height:100%;
    }
    section.red4 {
        margin-left:4.6%;
        width:3.8%;
        height:100%;
    }
    section.orange4 {
        margin-left:10.4%;
        width:14.5%;
        height:100%;
    }
    section.blue4 {
        margin-left:10.45%;
        width:31.35%;
        height:100%;
    }

article#row5 {
    width:100%;
    height:46.3%;
}    
    
article#row6 {
    width:100%;
    height:9.6%;
}
    section.green6 {
        width:25.2%;
        height:100%;
    }
    section.darkblue6 {
        margin-left:18.4%;
        width:56.4%;
        height:100%;
    }

/*COLORS*/

.yellow {
    background-color:rgb(236, 201, 1);
}
    .yellow:hover {
        background-color:rgb(255, 220, 23);
    }
.red2,.red22,.red23,.red4 {
    background-color:#d20226;
}
    .red2:hover {
        background-color:#ff2347;
    }
    .red22:hover {
        background-color:#ff2347;
    }
    .red23:hover {
        background-color:#ff2347;
    }
    .red4:hover {
        background-color:#ff2347;
    }
.green2,.green6 {
    background-color:#38bb1f;
}
    .green2:hover {
        background-color:#65ec4a;
    }
    .green6:hover {
        background-color:#65ec4a;
    }
.darkgreen2 {
    background-color:#387c03;
}
    .darkgreen2:hover {
        background-color:#6ae00f;
    }
.blue2 {
    background-color:#02419e;
}
    .blue2:hover {
        background-color:#3786fd;
    }
.blue4 {
    background-color:#025bc1;
}
    .blue4:hover {
        background-color:#3a96ff;
    }
.darkblue2,.darkblue22,.darkblue4,.darkblue6 {
    background-color:#20201e;
}
    .darkblue2:hover {
        background-color:#626270;
    }
    .darkblue22:hover {
        background-color:#626270;
    }
    .darkblue4:hover {
        background-color:#626270;
    }
    .darkblue6:hover {
        background-color:#626270;
    }
.lightblue2,.lightblue22 {
    background-color:#b3b7d4;
}
    .lightblue2:hover {
        background-color:#cad0f3;
    }
    .lightblue22:hover {
        background-color:#cad0f3;
    }
.orange2,.orange22,.orange4 {
    background-color:#f87702;
}
    .orange2:hover {
        background-color:#ffa43b;
    }
    .orange22:hover {
        background-color:#ffa43b;
    }
    .orange4:hover {
        background-color:#ffa43b;
    }
.purple2 {
    background-color:#70469c;
}
    .purple2:hover {
        background-color:#b575fa;
    }
.pink2,.pink4 {
    background-color:#e39ca2;
}
    .pink2:hover {
        background-color:#fdbdc2;
    }
    .pink4:hover {
        background-color:#fdbdc2;
    }