@import "";  
      @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');


      *{
        padding: 0;
        margin: 0;
        font-family: "Pixelify Sans", sans-serif;
        font-size: 20px;
      }
      
      html, body {
        height: 100%;
      }

      :root{
        --marrom-escuro: #553925;
        --marrom-normal: #804635;
        --branco: #ffffff;
        --cinza: #fafafa;
      }
      
      body{
        background: url(undertale.gif) no-repeat fixed;
        background-size: cover;
        background-position: center;
        color: var(--branco);
      }
 
      #container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 40px 150px 40px 250px;
        padding: 0px 100px 20px 100px;
        text-align: justify;
      }

      #jar-header{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        text-align: center;
      }

      div{
        margin-top: 30px;
      }

      h1, h2{
        text-align: center;
      }

      h1 span{
        font-size: 80px;
        font-weight: bolder;
        text-transform: uppercase;
      }

      h2 span{
        font-size: 30px;
        background-color: var(--marrom-normal);
        padding: 0px 20px 0px 20px;
        border-radius: 5px;
        text-transform: lowercase;
      }

      h3 span{
        font-size: 30px;
        font-weight: bolder;
        text-transform: uppercase;
      }

      a{
        text-decoration: none;
        font-weight: bold;
        color: var(--cinza);
        transition: background-color 0.5s, padding 0.5s;
      }

      a:hover{
        background-color: var(--marrom-escuro);
        padding: 5px;
        border-radius: 5px;
      }

      .summary{
        border: 2px solid var(--branco);
        text-align: center;
        padding: 10px 20px 10px 20px;
        border-radius: 10px;
        background-color: transparent;
        backdrop-filter: blur(20px);
      }

      #jar-preamble{
        display: none;
      }

      #jar-explanation, #jar-participation, #jar-benefits, #jar-requirements{
        background-color: rgba(116, 56, 50, 0.8);
        border: 2px solid var(--branco);
        padding: 30px 50px 30px 50px;
        border-radius: 5px;
        width: 90%;
        transition: transform 0.7s ease;
      }

      #jar-explanation:hover, #jar-participation:hover, #jar-benefits:hover, #jar-requirements:hover{
        transform: scale(1.05);
      }
      #jar-footer{
        text-align: center;
      }

      .sidebar{
        position: fixed;
        top: 0;
        left: -390px;
        margin: 50px 0px 50px 0px;
        padding: 10px 10px 30px 10px;
        background-color: transparent;
        backdrop-filter: blur(20px);
        width: 400px;
        padding-left: 50px;
        border: 2px solid var(--branco);
        border-radius: 10px;
        z-index: 1000;
        transition: left 1s ease;
      }

      .sidebar:hover{
        left: 0;
      }