/*
 * https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space
https://blog.logrocket.com/css-header-styles-cross-browser-compatibility/
https://html-color.codes/purple
*/

body {
margin:0;
padding:0;
width:100vw;
height:100vh;
}
#header {
position:relative;
top:0;
left:0;
width:100%;
height:130px;
background-color:#b0c4de;
}
#logo {
float:left;
top:0;
left:0;
width:130px;

}
#logo img {
height:130px;
width:130px;
}
.title {
position:absolute;
top:20px;
text-align:center;
width:100%;
font-size:40px;
font-family: 'Niconne', cursive;
color: yellow;
line-height:1.2;
letter-spacing: 3px;
text-shadow: 1px 1px 2px #fff, 0 0 25px blue, 0 0 5px #000;
}
.menu_bar {
position:relative;
top:5px;
left:0;
width:100%;
height:20px;
text-align:center;
color:#fff;
z-index:2;
margin-bottom:10px;
}
input[type="radio"] {
display: none;
}
.menu_bar label {
font-size:20px;
font-family: Arial black, sans-serif;
font-weight:bold;
text-shadow:2px 2px 5px black;
padding:0 5px;
background:#b0c4de;
}
.menu_bar label:hover {
background-color: #7851a9;
color:#fff;
cursor:pointer;
}
.menu_bar input[type="radio"]:checked+label {
background-color: #4169e1;
}
.nav-page {
position:relative;
top:0px;
width:100%;
height:calc(100% - 160px);
}
.home-page {
position:absolute;
top:10px;
height:100%;
width:100%;
color:#fff;
overflow:auto;
..margin:auto;
}
/* Create three equal columns that floats next to each other */
.lhs {
position:absolute;
top:0;
left:0;
width:20%;
height:100%;
}
.lhs img {
width:100%;
height:50%;
padding:5px;
}
.mid {
position:absolute;
top:0px;
left:20%;
width:60%;
padding: 10px;
font-size:16px;
font-weight:bold;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../images/park_main.jpg");
background-repeat: no-repeat;
background-size: cover;
color:#fff;
text-align:center;
..overflow:auto;
}
.rhs {
position:absolute;
top:0;
left:80%;
width:20%;
height:100%;
}
.rhs img {
width:100%;
height:50%;
padding:5px;
}
.banner {
position:relative;
top:0px;
overflow-y:auto;
}
#message {
position:relative;
top:120px;
left:0;
right:0;
margin:auto;
width:50%;
background: rgba(0, 0, 0, .5);
font-family:Happy New Year;
color: #ffff00;
}
.msg_header {
left:0;
right:0;
margin:auto;
font-size:50px;
font-family:Happy New Year;
font-size:80px;
line-height:0.9;
z-index:1;
color:#fff;
}
.msg_body {
line-height:0.9;
font-size:30px;
font-family:AntonSC-Regular;
}
#banner span {
font-size:20px;
}
.img-25 {
position:relative;
left:0;
right:0;
margin:auto;
width:25%;
height:25%;
}
.img-50 {
position:relative;
left:0;
right:0;
margin:auto;
width:50%;
height:50%;
}
.img-75 {
position:relative;
left:0;
right:0;
margin:auto;
width:75%;
height:75%;
}