<style>


       body {
  margin: 0px;
}

/* ARTICLE TITLE */

h1 {
font-size: 65px;
line-height: 60px;
margin-top: 100px;
color: #C0606E;
font-family: 'Open Sans Condensed', sans-serif;
word-wrap: break-word;
}

/* BIO */

h2 {
font-size: 20px;
font-family: 'Nanum Gothic', sans-serif;
color: gray;
}

/* BYLINE */

h3 {
font-size: 30px;
font-family: 'Nanum Gothic', sans-serif;
color: gray;
}


h1, h2, h3, p, .bio-section, .predictions-box-text, .title-header-text, .about-header-text, .bio-text, footer {
width: 76%;
/* next 3 lines: make element a "block" element and center it */
display: block;
margin-left: auto;
margin-right: auto;
}


/*-------------------------------
---------STICKY HEADER----------
-------------------------------*/

/* NAVBAR */

.navbar {
z-index: 1;
font-family: Futura;
overflow: hidden;
background-color: #C0606E;
text-align: center;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
left: 0;
}

.navbar a {
display: inline-block;
color: #f2f2f2;
padding-top: 5%;
padding-bottom: 5%;
text-decoration: none;
}

/* HEADER LOGO */

a.logo1 {
font-size: 50px;
font-style: normal;
line-height: 30px;
font-family: 'Open Sans Condensed', sans-serif;
color: white;
font-weight: bold;
}

span.logo2 {
  color: black;
}

/* HAMBURGER */

#menuToggle
{
display: block;
position: fixed;
float: left;
margin-top: 4%;
margin-left: 4%;
width: auto;

z-index: 1;

-webkit-user-select: none;
user-select: none;
}

#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: white;
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: #232323;
}

/* 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);
}

/*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: fixed;
left:0;
width: 210px;
height: 1000px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 100px;

background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */

border-radius: 25px;

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-top: 10%;
padding-left: 25%;
text-align: left;
font-size: 25px;
font-family: 'Nanum Gothic', sans-serif;
color: black;
}

/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}

a
{
text-decoration: none;
color: #232323;

transition: color 0.3s ease;
}

a:hover
{
color: tomato;
}


/*-------------------------------
-----------HOME PAGE-----------
-------------------------------*/

#container{
  position: relative;
  padding-top: 10%;
  max-width: 100%;
}

/* ROW ONE*/

#main{
display: block;
position:relative;
width:100%;
height:auto;
left: 0;
overflow: hidden;
}

#main > div{
float:left;
}

#title-header {
width: 32.5%;
height: 100px;
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
left: 0;
}

a.title-header-text {
color: gray;
font-size: 20px;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
}

.title-header-link {
color: #C0606E;
font-size: 25px;
font-weight: bold;
line-height: 130%;
}

.featured-text {
display: block;
font-size: 50px;
font-family:'Open Sans Condensed', sans-serif;
font-weight: bold;
color: gray;
padding: 5%;
text-decoration: none;
}

.img-body-width {
width: 100%;
height: auto;
margin-top: -35%;
}

#body-content {
width: 40%;
height: 100px;
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: relative;
}

#body-content2 {
width: 58%;
height: 100px;
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: relative;
}

#body-content3 {
width: 32.5%;
height: 100px;
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: relative;
}

/*-------------------------------
---------- FOOTER --------------
-------------------------------*/

footer {
background: #F0EFF5;
width: 100%;
height: 50px;
font-family: 'Nanum Gothic', sans-serif;
font-size: 15px;
padding-top: 1%;
text-align: center;
position:relative;
}

/* ABOUT PAGE */

#about-header {
width: 100%;
height: auto;
text-align: center;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
overflow: hidden;
}

.about-header-text {
color: gray;
font-size: 30px;
line-height: 130%;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
}

#about-title {
width: 100%;
height: auto;
text-align: left;

padding-top: 2%;
padding-bottom: 2%;
padding-left: 1%;

background: #222222;

border-top-color: white;
border-top-width: 4px;
border-top-style: solid;

overflow: hidden;
}

.about-title-text {
color: white;
font-size: 30px;
line-height: 130%;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
}

#about-main{
display: block;
position:relative;
width:100%;
left: 4px;
max-width: 100%;
}

#about-main > div{
float:left;
}

#about-body-content {
width: 40%;
height: auto;
text-align: center;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: absolute;
}

#about-body-content2 {
width: 58%;
height: 100px;
text-align: center;
margin-top: 29%;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: relative;
}

#about-body-content3 {
width: 35%;
height: 100px;
text-align: center;
margin-top: 57%;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: relative;
left: 0;
}

/* BIOS */

.predictions-box-img {
background-color: #ACA7A6;
width: 100%;
height: auto;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
/* next 3 lines: make element a "block" element and center it */
display: block;
margin-left: auto;
margin-right: auto;
}

.bio-title {
color: #808080;
font-size: 65px;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
}

.bio-text {
color: #808080;
font-size: 18px;
font-family: 'Nanum Gothic', sans-serif;
padding-bottom: 5%;
height: 200px;
}

a.bio-text {
color: #C0606E;
font-size: 30px;
padding-bottom: 0%;
padding-top: 0%;
}

#about-bio {
width: 32.5%;
height: auto;
text-align: center;
padding-top: 2%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
left: 0;
}


/* MOBILE STYLES */

