@font-face { font-family: '04b_03'; src: url('../ttf/04b03.ttf') format('truetype'); } #overlay { position: absolute; text-align: center; padding-top: 450px; top: 0; left: 0; width:100%; height:100%; background-color: black; z-index: 999; } html { font-family: "04b_03"; color: white; cursor: url("../cur/cursor2x.cur"), auto; text-shadow: 1px 1px #000000; } #mainframe { width: 100%; border: 0px; cursor: url("../cur/cursor2x.cur"), auto; } a { cursor: url("../cur/pointer2x.cur"), auto; } img { image-rendering: pixelated; } .hover-tilt { transition: transform .1s ease-in-out; rotate: -1.5deg; } .hover-tilt:hover { transform: rotate(3deg); } #main-container { height: 100%; width: 800px; margin: auto; } #menu-div { text-align: center; background-image: url("../img/orange-banner.jpg"); background-size: cover; color: white; padding: 15px; margin-top: -18px; } #menu-div a { color: white; text-decoration: none; } #menu-div h1 { margin-left: 18px; } .menu-item { text-align: center; display: inline-block; width: 118px; } .menu-item img { height: 50px; margin: auto; display: block; } #music-player { position: fixed; left: 5px; height: 66px; image-rendering: pixelated; transition: bottom .4s ease-in-out; } #music-player-base { float: left; width: 114px; height: 66px; background-color: #141414; background-image: url("../img/player_pause.png"); background-size: contain; } #music-player-song { position: relative; float: right; height: 66px; min-width: 700px; margin-left: 5px; background-color: #141414; background-image: url("../img/player_song.png"); background-size: 100% 100%; transition: top .4s ease-in-out; } #song-text { position: relative; font-weight: 700; color: black; margin: 10px; top: 30%; } .player-play { background-image: url("../img/player_play.png")!important; } #music-player-overlay { width: 100%; height: 100%; background-image: url("../img/player_overlay.png"); cursor: url("../cur/pointer2x.cur"), auto; background-size: contain; } /* PAGES STUFF */ .full-width { left: 50px; width: 700px; } .half-width { width: 300px; } .center { text-align: center; } .left { text-align: left; } .right { text-align: left; } .tilt-right { rotate: 2deg; } .tilt-left { rotate: -2deg; } .tilt-45 { rotate: 45deg; } .flip-x { transform: scaleX(-1); } .flip-y { transform: scaleY(-1); } .white-shadow { text-shadow: 1px 1px white; } .deeppink { color: deeppink; } .mediumvioletred { color: mediumvioletred; } .el { position: absolute; overflow-wrap: break-word; font-size: large; line-height: 25px; } .up-down { animation: MoveUpDown 3s linear infinite; position: relative; left: 0; bottom: 0; } @keyframes MoveUpDown { 0%, 100% { bottom: 0; } 50% { bottom: 10px; } }