/*****************************STYLE*******************************/
body, input{
    color: #f2f2f2;
    font-size: 20px;
    font-family: Verdana, Arial, sans-serif;
}

body{
    width: 100vw;
    height: 100vh;
    background: #333 no-repeat center;
    background-size: cover;
}

#blackOverlay{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
}

a {
    color: #ccc;
    text-decoration: none;
}

a:hover, a:focus{
    color: #fff;
}

header{
    position: fixed;
    top: 50px;
    right: 50px;
}

header ul li,
footer ul li{
    float: left;
    padding: 0 10px;
}

main{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#searchform, main{
    height: 56px;
}

#searchform input[type="search"]{
    width: 500px;
    padding: 15px;
    border-radius: 5px 0 0 5px;
    background-color: rgba(180, 180, 180, 0.4);
    border: 1px solid black;
    float: left;

}


#searchform button[type="submit"]{
    width: 55px;
    height: 55px;
    border-radius: 0 5px 5px 0;
    font-size: 20px;
    background-color: rgba(100, 100, 100, 0.6);
    /*background: rgba(100, 100, 100, 0.6) url('../img/search.png')  no-repeat center fixed;*/
    /*background-size: 30px;*/
    border: 1px solid black;
    border-left: none;
    float: left;
}


#searchform input[type="search"]:focus{
    background-color: rgba(200, 200, 200, 0.4);
    box-shadow: inset 0 0 3px #000;
}

#searchform button[type="submit"]:hover{
    background-color: rgba(120, 120, 120, 0.6);
    box-shadow: inset 0 0 5px #333;
}

footer{
    position: fixed;
    bottom: 5px;
    left: 10px;
    font-size: 10px;
}