:root {
    --color1: #1b1b32;
    --color2: #a00000;
    --color3: #f7f7f7;
    }
    *{
      box-sizing: content-box;
      text-align: center;
      padding: 0;
      font-family: "Cinzel", serif;
      font-optical-sizing: auto;
      font-style: normal;
    }
    body{
      background-color: var(--color1);
    }
    h1{
      max-width: 250px;
      color: var(--color3);
      margin: 30px auto 30px auto;
    }
    form{
      width: 40%;
      height: 30%;
      margin: auto;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      background-color: var(--color2);
      border: 2px solid var(--color3);
      overflow: hidden;
    }
    form *{
     font-size: 16px;  
     font-weight: 600;
    }
    #number {
      background: linear-gradient(#fc0, #fa0);
    }
    #convert-btn {
      padding: 5px 15px; 
    }
    #output {
      width: 40%;
      height: 15%;
      padding: 10px;
      border-radius: 10px;
      margin: 10px auto;
      background-color: var(--color3);
      font-weight: 600;
      overflow: hidden;
    }
    .hidden {
      display: none;
    }
    footer p{
      position: absolute;
      bottom: 0;
      font-family: Helvetica;
      font-size: 14px;
      text-align: right;
      color: var(--color3);
    }