@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap');

h1{
  font-family: 'Source Sans 3', sans-serif;
  font-weight:400;
  position:relative;
  margin-left: 100px;
  margin-bottom:40px;
}
h4{
  font-family: 'Source Sans 3', sans-serif;
  font-weight:400;
  position:relative;
  margin-left: 100px;
}
body {
    font-family: 'Source Sans 3', sans-serif; 
    font-weight:350;
}
body{
    background-position: -10px -10px;
    background-image:
        linear-gradient(-90deg, rgb(208,218,194) 1px, transparent 1px),
        linear-gradient(rgb(208,218,194) 1px, transparent 1px),
        linear-gradient(-90deg, rgb(208,218,194) 2px, transparent 1px),
        linear-gradient(rgb(208,218,194) 2px, transparent 1px);
    background-size: 
                20px 20px,
                20px 20px,
                100px 100px,
                100px 100px;
    background-color: rgb(236,246,222)
}

p {text-align:center;}
canvas {
    position:fixed;
    z-index: auto;
    display:block;
        top: 0;
        left: 0;
}


.vertC{height:100%; width:0px; position:fixed; left:88px; top:0px; border-left:2px solid #3D6F54;}
.vertR{height:100%; width:0px; position:fixed; left:90px; top:0px; border-left:1px solid #CEFEE6;}
.vertL{height:100%; width:0px; position:fixed; left:87px; top:0px; border-left:1px solid #A3C4A9;}
.horizC{height:2px; width:100%; position:absolute; left:0px; top:90px; background-color: #3D6F54;}
.horizLU{height:1px; width:87px; position:absolute; left:0px; top:89px; background-color: #CEFEE6;}
.horizLL{height:1px; width:87px; position:absolute; left:0px; top:92px; background-color: #A3C4A9;}
.horizRU{height:1px; width:calc(100% - 90px); position:absolute; left:90px; top:89px; background-color: #CEFEE6;}
.horizRL{height:1px; width:calc(100% - 90px); position:absolute; left:90px; top:92px; background-color: #A3C4A9;}