:root {
    --color1: #eee;
    --color2: hsla(240, 100%, 50%, 0.35);
    --color3: #1b1b32;
    }
    *{
      box-sizing: border-box;
      text-align: center;
      padding: 0;
    }
    body{
      background-color: var(--color1);
    }
    main {
      margin: 30vh auto 30vh auto;
    }
    .white {
      width: 100%;
      background-color: white;
    }
    h2{
      max-width: 250px;
      color: var(--color3);
      margin: 30px auto 30px auto;
      font-family: Playball, fantasy;
    }
    #container{
      width: min(60%, 700px);
      height: 40%;
      margin: auto;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      overflow: hidden;
      background-color: var(--color2);
    }
    #subcontainer{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      gap: 5px;
      padding: 20px 40px;
    }
    #subcontainer *:not(label){
      background-color: var(--color1);
      color: var(--color3);
      font-size: 22px;
    }
    #subcontainer label {
      font-size: 22px;
      color: var(--color3);
    }
    #check-btn {
      max-width: 250px;
      margin: 0 auto 0 auto;
      height: 50px;
      padding: 5px 10px;
      border-radius: 10px;
    }
    #check-btn:hover{
      cursor: pointer;
      color: var(--color1);
      background-color: var(--color3);
    }
    #text-input {
      padding: 5px 5px; 
    }
    #result {
      width: 100%;
      height: 30%;
      margin: auto;
      font-size: 18px;
      overflow: hidden;
    }
    strong {
      font-size: 24px;
    }
    footer p{
      position: absolute;
      bottom: 0;
      font-family: Helvetica;
      font-size: 14px;
      text-align: right;
      color: var(--color3);
    }
    .red {
      color: red;
      background-color: white;
    }
    .green {
      color: green;
      background-color: white;
    }