* {
    box-sizing: border-box;
    font-family:Verdana;
  }
  .menu {
    float: left;
    width: 20%;
  }
  .menuitem {
    padding: 8px;
    margin-top: 7px;
    border-bottom: 1px solid #f1f1f1;
  }
  .main {
    float: left;
    width: 60%;
    padding: 0 20px;
    overflow: hidden;
  }
  .right {
    background-color: lightblue;
    float: left;
    width: 20%;
    padding: 10px 15px;
    margin-top: 7px;
  }
  
  @media only screen and (max-width:800px) {
    /* For tablets: */
    .main {
      width: 80%;
      padding: 0;
    }
    .right {
      width: 100%;
    }
  }
  @media only screen and (max-width:500px) {
    /* For mobile phones: */
    .menu, .main, .right {
      width: 100%;
    }
  }

/* ----------------------------------------- */

body {
    background-color: #0000;
}

#main-nav {
    background-color: #58ac54;
    text-align: center;
    width: 100%;    
    color:#f5f5f5;
    
}

#main-nav a {
    color: #f5f5f5;
    text-decoration: none;
    text-align: center;
    width: 100%;
    margin:1%;
    padding-top: 5px;
    padding-bottom: 5px;
    display: sticky;
    transition: 0.3s;
    font-size: larger;
}

#main-nav a:hover {
    background-color: rgba(0,0,0,0.1);
    font-size: x-large;
    transform: scale(1.05)
}

#statusBorder {
  background-color: #f8ce4b;
  animation: bgColor 5s infinite linear;
  color: rgb(255, 255, 255);
  border-radius: 12px;
  
}

#status {
  background-color: #eeeeee;
  margin:10%;
  text-align: center;
  font-size: 125%;
  color: rgb(5, 5, 5);
  border-radius: 12px;
  transition:0.3s;
}
#status:hover {
  scale: 101%;
}

@keyframes bgColor {
    0% {
      background-color: #e6da33;
    }
    25% {
      background-color: #e9b927;
    }
    50% {
      background-color: #ffa200;
    }
    75% {
      background-color: #e9b927;
    }
    100% {
      background-color: #e6da33;
    }
  }

  ul.contact
	{
    display:block;
		margin: 0;
		padding: 1.5em 0em 2.5em 0em;
		list-style: none;
	}
	
	ul.contact li
	{
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1em;
	}
	
	ul.contact li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	
	ul.contact li a
	{
		color: #FFF;
	}
	
	ul.contact li a:before
	{
		display: inline-block;
		background: #3f3f3f;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;
		color: #FFFFFF;
	}
	
	ul.contact li a.icon-twitter:before { background: #2DAAE4; }
	ul.contact li a.icon-facebook:before { background: #39599F; }
	ul.contact li a.icon-dribbble:before { background: #C4376B;	}
	ul.contact li a.icon-tumblr:before { background: #31516A; }
	ul.contact li a.icon-rss:before { background: #F2600B; }