body { background-color: #000000; font-family: sans; } .content { padding: 4px; background-color: #000000; } .page-header { padding: 10px; background-color: #404040; margin-bottom: 10px; } .images { position: relative; width: 92vw; height: 92vh; } .single { height: 92vh; } .single-image { position: absolute; } .multi-image { float: left; padding: 6px; width: 200px; height: 200px; } .clickable { display: block; width: 39%; height: 80%; position: relative; z-index: 9; opacity: 0; background-color: #000000; float: left; } .clickable-center { width: 20%; height: 50%; margin-left: 1%; margin-right: 1%; float: center; } .clickable-right { float: right; height: 80%; } .single-image img { object-fit: contain; width: 98vw; height: 92vh; } .multi-image img { object-fit: contain; width: 200px; height: 200px; } .footer { width: 100%; display: block; clear: both; text-align: center; } .footer a { margin-left: 0.5em; margin-right: 0.5em; font-size: 3em; font-weight: bold; color: #ffffff; } .footer .info { margin-left: 0.5em; margin-right: 0.5em; font-size: 3em; font-weight: bold; color: #ffffff; } .footer .tag { margin-left: 0.5em; margin-right: 0.5em; font-size: 0.4em !important; font-weight: normal !important; color: #00ff00; } .error { margin-left: 0.5em; margin-right: 0.5em; font-size: 1em; font-weight: bold; color: #ffffff; } form.f-search { width: 20%; } /* Style the search field */ form.f-search input[type=text] { padding: 10px; font-size: 17px; border: 1px solid grey; float: left; width: 80%; background: #f1f1f1; } /* Style the submit button */ form.f-search button { float: left; width: 36px; padding: 10px; background: #2196F3; color: white; font-size: 17px; border: 1px solid grey; border-left: none; /* Prevent double borders */ cursor: pointer; } form.f-search button:hover { background: #0b7dda; } /* Clear floats */ form.f-search::after { content: ""; clear: both; display: table; }