/***BODY */ 
body html{margin:0px;width: 1200px;}
body {font-family: 'Righteous', serif;font-size: 15px;}

#top_menu {word-spacing: 20px; margin-left: auto; margin-right: auto; margin-bottom:-50px;}
#top_menu_about {word-spacing: 20px; margin-left: auto; margin-right: auto; margin-bottom:-50px;}

img {max-width:100%;max-height:420px;padding:5px;}

#titles {font-size: 50px;}
#titles2 {font-size: 50px; text-align: center;}
#hi {margin-left:20px; margin-top:10px;}
#info {margin-left:350px; margin-top:-371px;}
#friends {margin-left:300px; margin-top:-255px;}
#contact {margin-left:300px; margin-top:-215px;}
#text {font-family: 'Arvo', serif;font-size: 12px;}
#imginfo {padding:0px;}

#top, #bottom, #left, #right {background:yellow;position:fixed;margin:0px}
#left, #right {top: 0; bottom: 0;width: 10px;}
#left { left: 0; }
#right { right: 0;}
#top, #bottom {left: 0; right: 0;height: 10px;}
#top { top: 0; }
#bottom { bottom: 0;}

a:link {color: #000000;text-decoration: none;}
a:visited {color: #000000;text-decoration: none;}
a:hover {color: #000000;text-decoration: underline;}
a:active {color: #000000;text-decoration: none;}

* {box-sizing: border-box;}
.column {float: left;width: 33.33%;padding: 5px;}
/* Clearfix (clear floats) */
.row::after {content: "";clear: both;display: table;}
.container {position: relative; width: 100%; }
.image {display: block; width: 100%;height: auto;}
.overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .5s ease;background-color: #008CBA;}
.container:hover .overlay {opacity: 1;}
.text {color: white;font-size: 20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);text-align: center;}
.content{text-align: center;}
.inner{display:inline-block;}