Mirror Style
#theCloseButton{ width:15px; height:15px; position:fixed; right:0; top:0; text-align:center; line-height:15px; overflow:hidden; color:darkred; font-weight:bolder; background-color:lightgrey; cursor:pointer; user-select: none; border:4px groove white; z-index:1000; } #theCloseButton:hover { border: 4px outset whitesmoke; } #theCloseButton:active { border: 4px inset white; color:red;background-color:whitesmoke; } #lights{ display:none; animation:showoff 0.5s 1 forwards; flex-direction:column; justify-content:space-around; width:90%; flex-grow: 1; } .light{ border-top-left-radius:10px; border-bottom-left-radius:10px; width:60%; height:3px; border:2px inset white; transform: translate(-4px, 0px); } #dashBoard{ display:flex; justify-content:space-between; width:100%; height:100%; } #resultBoard{ animation:showoff 0.5s 1 forwards; width:0; display:none; flex-direction:column; background-color: white; color: black; border: 4px groove white; margin-bottom:2px; overflow-x:hidden; white-space: nowrap; border-radius: 10px; } .resultBoard{ height:32%; padding-left:5px; font-weight:bolder; padding-right:5px; } #information{ display:none; user-select: none; flex-direction:column; width:0; align-self:center; animation:showoff 0.5s 1 forwards; overflow-x:hidden; flex-grow: 1; margin-bottom:5px; padding:0px 5px 0px 5px; background-color: whitesmoke; border: 5px groove white; padding-left: 5px; max-height: 25%; } #textWindow{ overflow-x:hidden; overflow-y:scroll; flex-grow: 1; white-space: nowrap; margin-bottom:2px; background-color: white; border: 5px groove white; border-radius: 5px; } #textWindow::after { content: "◣"; animation: typeBlink 1s infinite } #switches{ display:flex; justify-content: space-around; width:100%; } .switch { border: 4px groove white; width:30%; text-align:center; cursor:pointer; padding-left:5px; padding-right:5px; overflow-x:hidden; white-space: nowrap; font-weight:bold; } .switch:hover { border: 4px outset white; transform: translate(-1px, -1px); } .switch:active { border: 4px inset white; color:white;background-color:grey; transform: translate(-1px, -1px); } #analize{ display:none; animation:Analize 0.5s 1 forwards; width:0px; padding-left:0px; padding-right:0px; overflow-x:hidden; white-space: nowrap; } #logoBoard{ display:flex; flex-direction:column; align-items:start; } #mainBoard{ display:flex; opacity:0.5; transform: rotateZ(90deg); flex-direction:column; width:65px; height:80px; background-color: lightgray; border: 5px groove grey; border-radius: 0px; } .rhombic{ width:60px; height:60px; cursor:pointer; color:white; opacity:0; background-color: whitesmoke; border: 7px ridge whitesmoke; } .rhombic:hover { border: 7px groove white; } .rhombic:active { background-color: gray; color:white; border: 5px inset whitesmoke; } .rhombicIn{ width:0%; height:0%; animation:rhombicShow 0.3s 1 forwards; display:none; } #rhombic_1{ z-index:99; } #rhombic_2{ z-index:98; } #rhombic_3{ z-index:97; } .loading{ display:flex; justify-content:center; align-items:center; width:0%; height:0%; } .loader{ overflow-x:hidden; overflow-y:hidden; white-space: nowrap; width:0; height:40px; text-align:end; color:white; } #load1{ background-color:darkred; display:none; animation:Loader 0.5s 1 forwards; } #load2{ background-color:darkblue; } #load3{ background-color:yellow; color:black } @keyframes Loader{ from{width:0;} to{width:100%;} } @keyframes showoff{ 0%{width:0px;} 100%{width:90%;} } @keyframes change{ 0%{width:80%;} 100%{width:0px;} } @keyframes rhombicShow{ 0%{width:0%;height:0%} 100%{width:100%;height:100%} } @keyframes Analize{ 0%{ width:0px; padding-left:0px; padding-right:0px; } 100%{ width:30%; padding-left:5px; padding-right:5px; } } @keyframes typeBlink { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes ready{ from{ transform: rotateZ(0deg)skew(0deg,0deg); opacity:0; } to{ transform: rotateZ(-45deg)skew(15deg,15deg); opacity:1; } } @keyframes sleep{ from{ transform: rotateZ(-45deg)skew(15deg,15deg); opacity:1; } to{ transform: rotateZ(0deg)skew(0deg,0deg); opacity:0; } }