body { font-family: monospace; margin: 0 auto; line-height: 200%; font-size: 150%; } a { color: #000000; } a:hover { color: #000000; } p{ margin: 0; } header, footer, div.page { margin: 0 auto; } header{ position: fixed; width: 100vW; } .filler{ min-height: 200px; } header h1 { color: #169bbd; margin: 0; font-weight: normal; font-size: 300%; text-align: center; height: 3em; } header h1 a{ text-decoration: none; } header h1 a:hover{ color: #ffffff; text-shadow: 0px 0px 10px #000000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000; } header nav ul { list-style: none; margin: 0; padding: 0; text-align: center; text-transform: uppercase; } header nav ul li { display: inline; margin: 0 8px 0 0; padding: 0; } @keyframes headerA { 0% { color: #000; text-shadow: 0px 0px 0px #000000; -webkit-text-stroke-width: 0.0px; -webkit-text-stroke-color: #000000; } 90% { color: #000; text-shadow: 0px 0px 0px #000000; -webkit-text-stroke-width: 0.0px; -webkit-text-stroke-color: #000000; } 100% { color: #ffffff; text-shadow: 0px 0px 10px #000000; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000; } } .change{ display: inline-block; animation-name: headerA; animation-duration: 4s; transition: all 1s; } .nothing{ min-height: 2em; display: inline-block; } div.page { width: 100vW; display: flex; flex-wrap: wrap; } .left, .right{ flex: 0 0 auto; } .left{ text-align: right; padding-top: 198px; margin-left: 40px; margin-right: 10px; height: 100vH; position: fixed; left: 0px; top: 0px; width: calc(50vW - 50px); overflow: scroll; z-index: -1; } .right{ margin-right: 40px; margin-left: 10px; height: 100vH; overflow: scroll; position: fixed; left: 50vW; top: 0px; width: calc(50vW - 50px); z-index: -1; } .space-top{ padding-top: 198px; } .no-scroll{ overflow: unset; } .page h2{ text-transform: uppercase; font-size: 200%; font-family: monospace; } bold{ font-weight: bold; } footer{ bottom: 0px; border-top: 1px solid black; position: fixed; width: 100vW; } .active{ font-weight: bold; } .list a{ display: inline; text-decoration: none; padding-right: 20px; color: #ddd; margin-right: 10px; padding: 2px 2px 2px 10px; transition: all 1s; text-shadow:3px 3px 2px rgb(100, 100, 100); } .list a > .thumbmove{ display: none; opacity: 0; transition: all 1s; position: fixed; } .list a:hover > .thumbmove{ display: block; opacity: 1; } .list a:hover{ color: #222; background: #ddd; text-shadow: 0px 0px 5px rgba(0,0,0,0.5); -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000000; } .list a.active{ font-weight: normal; } p.eventflyer{ width: 100%; text-align: center; } img.eventflyer{ max-width: 800px; } .all{ padding-top: 198px; } .all > a{ opacity: 0.7; transition: all 1s; max-height: 400px; max-width: 400px; display: block; height: 400px; float: left; margin: 10px; background: #eee; position: relative; } .all > a:hover{ opacity: 1; } .all > a > img{ position: absolute; bottom: 0px; left: 0px; } .single-image{ text-align: center; } .single-image > figcaption{ text-align: center; } .infrastructure{ background: #e33; } .education{ background: #3a3; } .radio{ background: #66e; } .special{ background: #800080; }