html{
height: 100%;
}

* { box-sizing: border-box;
}

body {
background:darkgrey;
margin: 10;
background-repeat:no-repeat;
}

@font-face {
    font-family: MFfont;
    src: url(/Fonts/MFfont.ttf);
}

.navbar {
    background-color:blue;
    float:left;
}

.teeny {
font-size:14px;
}

table {
    width:95%;
}

table, th, tr, td{
    border:1px solid black;
    border-collapse:collapse;
    padding:5px;
    margin:auto;
    }

.darkrow {
    background-color:darkgrey;
}

.darkrow2 {
    /*background-color:rgb(138, 0, 0);*/
    color:beige;
}

.left {
background-image:url("/images/Plates1.jpg");
background-repeat: no-repeat;
background-size: cover;
object-fit:cover;
background-position:center;
padding:0px;
float:left;
width:60%;
height:240px;
}

.right {
background-color:white;
font-family: MFfont, courier;
font-size:20px;
text-shadow:1px 1px lightgrey;
color:black;
padding:0px;
float:left;
width:40%;
height:240px;
text-align:center;
}

.clearfix {
overflow:hidden;
background-color:lightgrey;
font-family: MFfont, courier;
font-size:25px;
text-shadow:0px 0px black;
color:black;
text-align:center;
padding:10px;
clear:both;
width:95%;
margin:auto;
}

.left2 {
background-color:;
background-repeat: no-repeat;
background-size:cover;
border:0px solid black;
font-family:MFfont, courier;
font-size:20px;
object-fit:cover;
background-position:center;
padding:0px;
float:left;
width:50%;
height:100%;
}

.right2 {
background-color:;
border:0px solid black;
font-family: MFfont, courier;
font-size:20px;
text-shadow:;
color:black;
padding:0px;
float:left;
width:50%;
height:100%;
text-align:center;
}

.left3 {
background-color:beige;
background-repeat: no-repeat;
background-size:cover;
border:0px solid grey;
margin:1px;
font-family:MFfont, courier;
font-size:;
background-position:center;
padding:1px;
float:left;
width:49.5%;
height:670px;
}

.right3 {
background-color:rgb(128, 0, 0);
font-family: MFfont, courier;
border:0px solid grey;
margin:1px;
font-size:;
background-position:center;
text-shadow:;
color:black;
padding:0px;
float:left;
width:49.5%;
height:670px;
text-align:center;
}

.hours {
background-color:lightgrey;
background-size:cover;
font-family:MFfont, courier;
font-size:20px;
padding-top:20px;
padding-bottom:20px;
text-align:center;
width:95%;
margin:auto;

}

#main {
border:10px;
background-color:#000;
font-family:courier, arial;
font-size:35px;
color:white;
text-align:center;
width: 100%;
margin:auto;
padding: 10px;
clear: both;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
  position:sticky;
  top:0;
}

li {
  float:left;
  /*border-right: 1px solid #bbb;*/
}

li a {
  display: block;
  color:white;
  text-align:center;
  padding: 14px 16px;
  text-decoration:none;
  background-color:#000;
}

li a:hover {
  background-color: #222;
}

li a .active {
  background-color:yellow;
}

.text {
background-color:lightgrey;
font-family: MFfont, courier;
font-size:35px;
text-shadow:0px 0px black;
color:black;
text-align:center;
padding:10px;
float:;
width:90%;
height:;
margin:auto;
}

.abouttext {
background-color:lightgrey;
font-family: MFfont, courier;
font-size:30px;
/*text-shadow:0px 0px black;*/
color:black;
text-align:center;
padding:10px;
float:;
width:90%;
height:;
margin:auto;
}

.hourstext {
background-color:lightgrey;
font-family: MFfont, courier;
font-size:30px;
text-shadow:0px 0px black;
color:black;
text-align:left;
padding:10px;
float:;
width:90%;
height:;
margin:auto;
}


/* Media query to add a break point at 800px for the left and right divs */
@media screen and (max-width:800px) {
  .left, .right, .left2, .right2, .left3, .right3 {
    width:100%;
   /* height:100%;*/
}

/* Media query to add a break point at 800px for the listed divs*/
@media screen and (max-width:800px) {
    .left2, .left3, .right2, .right3 {
        height:100%;
    
}
 /* The width is 100%, when the viewport is 800px or smaller for the navigation section */

@media screen and (max-width:600px) {
  li {float:left; width:33.3%;}
  
}

/* reduces the size of the text (by increasing the padding) in the navigation menus*/
@media screen and (max-width:600px) {
li a{padding:8px}
}

@media screen and (max-width:800px) {
    .hours {font-size:18px}
}



OUT OF USE BELOW
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
.nav {
clear: left;
border:20px;
border-color:white;
background-color:yellow;
width:100%;
padding:20px;
height:30px;
margin:auto;
position:fixed;
}
#image1{
img src=Images/WeightRoomPano1.jpg;
}

#one {
background-image:url(Images/WeightRoomPano1Resized.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border: 1px solid black;
height: 150px;
width: 80%;
margin: auto;
padding: px;
position: sticky;
float: ;
}

#two {
border: 1px solid black;
background-color: green;
background-repeat: no-repeat;
height: 300px;
width: 90%;
margin: auto;
padding: 50px;
position: ;
float: ;
clear: ;
}

#three {
border: 0px solid black;
background-color: blue;
height: 300px;
width: 90%;
margin: auto;
padding: 50px;
position: ;
float: ;
}

#inside1 {
border: 1px solid black;
height: 130px;
width: 90%;
margin: 20px;
padding: 20px;
position:center;
float: no-float;
}