*{ margin: 0; padding: 0; box-sizing: border-box; transition: 0.5s; } ::-webkit-scrollbar { display: none; } body { margin: 10px; background: #181616;; font-family: Anka; color: #214c12; padding: 10px; max-width: 75ch; font-size: 1em; } canvas { width: 100%; height: 100%; display: flex; align-items: center; z-index: 1; position:fixed; top:0; bottom:0; left:0; right:0; } @font-face {font-family: Anka; src: url("fonts/AnkaCoder-b.ttf");} .cover { width: 100%; max-width: 100%; height:100%; background-color:#000000; padding: 10px; border-radius: 5px; box-shadow: 0 0 10px 2px; z-index: 10; color: black; position: fixed; top: 50%; left: 50%; z-index:9; transform: translate(-50%, -50%); opacity: 1; visibility: hidden; } #game-text{ position: sticky; margin-top: 20px; z-index: 10; max-width: 30%; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#242823;} /*button { width: 1%; height: 30px; text-align:left; font-size: 1em; margin-top:15px; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: red; font-family: Anka; color: yellowgreen; background-color:rgba(255, 0, 0, 0);; position: fixed; text-decoration: none; z-index: 10; top: 50%; border-radius: 20px; } button:hover { width: 1%; height: 30px; text-align:left; font-size: 1em; margin-top:15px; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: red; font-family: Anka; color: yellowgreen; background-color:rgba(255, 0, 0, 0); position: fixed; text-decoration: none; z-index: 10; top: 50%; scale: 160%; }*/ #yes{ left: 35%; } #no{ right:35%; } #forward{ top:35%; left: 50%; transform: translate(-50%, -50%); } #back{ top: 70%; left: 50%; transform: translate(-50%, -50%); } .container { max-height: 70%; background-color: #c9d2c1e3; background-color: gray; padding: 10px; border-radius: 5px; z-index: 10; color: #214c12; position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); opacity: 1; padding: 1em; box-shadow: 0 0 40px #214c12; overflow-y: scroll; width: 60vw; } .container:hover { box-shadow: 0 0 60px #4eb32b; } .marquee { background: red; white-space: nowrap; -webkit-animation: rightThenLeft 4s linear; } @-webkit-keyframes rightThenLeft { 0% {margin-right:0;} 50% {margin-right:100%;} 100% {margin-right:0;} } /*.container:hover{box-shadow: 0 0 10px black, 0 0 20px black, 0 0 30px yellowgreen;}*/ .container2 { width: 50%; max-width: 80%; background-color: white; padding: 10px; border-radius: 5px; box-shadow: 0 0 10px 2px; z-index: 10; color: #214c12; position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; } #text{max-width: 90ch; top: 45%; color:#242823; } #title{transform: rotate(90deg); margin-top: 18vw; margin-left: 3vw;} #title:hover{z-index: 100; color: red; } .btn-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin-top: 20px; z-index: 10; } .btn { background-color: black; border: rgba(255, 0, 0, 0); border-radius: 5px; padding: 5px 10px; color: #d3ff00; outline: orange; z-index: 10; font-family: Anka; margin-left: 3vw; margin-right: 3vw; } .btn:hover { border-color: black; background-color: darkgray; z-index: 10; box-shadow: 0 0 10px #214c12; } #text{z-index: 10; color: #214c12;padding: 10px;} button{z-index:10; background-color: white;} p{z-index: 10; max-width: 85ch; color: #214c12; padding: 0px; transition: all 0.5s ease-in-out; } p:hover{z-index: 20; max-width: 85ch; color: #214c12; padding: 0px; transition: all 0.5s ease-in-out; } .header{ position: relative; } .header:hover{ position: relative; z-index: 200; color: red; text-shadow: 0 0 2px black; } #foot{ color: black; font-size: 0.5vw; } a{ color: blue; font-size: 10pt; cursor: pointer; text-decoration: none; color: white; } a.home{ color: blue; mix-blend-mode: luminosity; border-radius: 5px; /* border: solid 0.5pt ; */ padding-right: 6px; padding-left: 6px; padding-top: 1px; padding-bottom: 1px; /* mix-blend-mode: exclusion; */ }