*,*::after,*::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: rgb(3, 133, 255);
  font: 400 1rem arial;
}

header{
  color: white;
  text-align: center;

  & h1 {
    margin-block: 1rem;
  }
}

section{
  background-color: white;
  border-radius: 0.625rem;
  padding: 0.8rem;
  width: 500px;
  margin: auto;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.356);
  display: grid;
  gap: 0.5rem;

  & div:nth-child(1){
    display: grid;
    gap: 1rem;
    &:first-child{
      margin-top: 1rem;
    }

    & #txtano {
      border-radius: 1rem;
      border: 1px solid black;
      height: 22px;
      padding-left: 0.7rem;

      &:hover{
        border: 1px solid rgb(105, 105, 105);
      }

      &:focus{
        outline: 1px solid rgb(0, 162, 255);
        border: none;
      }
    }

    & #btn {
      padding: 0.9rem;
      border: none;
      background-color: rgb(0, 132, 255);
      color: white;
      font: 400 1.2rem arial;
      cursor: pointer;

      &:hover{
        background-color: rgb(14, 158, 214);
      }
    }
  }

  div {
    text-align: center;
    & > input{
      width: 100px;
      display: grid;
      justify-self: center;
      border-radius: 0.4rem;
    }
  }

  & div#res{
    margin-block: 1rem;
    display: grid;
    justify-content: center;
    gap: 1rem;

    & #foto {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      object-fit:cover; /* A mágica acontece aqui! */
      margin: auto;
    }
  }
}

footer{
  color: white;
  text-align: center;
  font-style: italic;
  margin-block: 1rem;
}