@media only screen and (max-width: 736px) {*/

body {
 margin: 0px;
}

/* ARTICLE TITLE */

h1 {
font-size: 65px;
line-height: 60px;
margin-top: 100px;
color: #C0606E;
font-family: 'Open Sans Condensed', sans-serif;
word-wrap: break-word;
}

/* BIO */

h2 {
font-size: 20px;
font-family: 'Nanum Gothic', sans-serif;
color: gray;
}

/* BYLINE */

h3 {
font-size: 30px;
font-family: 'Nanum Gothic', sans-serif;
color: gray;
}


h1, h2, h3, p, .bio-section, .title-header-text, .about-header-text, .bio-text {
width: 80%;
/* next 3 lines: make element a "block" element and center it */
display: block;
margin-left: auto;
margin-right: auto;
}

#container {
min-height:100%;
max-width: 100%;
margin-top: 0;
left: 0;
margin-bottom: 0;
position:relative;
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}



/*-------------------------------
---------STICKY HEADER----------
-------------------------------*/

/* NAVBAR */

.navbar {
z-index: 1;
font-family: Futura;
overflow: hidden;
background-color: #C0606E;
text-align: center;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}

.navbar a {
display: inline-block;
color: #f2f2f2;
padding-top: 5%;
padding-bottom: 5%;
text-decoration: none;
}

/* HEADER LOGO */

a.logo1 {
font-size: 30px;
font-style: normal;
line-height: 30px;
font-family: 'Open Sans Condensed', sans-serif;
color: white;
font-weight: bold;
}

span.logo2 {
 color: black;
}

/* HAMBURGER */

#menuToggle
{
display: block;
position: fixed;
float: left;
margin-top: 4%;
margin-left: 4%;
width: auto;

z-index: 1;

-webkit-user-select: none;
user-select: none;
}

#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: white;
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: #232323;
}

/* 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);
}

/*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: fixed;
width: 200px;
height: 1000px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 100px;

background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */

border-radius: 25px;

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-top: 10%;
text-align: left;
font-size: 25px;
font-family: 'Nanum Gothic', sans-serif;
color: black;
}

/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}

a
{
text-decoration: none;
color: #232323;

transition: color 0.3s ease;
}

a:hover
{
color: tomato;
}


/*-------------------------------
-----------HOME PAGE-----------
-------------------------------*/

/* ROW ONE*/

#main{
width:100%;
height:100%;
display: block;
position:relative;
margin: 0;
padding:0;
}


#title-header {
width: 100%;
height: auto;
text-align: center;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
}

a.title-header-text {
color: gray;
font-size: 20px;
line-height: 120%;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
padding-top:10%;
padding-bottom:10%;
}

.title-header-link {
color: #C0606E;
font-size: 25px;
font-weight: bold;
line-height: 130%;
}

.featured-text {
display: block;
font-size: 50px;
font-family:'Open Sans Condensed', sans-serif;
font-weight: bold;
color: gray;
padding: 5%;
text-decoration: none;
}

.img-body-width {
width: 100%;
height: auto;
padding-top:25%;
}

/* ROW TWO*/

#body-content {
width: 100%;
height: auto;
text-align: center;
background: #E3E1E2;
border-color: white;
border-bottom-width: 4px;
border-style: solid;
margin: 0;
padding:0;
}

#body-content2 {
width: 100%;
height: auto;
text-align: center;
background: #E3E1E2;
border-color: white;
border-bottom-width: 4px;
border-style: solid;
margin: 0;
padding:0;
}

#body-content3 {
width: 100%;
height: auto;
text-align: center;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-bottom-width: 4px;
border-style: solid;
margin: 0;
padding:0;
}

/*-------------------------------
---------- FOOTER --------------
-------------------------------*/

footer {
background: #F0EFF5;
width: 100%;
height: 60px;
font-family: 'Nanum Gothic', sans-serif;
font-size: 15px;
padding-top: 5%;
text-align: center;
}

/* ABOUT PAGE */

#about-header {
width: 100%;
height: auto;
text-align: center;
padding-top: 20%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
}

.about-header-text {
color: gray;
font-size: 33px;
line-height: 130%;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
}

#about-title {
width: 100%;
height: auto;
text-align: center;
padding-top: 4%;
padding-bottom: 4%;
padding-left: 2%;
background: #222222;
border-top-color: white;
border-top-width: 4px;
border-top-style: solid;
}

.about-title-text {
color: white;
font-size: 45px;
line-height: 130%;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
}

#about-main{
display: block;
position:relative;
width:100%;
margin-top: 0;
margin-bottom: 0;
left: 0;
}

#about-main > div{
float:left;
}

#about-body-content {
width: 40%;
height: auto;
text-align: center;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: absolute;
}

#about-body-content2 {
width: 58%;
height: 100px;
text-align: center;
margin-top: 29%;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: relative;
}

#about-body-content3 {
width: 32.5%;
height: 100px;
text-align: center;
margin-top: 57%;
padding-top: 10%;
padding-bottom: 10%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
position: relative;
}

/* BIOS */

.predictions-box-img {
width: 100%;
height: auto;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
/* next 3 lines: make element a "block" element and center it */
display: block;
margin-left: auto;
margin-right: auto;
background-color: #E3E1E2;
}

.bio-title {
color: #808080;
font-size: 55px;
font-family: 'Nanum Gothic', sans-serif;
text-decoration: none;
}

.bio-text {
color: #808080;
font-size: 20px;
font-family: 'Nanum Gothic', sans-serif;
padding-bottom: 5%;
height: auto;
}

a.bio-text {
color: #C0606E;
font-size: 18px;
font-family: 'Nanum Gothic', sans-serif;
padding-bottom: 0%;
}

#about-bio {
width: 100%;
height: auto;
text-align: center;
padding-top: 2%;
background: #E3E1E2;
border-color: white;
border-width: 4px;
border-style: solid;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}


</style>
