/* ***************************** profile styles ***************************** */
body {
    /* background-color: #071933; */
    color: black;
    
}

hr {
    margin-top: 0;
    width: 2rem;
    padding: 0.1rem;
}

h1 {
    color: lightblue; 
    margin: 6rem 0;
    font-size: 5rem;
}
h2 {
    margin-top: 4rem;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 2.5rem;
  
    
}

 hr, h2, h3 {
    color: #d9534f;
 }
div > div> img {
    transition: transform .3s; /* Animation */
    width: 500px;
    height: 700px;
    border-radius: 2%;
    border: 0.2rem solid lightblue;
}

div > div> img:hover { 

    transform: scale(1.03); /* 103% zoom */
    border: 0.5rem solid #d9534f;
    cursor: pointer;
}
h5 {
    margin: 1rem 0;
    font-size: 1rem;
    padding-right: 2rem;
    
}
h5 > span {
    color: grey;
}
.profile {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: 800px 800px;
}

.ingrid {
    grid-column: 1/5;
}

.philip {
    grid-column: 9/11;
}

.umma {
    grid-column: 17/24;
}

.brian {
    grid-column: 5/10;
}
.ryan {
    grid-column: 13/16;
}

.bio {
    margin: 5rem 14rem;
}

/* form */
form > div, label {
    margin: 1rem 0;
}
.form {
    margin: 5rem 20rem;
}

.btn {
    margin: 2rem 0;
}

/* ***************************** mobile-view styles ***************************** */
@media screen and (max-width: 500px) {
    .logo {
        width:40%;
        height: auto;
    }
}