@import url(https://fonts.googleapis.com/css?family=Walter+Turncoat);
 html {
     background: -webkit-linear-gradient(90deg, #485563 10%, #29323c 90%);
     background: -moz-linear-gradient(90deg, #485563 10%, #29323c 90%);
     background: -ms-linear-gradient(90deg, #485563 10%, #29323c 90%);
     background: -o-linear-gradient(90deg, #485563 10%, #29323c 90%);
     background: linear-gradient(90deg, #485563 10%, #29323c 90%);
     margin: 0;
     padding: 0;
     height: 100%;
     width: 100%;
     overflow: hidden 
}
 .trans--grow{
     -webkit-transition: width 1s ease-out;
    /* For Safari 3.1 to 6.0 */
     transition: width 1s ease-out;
     width : 0%;
     -moz-transition: width 1s ease-out;
    /* For Safari 3.1 to 6.0 */
    -o-transition: width 1s ease-out;
    /* For Safari 3.1 to 6.0 */
}
 .grow {
     width: 100%;
}
 .hr1 {
     margin-left: 0;
}
 .hr2 {
     margin-right: 0;
}
 hr {
     margin-top: 20px;
     padding: 2px 0;
     border: none;
     background-color: rgb(232, 232, 232);
     letter-spacing: 5px;
}
 body {
     font-size: 24px;
     color: #E8E8E8;
     font-family: "Walter Turncoat", cursive;
     display: block;
     width: 90%;
     height: 80%;
     min-height: auto;
     margin: 30px auto 0 auto;
     background-color: #497959;
     padding: 20px 30px;
     overflow-y: auto;
     overflow-x: hidden;
     box-shadow: -1px 2px 2px 0px #555, inset 0 0 10px 0 #555;
     -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;
     -moz-border-radius: 10px;
     -ms-border-radius: 10px;
     -o-border-radius: 10px;
     border-radius: 10px;
     border: #B78240 solid 10px;
     background-image: url(/workoutgenerator/images/chalkbackground.png);
     background-size: cover;
     background-repeat: no-repeat;
     position: relative;
     animation: fadeInAnimation ease 3s;
     animation-iteration-count: 1;
     animation-fill-mode: forwards;

}
 body:after {
     content: "";
     display: block;
     position: fixed;
     -webkit-border-radius: 0.1em 0.1em 0 0.1em;
     -khtml-border-radius: 0.1em 0.1em 0 0.1em;
     -moz-border-radius: 0.1em 0.1em 0 0.1em;
     -ms-border-radius: 0.1em 0.1em 0 0.1em;
     -o-border-radius: 0.1em 0.1em 0 0.1em;
     border-radius: 0.1em 0.1em 0 0.1em;
     width: 50px;
     height: 8px;
     background: #f1f1f1;
     top: 80%;
     margin-top: 75px;
     margin-right: 60px;
     right: 5%;
     box-shadow: inset 0 -4px 1px rgba(0, 0, 0, 0.3), -1px -1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.3) 
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

 h1 {
     text-align: center;
     font-weight: normal;
     color: #E8E8E8;
     font-size: 40px;
}
 h2 {
     text-align: center;
     font-weight: normal;
     color: #E8E8E8;
     font-size: 40px;
}
 h3 {
     text-align: center;
     font-weight: normal;
     color: #E8E8E8;
     font-size: 32px;
}
 h4 {
     text-align: center;
     font-weight: normal;
     color: #E8E8E8;
     font-size: 28px;
}
 h5 {
     text-align: center;
     font-weight: normal;
     color: #E8E8E8;
     font-size: 26px;
}
 a {
     color: #EDED8E;
     font-size: 32px;
}
 a:link {
     text-decoration: none;
}
 a:visited {
     text-decoration: #EDED8E;
}
 A:hover {
     COLOR: #FFFFBA;
     TEXT-DECORATION: none;
     font-weight: normal 
}
 #menuToggle {
     display: block;
     position: relative;
     top: 5px;
     left: 50px;
     z-index: 1;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}
 #menuToggle a {
     text-decoration: none;
     color: #A9D6B8;
     transition: color 0.3s ease;
}
 #menuToggle a:hover {
     color: #FFFFBA;
}
 #menuToggle input {
     display: block;
     width: 40px;
     height: 32px;
     position: absolute;
     top: -7px;
     left: -5px;
     cursor: pointer;
     opacity: 0;
    /* hide this */
     z-index: 2;
    /* and place it over the hamburger */
     -webkit-touch-callout: none;
}
/* * Just a quick hamburger */
 #menuToggle span {
     display: block;
     width: 33px;
     height: 4px;
     margin-bottom: 5px;
     position: relative;
     background: #A9D6B8;
     border-radius: 3px;
     z-index: 1;
     transform-origin: 4px 0px;
     transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}
 #menuToggle span:first-child {
     transform-origin: 0% 0%;
}
 #menuToggle span:nth-last-child(2) {
     transform-origin: 0% 100%;
}
/* * Transform all the slices of hamburger * into a crossmark. */
 #menuToggle input:checked ~ span {
     opacity: 1;
     transform: rotate(45deg) translate(-2px, -1px);
     background: #FF6666;
}
/* * But let's hide the middle one. */
 #menuToggle input:checked ~ span:nth-last-child(3) {
     opacity: 0;
     transform: rotate(0deg) scale(0.2, 0.2);
}
/* * Ohyeah and the last one should go the other direction */
 #menuToggle input:checked ~ span:nth-last-child(2) {
     transform: rotate(-45deg) translate(0, -1px);
}
/* * Make this absolute positioned * at the top left of the screen */
 #menu {
     position: absolute;
     width: 100px;
     margin: -100px 0 0 -100px;
     padding-top: 435px;
     background: none;
     list-style-type: none;
     -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
     transform-origin: 0% 0%;
     transform: translate(-100%, 0);
     transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
 #menu li {
     padding: 5px 0;
     font-size: 15px;
}
/* * And let's slide it in from the left */
 #menuToggle input:checked ~ ul {
     transform: none;
}
@viewport {
  width: 100vw; /*Sets the width of the actual viewport to the device width*/
}