@font-face{
    font-family:"Terminal Grotesque";
    src:url("terminal-grotesque.ttf") format("truetype");
}
@font-face{
    font-family:"Terminal GrotesqueOpen";
    src:url("terminal-grotesque_open.otf") format("opentype");
}

body{
    background-color: rgb(163, 162, 162);
    margin: 0%;
    font-family:"Arial";
    margin: 5%;
    font-size: 2em;
}
.intro_text{
    position: fixed;
    width: 60%;
    text-align: right;
    bottom: 5%;
    right: 5%;
    
}

#time{
    position: fixed;
    top: 5%;
    right: 5%;
    color: rgb(68, 80, 248);
}
/* span{
    animation: disapear 5s  0s infinite ;
}
span:hover{
    animation: none;
    color: #4450f8;
} */


.floor{
    width: 70%;
    display: flex; 
    margin-bottom: .5%;
}
a{
    text-decoration: none;
    color:black
}
.block1{
    height: 30px;
    width: 100px;
    background-color: black;
    margin-left: 5%;
}
.block2{
    height: 30px;
    width: 100px;
    outline-style: solid;
    outline-width: 2px;
    outline-color: black;
    margin-left: 5%;
}
.block3{
    height: 30px;
    width: 100px;
    background-color: black;
    margin-left: 5%;
    filter: blur(3px);
    opacity: .3;
}

/* @keyframes disapear{
    from{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    to{
        opacity: 0;
    }

} */

img{
    height: 150px;
    width: auto;
}
.bag2.active{
    display: block;
}
.bag1.inactive{
    display: none;
}
.light2.active{
    display: block;
}
.light1.inactive{
    display: none;
}
.think2.active{
    display: block;
}
.think1.inactive{
    display: none;
}
.open{
    display: none;
}
.off{
    display: none;
}