body{
    margin: 0;
}

/* Inicio container  */
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:coral;
    height: 100vh;
}
/* Fin cotainer  */

/* Inicio fondo */
#fondo{
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95vh;
    width: 40vw;
    border-radius: 100%;
}
/* Fin fondo  */

/* Inicio carcasa */
#carcasa{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 10fr 10fr;
    width: 540px;
    height: 860px;
    border-radius: 30px 30px 100px 30px;
    background-color: #d5ced5;
    box-shadow:
        0px 0px 1px #0006 inset,
        -7px -6px 1px #0003 inset;
    border: 1px solid black;
}
/* Fin carcasa */

/* Inicio Top carcasa */
#carcasa-top{
    display: grid;
    grid-template-columns:1fr 5fr 1fr ;
    grid-template-rows: 5fr 1fr;
}

.small-line{
    display: flex;
    justify-content: center;
}

.small-line-2{
    background-color: rgb(173, 173, 173);
    width: 5px;
    height: 100%;
}

#grand-line{
    background-color: rgb(173, 173, 173);
    display: flex;
    justify-content: center;
    grid-column: 1 / 4;
    height: 100%;
    border-right: 7px solid rgb(163, 163, 163);
}
/* Fin Top carcasa */

/* Inicio pantalla */
#carcasa-mid{
    display: flex;
    justify-content: center;
    align-items: center;
}

#mid-pant{
    display: flex;
    align-items: center;
    background-color: #717286;
    width: 450px;
    height: 350px;
    border-radius: 20px 20px 100px 20px;
    border: 2px solid black;
    
}

#bat{
    display: grid;
    grid-template-columns:1fr 3fr 1fr ;
    grid-template-rows: 1fr 1fr;
    width: 90px;
    height: 50px;
}

#luz{
    display: flex;
    justify-content: center;
    align-items: center;
}

#luz-color{
    background-color: #d32202;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    box-shadow:
        1px 1px 1px rgba(61, 61, 61, 0.4) inset,
        -1px -1px 1px rgba(61, 61, 61, 0.4) inset;
}

#bat-txt{
    display: flex;
    justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
}

#pant{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #9ca04c;
    width: 275px;
    height: 275px;
    border: 1px solid black;
    box-shadow:
    3px 4px 2px #0006 inset,
    -2px -2px 8px #0003 inset;
}
/* Final pantalla */

/* Inicio carcasa-bot  */

#bot-1{
    display: flex;
    justify-content: center;
    height: 10%;
}

#bot-2{
    display: flex;
    align-items: center;
    padding-left: 35px;
    height: 50%;
}

#bot-3{
    display: flex;
    justify-content: end;
    align-items: flex-start;
    gap: 20px;
    padding-right: 30px;
    height: 40%;
}
/* Final carcasa-bot  */

/* Inicio Logo */
#logo{
    width: 150px;
}
/* Fin Logo  */

/* Inicio cruz */
#cruz{
    background-color: #acacac;
    border-radius: 100px;
    display: grid;
    grid-template-columns: 1fr 3fr 3fr 3fr 1fr;
    grid-template-rows: 1fr 3fr 3fr 3fr 1fr;
    height: 180px;
    width: 180px;
}

#cruz-top{
    background-color: #1B1B1B;
    border-radius: 10px 10px 0px 0px;
    border-top: 5px rgb(83, 83, 83) solid;
    box-shadow: 0 0 1px 2px #000;
}

#cruz-left{
    background-color: #1B1B1B;
    border-radius: 10px 0px 0px 10px;
    border-top: 5px rgb(83, 83, 83) solid;
    box-shadow: 0 0 1px 2px #000;
}

#cruz-mid{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1B1B1B;
}

#cono{
    background-color: #1B1B1B;
    width: 94%;
    height: 94%;
    border-radius: 100%;
    background: conic-gradient(rgb(83, 83, 83) 0 1%, transparent 10% 35%, rgb(83, 83, 83) 50%, transparent 65% 90%, rgb(83, 83, 83) 99%);
}

#cruz-right{
    background-color: #1B1B1B;
    border-radius: 0px 10px 10px 0px;
    box-shadow: 0 0 1px 2px #1B1B1B;
    border: 2px rgb(26, 26, 26) solid;
    border-top: 5px rgb(83, 83, 83) solid;
}

#cruz-bot{
    background-color: #1B1B1B;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0 0 1px 2px #1B1B1B;
    border: 0px rgb(26, 26, 26) solid;

}

.upbot{
    grid-column: 1 / 6;
}

.side{
    grid-column: 1 / 3;
}

.side2{
    grid-column:  4 / 6;
}
/* Fin cruz */

/* Inicio botones */
#botn{
    display: flex;
    justify-content: end;
    align-items: center;
    height: 200px;
    width: 280px;
    padding-right:0px;
}

#fondo-botn{
    background-color: #acacac;
    border-radius: 50px;
    display: flex;
    width: 180px;
    height: 100px;
    rotate: -25deg;
    align-items: center;
    justify-content: space-between;
    padding-right: 10px;
    padding-left: 10px;
}


#botn-L{
    background-color: #e22a2a;
    width: 65px;
    height: 65px;
    border-radius: 100%;
    box-shadow: 0 0 1px 2px rgb(105, 13, 13); 
    border: 2px rgb(145, 18, 18) solid;
    border-top: 5px rgb(230, 138, 138) solid;
}

#botn-R{
    background-color: #e22a2a;
    width: 65px;
    height: 65px;
    border-radius: 100%;
    box-shadow: 0 0 1px 2px rgb(105, 13, 13); 
    border: 2px rgb(145, 18, 18) solid;
    border-top: 5px rgb(230, 138, 138) solid;
}
/* Fin botones */

/* Inicio options */
#options{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 200px;
    height: 100%;
}

#options-2{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr 3fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    width: 100%;
    height: 100px;
}

#select{
    height: 70%;
    width: 90%;
    background-color: #1B1B1B;
    border-radius: 100px;
    rotate: -20deg;
    box-shadow: 0 0 1px 1px #000; 
    border: 1px rgb(26, 26, 26) solid;
    border-top: 3px rgb(83, 83, 83) solid;
}

#start{
    height: 70%;
    width: 90%;
    background-color: #1B1B1B;
    border-radius: 100px;
    rotate: -20deg;
    box-shadow: 0 0 1px 1px #000; 
    border: 1px rgb(26, 26, 26) solid;
    border-top: 3px rgb(83, 83, 83) solid;
}

.option-def1{
    grid-column: 1 / 6;
}

#select-txt{
    display: flex;
    align-items: flex-end;
    justify-content: end;
    font-family: 'Courier New', Courier, monospace;
    rotate: -20deg;
}

#start-txt{
    display: flex;
    align-items: flex-end;
    justify-content: end;
    font-family: 'Courier New', Courier, monospace;
    rotate: -20deg;
}
/* Fin options */

/* Inicio speak */
#speak{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100%;
}

#fondo-speak{
    display: flex;
    justify-content: center;
    align-items: center;
    rotate: -40deg;
    width: 100%;
    height: 75%;
    gap: 10px;
    padding-left: 25px;
}

.salida-speak{
    background-color: grey;
    width: 10px;
    height: 80%;
    border-radius: 50px;
    padding-top: 6px;
}

.salida-speak2{
    background-color: rgb(90, 90, 90);
    width: 5px;
    height: 80px;
    border-radius: 3px; 
}
/* Fin speak */