.body{
    display: grid;
    place-items: center;
    text-align: center;
}
h1{
    margin-top: 50px;
    margin-bottom: 50px;
    color:rgb(73, 166, 233);
}
.container{
    background:white;
    padding: 1.5rem 2rem;
    border-radius: .5rem;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .2);
    transition: all .2s linear;
    text-align: center;
    width: 60vw;
    margin-bottom: 50px;
  }

  .container:hover{
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .4);
  }

  .image{
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 1.5rem;
  }

  #person-img {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    
  }

  #person-name {
    text-transform: capitalize;
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
  }
  #person-job {
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    color: rgb(73, 166, 233);
    font-size: 1rem;
  }

  #person-info {
    margin-bottom: 0.75rem;
  }

  .prev-btn,
  .next-btn {
    color: rgb(110, 190, 247);
    font-size: 1.5rem;
    background: transparent;
    border-color: transparent;
    margin: 0 0.5rem;
    transition: all .3s ease-in-out;
    cursor: pointer;
  }
  .prev-btn:hover,
  .next-btn:hover {
    color:rgb(45, 135, 200) ;
  }
  .random-btn {
    margin-top: 0.5rem;
    background: rgb(235, 247, 255);
    color: rgb(73, 166, 233);
    padding: 0.25rem 0.5rem;
    text-transform: capitalize;
    border-radius: 1rem;
    transition: all .3s ease-in-out;
    border-color: rgb(73, 166, 233);
    cursor: pointer;
  }
  .random-btn:hover {
    background:  rgb(73, 166, 233);
    color: rgb(6, 50, 81);
  }