body {
    background-image: url("../images/penguins_website_grey.png"), linear-gradient(to right, rgb(34 139 34 / 100%), rgb(46 139 87 / 75%), rgb(255 255 255 / 0%));
    background-repeat: no-repeat;
    background-position: center 70%, left, right;
    background-color: #003300;  
    overflow: hidden;
    font-family: Ubuntu, "times new roman", times, roman, serif;
    margin:0;
   }

.top {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100px;
    top: 5%;
    background-color:#000036;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    color:#FFF;
    font-weight:bold;
    font-size: 4em !important
}

div.top:hover {
background-color:#fd5800;
color:#000;
}
  
 .bottom {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 5%;
    background-color: #4b0082;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    color:#FFF;
    font-weight:bold;
}

div.bottom:hover{
background-color:#f5c71a;
color:#000;
}

.first, a.link{
 position : absolute;
 width:5%;
 height:100%;
 left: 15%;
 background-color: #1c352d;
 color:#FFF;
}

div.first:hover {
background-color:#7c0a02;
color:#000;
}

.after_first, a.link{
 position : absolute;
 width:5%;
 height:100%;
 left: 20%;
 background-color: #323232;
 color:#FFF;
 font-size: 2em !important;
}

div.after_first:hover {
background-color:#5d5d5d;
color:#000;
}

.before_second, a.link{
 position : absolute;
 width:5%;
 height:100%;
 left: 40%;
 background-color:#8b0000; /* #323232*/
 color:#FFF;
 font-size: 2em !important;
}

div.before_second:hover {
background-color:#008b8b;/*#5d5d5d;*/
color:#000;
}


.second , a.link{
 position : absolute;
 width:5%;
 height:100%;
 left: 50%;
 background-color: #f46a04;
 color:#FFF;
font-size: 2em !important;
}

div.second:hover {
background-color:#002147;
color:#ffdf00;
}

.after_second{
 position : absolute;
 width:5%;
 height:100%;
 left: 60%;
 background-color: #5d5d5d;
 color:#FFF;
font-size: 2em !important;
}

div.after_second:hover {
background-color:#FFF; /*#323232;*/
color:#000;
}


.last, a.link{
 position : absolute;
 width:5%;
 height:100%;
 right:15%;
 background-color: #355e3b;
color:#FFF;
}

div.last:hover {
background-color:#ce2029;
color:#000;
}


@media screen and (max-width: 480px) {
  body{
    background-image: none; /*url("../images/penguins_website_grey.png");*/
    background-repeat: no-repeat;
    background-position: 50% 20%;
    background-color: #003300;
    overflow: hidden;
    background-size: cover;
    font-family: Ubuntu, "times new roman", times, roman, serif;
    margin:0;
  }
  
  .first {
 width:25%;
}

.before_second {
 width:25%;
}

.second {
 width:25%;
}

.after_second {
 width:25%;
 }

.last {
 width:25%;
}

}

/* (A2) ON SMALL SCREENS */
@media screen and (min-width : 481px) and (max-width: 640px) {
  body{
    background-image: url("../images/penguins_website_grey.png");
    background-repeat: no-repeat;
    background-position: 50% 20%;
    background-color: #003300;
    overflow: hidden;
    /*background-size: cover;*/
    font-family: Ubuntu, "times new roman", times, roman, serif;
    margin:0;
  }



  div {
    display: inline-block;
    width:80%;
  }

  #container {
  width:inherit;
  height: inherit;
  }


 .bottom {
 position : absolute;
 width:100%;
 height:200px;
 bottom: 5%;
 background-color: #4b0082;
}


  #centercontent {
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    top: 3%;
    height: auto;
    background: rgba(255, 255, 255, 0.85);
    padding:10px;
  }

  h1 {
    color:#000;
  }

}

@-moz-document url-prefix() {
body{
    background-image: url("../images/penguins_website_grey.png");
    background-repeat: no-repeat;
    /*background-position: bottom;*/
    background-position: center top 450px;
    background-color: #003300;
    overflow: hidden;
    font-family: Ubuntu, "times new roman", times, roman, serif;
    margin:0;
	}

div.before_second {
left:35%;
width:10%;
	}
div.second {
left:50%;
width:10%;
	}
div.after_second {
left:65%;
width:10%;
	}
}