body {
    box-sizing: border-box;
    font-family: Arial;
    background-image: url('https://live.staticflickr.com/65535/51980773298_984da77e00_k.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-origin: border-box;
    background-position: center;
}


header {
    box-sizing: border-box;
    margin: auto;
    text-align: center;
    width: 95%;
    border: 5px solid rgb(138, 209, 244);
    border-radius: .5em;
    padding: 5px;
    color: rgb(204, 240, 235);
    background-color: rgb(2, 77, 100);
    font-family: monospace;
    font-size: 32pt;
    font-style: bold;
}

.nav {
    position: relative;
    float: right;
    bottom:0;
    list-style: none;
    width: 100px;
    box-sizing: border-box;
    background-color: aqua;


}

/* Style the topnav links */
.topnav a {
    box-sizing: border-box;
    list-style: none;
    width: 100px;
    text-align: center;
    position: relative;
    text-decoration: none;
    color: rgb(204, 240, 235);


}

/* Change color on hover */
.topnav a:hover {
    box-sizing: border-box;
    color: rgb(204, 240, 235);
    border-radius: 1.2em;
    background-color: rgba(3, 48, 48, 0.628);
}


ul {
    list-style: none;
    display: block;
    border-radius: 1em;
}

li.nav {

    float: left;
}


li a {
    display: block;
    color: rgb(204, 240, 235);
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
}

a:link {
    color: yellow;

}


li:hover,
li:active {
    font-size: 150%;
    list-style: none;
}

a.s {
    text-decoration: none;
}

a.xl:hover,
a.xL:active {
    font-size: 150%;
}

/* Right column */
.leftcolumn {
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding-right: 30px;
    padding-left: 10pxc;
    overflow: auto;
}

/* Right column */
.rightcolumn {
    box-sizing: border-box;
    float: right;
    width: 50%;
    padding-right: 30px;
    padding-left: 10pxc;
    overflow: auto;
}

.right {
    position: absolute;
    right: 0px;
}

.left {
    position: absolute;
    left: 0px;
}

.textCenter {
    text-align: center;
}

.center {
    width: 80%;
    margin: auto
}

.center2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.centeredThing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.centeredUnderVid {
    position: absolute;
    width: 50px;
    margin: 10px;
    top: 50%;
    left: 50%;
}

.centerBorder {
    margin: auto;
    width: 50%;
    border: 3px solid rgb(138, 209, 244);
    padding: 10px;
    border-radius: 1em;
}

.space {
    box-sizing: border-box;
    height: 200px;
    display: block;


}

.spaceLess {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    display: block;


}

span {
    color: purple;
    background-color: greenyellow;
    border-radius: .25em;
    padding: 3px;
}

ol {
    font-family: Verdana, sans-serif;
    font-style: oblique;
    font-size: 14pt;
}

h1 {
    box-sizing: border-box;
    color: yellowgreen;
    text-decoration: none;
    font-family: helvetica;
    letter-spacing: 1pt;
    text-align: center;
}

h2.jaime {
    box-sizing: border-box;
    color: rgb(205, 112, 50);
    text-decoration: none;
    font-family: helvetica;
    letter-spacing: 1pt;
    text-align: center;

}



h3 {
    color: rgb(239, 184, 107);
    text-decoration: none;
    font-family: helvetica;
    letter-spacing: 1pt;
    text-align: center;
}

.paraBox {
    box-sizing: border-box;
    width: 20px;
    height: 20px
}

p.center {
    font-size: 24pt;
    display: block;
    box-sizing: border-box;
    text-align: center;
    overflow: contain;

}

.hover {
    background-size: 100px;
    color: rgb(252, 199, 208);
}

.silverish {
    color: rgb(239, 248, 250);
    font-style: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(193, 233, 159);
    font-size: 21px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
}

.pSilver {
    color: rgb(239, 248, 250);
    font-style: bold;
}

.pYeWhite {
    color: rgb(244, 220, 162);
    font-size: 28px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    text-overflow: calc();
}

.pGrWhite {
    color: rgb(193, 233, 159);
    font-size: 21px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    text-overflow: calc();
}

.pBlWhite {
    color: rgb(190, 250, 250);
    font-size: pt;
    font-style: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(193, 233, 159);
    font-size: 21px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
}

.redish {
    color: rgb(239, 248, 250);
    font-style: bold;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(193, 233, 159);
    font-size: 21px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    color: rgb(236, 129, 211);

}

td a {
    display: block;
}

h2.tableTitle {
    position: absolute;
    margin: 100px, 50px, 10px, 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(50, 125, 205);
    text-decoration: none;
    font-family: helvetica;
    letter-spacing: 1pt;
    text-align: center;
}

table {
    position: absolute;
    margin: 300px top 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 310px;
    border: solid rgb(50, 125, 205) 5px;
    border-radius: 1em;
    color: rgb(254, 202, 202);
    font-size: 14pt;

}

tr {
    width: 310px;
    border: solid rgb(50, 125, 205);
    background-color: rgba(27, 157, 159, 0.225);
    color: rgb(254, 202, 202);
    font-size: 14pt;
    box-sizing: border-box;
    margin: auto;
    overflow: auto;
    border-radius: 1em;
    text-align: center;
}



th {
    width: 310px;
    border: solid rgba(102, 53, 128, 0.833) 5px;
    background-color: rgba(27, 157, 159, 0.225);
    color: rgb(254, 202, 202);
    font-size: 14pt;
    padding: 15px;
    margin: auto;
    overflow: auto;
    border-radius: 1em;
    text-align: center;
}


form {
    
    background-color: rgba(0, 0, 0, 0.485);
    border: solid 1px;
  
    border-radius: 1em;
    text-align: center;
    
    font-style: bold;
    font-family: helvetica;
    color: rgb(196, 235, 249);
}

.FLEX{

display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: center;
flex-direction: column;
}
form,label {

    font-size: 12pt;
   
    text-align: center;
    padding: 3px;
    flex-wrap: wrap;
   
}
label{
    font-size: 12pt;
    text-align: center;
    padding: 3px;
    
    flex-wrap: wrap;
   

}

.button {
    background-color: rgb(1, 33, 33);
    color: rgb(119, 228, 228);
    border-radius: 1.2em;
}


.hover {
    box-sizing: border-box;
    display: block;
    padding: 3px;
    background-size: 100px;
    color: rgb(252, 199, 208);
    border-radius: .5em;

}

.input[type=button] {
    color: black;
    background-color: none;
    padding: 5px;
    margin: center;
    
}

.crow {
    padding: 3px;
    width: 700px;
    box-sizing: border-box;
    object-fit: contain;
    background-color: rgb(1, 28, 20);
    border-radius: 1em;

}

.outerSpace {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: initial;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    border-radius: 1em;
    background-color: rgb(1, 28, 20);
    border-color: rgb(1, 28, 20); 
    border-radius: 1em;

}

.clickThePic {
    color: rgb(193, 233, 159);
    font-size: 21px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    position: absolute;
}

.videoWrapper {
    position: initial;
    box-sizing: border-box;
    width: fit-content;
    z-index: index 1;
    margin-right: auto;
    margin-left: auto;
    border: solid #73ad21f7;
    border-radius: 1em;
    background-color: #3f630e80;
    padding: 10px;
}

.videoWrapper iframe {
    position: initial;
    box-sizing: border-box;
    display: block;
    width: fit-content;
    z-index: 2;
    margin-right: auto;
    margin-left: auto;
}

.duringLock {
   
    background-color: rgba(0, 0, 0, 0.485);
    border: solid 1px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    border-radius: 1em;
    text-align: center;
    float: right;
    font-style: bold;
    font-family: helvetica;
    color: rgb(196, 235, 249);
    border: 1 rgb(1, 28, 20);
    padding: 8px;
    word-spacing: 1px;
}

.footer {
    box-sizing: border-box;
    display: inline-block;
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}