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;
        }
    }
CC BY-SA 114514.810