*, 
*:before, 
*:after{
    box-sizing: border-box;
}
html{
    font-size: 16px;
}
@font-face {
    font-family: MatrixType;
    src: url("../assets/font/Matrixtype.ttf");
}
body{
    position: relative;
}
.screen_holster{
    /* border: 0.5rem solid white; */
}
.help_div{
    visibility: hidden;
    position: absolute;
    top: 14%;
    left: 16%;
    width: 1030px;
    height: 455px;
    background-color: green;
    border: 0.1rem solid white;
    border-radius: 0.5rem;
    padding: 1rem;
}
.close_button{
    text-align: right;
    font-size: 2rem;
}
.help_content{
    width: 100%;
    height: 90%;
    border: 0.1rem solid white;
    border-radius: 0.5rem;
}
.help_device{
    background-color: gray;
    height: 100%;
    width: 40%;
    border-radius: 0.5rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    padding: 1rem;
}
.help_video{
    border-radius: 0.5rem;
    background-color: gray;
    height: 100%;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}
.microbit_gif{
    border-radius: 0.5rem;
    height: 100%;
    width: 100%;
}
.microbit_image{
    border-radius: 0.5rem;
    width: 50%;
}
.microbit_graphic{
    border-radius: 0.5rem;
    width: 75%;
}
.microbit_text{
    color: white;
}
.help_content{
    display: flex;
    flex-direction: row;
}
.start{
    color: green;
}
.stop{
    color: red;
}
div{
    font-family: MatrixType;
}
.test{
    /* background-image: url(../assets/images/wall-group.svg); */
    background-repeat: repeat;
    /* background-size: 100% 100%; */
    background-size: cover;

}
/* ?STRUCTURE */
.dashboard{
    /* background-color: blueviolet; */
    height: 6rem;
    display: flex;
    width: 100%;
    background-color: #cccccc;
}
.main-dashboard{
    width: 70%;
    display: flex;
    align-items: center;
}
.button-dashboard{
    width: 15%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 0rem;
}
.buttons{
    background-color: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height:4rem;
    width: 6rem;
    border: 0.1rem solid white;
    border-radius: 1rem;
    padding: 0.5rem;
}
.search_button{
    background-color: blue;
}
.help_button{
    background-color: green;
}
.connect{
    stroke: white;
    border-radius: 1rem;
    height: 100%;
    width: 100%;
}
.connect:hover{
    stroke: red;
    border-radius: 1rem;
    height: 100%;
    width: 100%;
}
.info{
    fill: white;
    border-radius: 1rem;
    height: 100%;
    width: 100%;
}
.info:hover{
    fill: orange;
    border-radius: 1rem;
    height: 100%;
    width: 100%;
}
.wall{
    height:auto;
    display: flex;
    width: 100%;
    /* background-color: #cccccc; */
}
.screen{
    padding: 1rem;
    background-color: #cccccc;
    width: 70%;
}
.floor{
    /* background-color: turquoise; */
    height: 12.85rem;
}
/* ?STRUCTURE */

/* ?TIME */
.time-dashboard{
    width: 15%;
    display: flex;
    align-items: center;
}
.dot-matrix-time{
    background-color: black;
    border: 0.5rem solid grey;
    border-radius: 1rem;
    width: 100%;
    height: 4rem;
    color: yellow;

    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 1rem; */
}
.time{
    font-family: MatrixType;
    font-size: 2em;
}
/* ?TIME */

/* ?MAIN DOTMATRIX */
.dot-matrix-main{
    background-color: black;
    border: 0.5rem solid grey;
    border-radius: 1rem;
    width: 100%;
    height: 4rem;
    color: yellow;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}
.main-text{
    font-size: 2rem;

}
/* ?MAIN DOTMATRIX*/


/* ?LEFT PANEL */
.left-wall{
    display: flex;
    align-items: center;
    background-image: url(../assets/images/left-wall-background.svg);
    width: 15%;
}
.dot-matrix-left-panel{
    background-color: black;
    border: 0.5rem solid grey;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    color: yellow;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 0rem 1rem 1rem 1rem;
    gap: 1rem;
    
}
.dot-matrix-altitude-heading{
    text-align: center;
    font-size: 1.75rem;
    margin: 1rem;
}
.dot-matrix-altitude-text{
    font-size: 1.75rem;
    color: blueviolet;
    text-align: center;
}
.dot-matrix-speed-heading{
    text-align: center;
    font-size: 1.75rem;
    margin: 1rem;
}
.dot-matrix-speed-text{
    font-size: 1.75rem;
    color: blueviolet;
    text-align: center;
}
.dot-matrix-fuel-heading{
    text-align: center;
    font-size: 1.75rem;
    margin: 1rem;
}
.dot-matrix-fuel-text{
    font-size: 1.75rem;
    color: blueviolet;
    text-align: center;
}

/* ?LEFT PANEL */

/* ?RIGHT PANEL */
.right-wall{
    display: flex;
    align-items: center;
    background-image: url(../assets/images/left-wall-background.svg);
    width: 15%;
    height: auto;
}

.dot-matrix-right-panel{
    background-color: black;
    border: 0.5rem solid grey;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    color: yellow;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 0rem 1rem 1rem 1rem;
    gap: 1rem;
    
    
}
.dot-matrix-health-heading{
    text-align: center;
    font-size: 1.75rem;
    margin: 1rem;
}
.dot-matrix-health-text{
    font-size: 1.75rem;
    color: blueviolet;
    text-align: center;
}
.dot-matrix-temp-heading{
    text-align: center;
    font-size: 1.75rem;
    margin: 1rem;
    /* letter-spacing: 0.0000005rem; */
}
.dot-matrix-temp-text{
    font-size: 1.75rem;
    color: blueviolet;
    text-align: center;
}
.dot-matrix-engine-heading{
    text-align: center;
    font-size: 1.75rem;
    margin: 1rem;
    /* letter-spacing: 0.0000005rem; */
}
.dot-matrix-engine-text{
    font-size: 1.75rem;
    color: blueviolet;
    text-align: center;
}
/* ?RIGHT PANEL */