body, html {
    height: 100%;
    background-image:url("foto.webp");
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    background-position:top center;
    background-repeat: no-repeat no-repeat;
}

#container div {
    font-size: 1em;
    color: #000;
    text-align: left;
    font-weight: normal;
    line-height: 1.5em;
}

#image {
    width: 50%;
    max-width: 100%;
    height: auto;
    text-align:center;
}

* {
		margin:0;
		padding:0;
		}


	body {text-align:center; /* horizontal centering for IE Win quirks */}

	#distance { 
		width:1px;
		height:50%;
		margin-bottom:-12em; /* half of container's height */
		float:left;
		}

	#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:29em;
		width:38em;
		clear:left;
        padding:2em;
    background-color: rgba(255, 255, 255, 0.863);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
		}

    @media only screen and (max-width: 500px) {
	#container {
        height:auto;
         width:90%;
         clear:left;
         padding:1em;
         }
    }

a { color: #cad345; text-decoration:underline;}
a:visited { color: #cad345; }
a:hover { color: #2c2e0e; }
a:focus { outline: thin dotted; }