body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.375em;
background-color:black;
color:white; 
}

* {
  box-sizing: border-box; /* needed for sizing css div and box heights and widths */
}

.fit_screen {
width: 100%;
}

.logo {
width: 60%;
}


a {
color:#88e8f9;
}

a:hover {
color:#FF7FFF;
}

a:visited:hover {
color:#FF7FFF;
}

a:visited {
color:#ddc7ec;
}

.menu {
font-size:1em; 
padding-top:20px;
padding-left:20px;
padding-right:40px;
padding-bottom:60px;
}

/* Use a media query to change styles at 800px: */
@media screen and (max-width: 800px) {
  .menu {
font-size:.7em;
padding-top:20px;
padding-left:0px;
padding-right:20px;
padding-bottom:20px;
  }
}

.menu a {
text-decoration:none;
}
 
.menu a:hover {
text-decoration:underline;
}

.area_left {
  padding: 20px;
  float: left;
  width: 30%; /* The width is 30%, by default */
}

.area_main {
  padding: 20px;
  float: left;
  width: 70%; /* The width is 70%, by default */
}


/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .area_left, .area_main {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

.button {
max-width: 100%;
height: auto;
}

.category_left {
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.category_middle {
  padding: 20px;
  float: left;
  width: 20%; /* The width is 20%, by default */
}

.category_right {
  padding: 20px;
  float: left;
  width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .category_left, .category_middle, .category_right, .logo {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}


.spacer {
clear:both;
height:70px;
width:100%;
}


#page {
padding-left:10%;
}