*{
    margin: 0;
    padding: 0;
    box-sizing: 0;
    text-decoration: none;
    list-style: none;
}
:root{
    --back-color:rgba(19, 19, 19, 0.836);
    --text-color:white;
    --stroke-color:rgba(255, 255, 255, 0.966);
    --surface-color:rgba(255, 255, 255, 0.05);
    --surface-color-hover:rgba(255, 255, 255, 0.02);
}
.light {
    --back-color:rgba(255, 255, 255, 0.836);
    --text-color:rgba(0, 0, 0, 0.856);
    --stroke-color:rgba(0, 0, 0, 0.5);
}
body{
    background: var(--back-color) ;
    height: 100vh;
}
body *{
    font-family: "Inter", sans-serif;
    color: var(--text-color);
}
#bordaBotao{
    border: solid 4px var(--stroke-color);
    border-radius: 10px;
    position: fixed;
    display: flex;
    z-index: 0;
}
.BotaoOpcoes {
      width: 40px;
      height: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      padding: 5px;
    }

    .BotaoOpcoes span {
      height: 4px;
      width: 100%;
      background-color: var(--stroke-color);
      border-radius: 2px;
      transition: 0.3s;
    }