* {
    font-family: 'Courier New', Courier, monospace;
    /* background-color: #efefef; */
    letter-spacing: 0.15em;

}

.container {
    border: 4px solid #000;
    border-style: double;
    height: 85vh;
    width: 100%;
    padding-top: 10px;
    box-sizing: border-box;
}

.header {
    text-align: center;
    line-height: 2px;
    padding-bottom: 10px;
}

.spe {
    color: rgba(10, 9, 9, 0.5);
    font-family: 'Lora', serif;
    font-weight: bold;
}

.li {
    border-top: 2px solid #000;
    border-width: 40%;
    border-bottom: 1px solid rgb(143, 137, 137);
    margin-inline-start: 21%;
    margin-inline-end: 21%;
    padding: 15px 12px;
    font-weight: bold;
    text-align: center;
    /* width: 80%; */
    display: flex;
    justify-content: center;
}

.le {
    display: inline-block;
    margin: 5px 35px;
    color: rgba(10, 9, 9, 0.9);
    font-weight: bold;
    cursor: pointer;
}

p {
    display: block;
    font-weight: bolder;
    text-align: center;
    max-width: 730px;
    margin: 30px auto;
}

#li{
    color: rgb(252, 0, 0);
}

.fig{
    margin: 0 20px;

}
.figure{
    display: flex;
    justify-content: center;
}
:root{--grey:#313131;
    --white:#fff;
    --optional:#D1D1D1;
  }
.btn{
    display: flex;
    align-items: flex-end;
    width: 300px;
    height: 18vh;
    margin: auto;
}
.btn-but{
  display: flex;
 justify-content: center;
 align-items: center;
 background: none;
 color: var(--black);
 border: 2px solid black;
 text-transform: capitalize;
 font-size: 25px;
 margin: 30px auto;
 padding: 15px 25px;
 border-radius: 5px;
 position: relative;
 transition: color 0.3s ease-in-out;
 width: 180px;
 text-align: center;
 text-decoration: none;
 font-weight: 700;
}

.btn-but::before{
content: "";
position: absolute;
width: 0;height: 100%;
background: var(--grey);
top: 0;left: 0;
transition: width 0.3s ease-in-out;
z-index: -1;
}
.btn-but:hover::before{width: 100%;}

.btn-but:hover{color: var(--white);}