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

body{
  font-family: 'Roboto Mono', monospace;
  font-size: 18px;
}

header{
  background-image: linear-gradient(to left, #7292A6, #224459 );
  padding: 2em;
  color: #FFF;
}

header h1{
  font-size: 2em;
}

header p{
  font-size: 1.2em;
}

main {
    display: grid;
    grid-template-columns: 0.5fr 17em 29em 17em 17em;
    grid-template-rows: 0.5fr 17em 17em ;
    grid-template-areas:
    "nav see-more program program amanda"
    "nav list formulary natalia henrique"
    "nav larissa formulary team team"
    ;
    gap: 1rem;
    padding: 1em 0;
}

nav{
  grid-area: nav;
  background-color: #b7c8cf;
  height: 100%;
}
nav ul{
  list-style: none;
  padding: 2em;
}
nav li{
  margin-bottom: 3em;
}
nav a{
  text-decoration: none;
  color: rgb(61, 109, 122);
  font-size: 2em;
}

h2{
  margin-bottom: 1em;
  font-size: 2em;
}

main #see-more{
  grid-area: see-more;
  background-color: #ebf0f2;
  padding: 2em;
}
#see-more p{
  line-height: 2em;
}
#see-more a{
  display: inline-block;
  text-decoration: none;
  border: 1px solid #224459;
  padding: 0.3em;
}

main #program{
  grid-area: program;
  background-color: #ebf0f2;
  padding: 2em;
}
#program table{
  border-collapse: collapse;
  width: 100%;

}
td{
  border: 3px solid #FFF;
  padding: 0.3em;
  padding-left: 4em;
}

main #list{
  grid-area: list;
}

main #formulary{
  grid-area: formulary;
}

figure {
  position: relative;
}
figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}
#natalia img{
  object-position: 0 50%;
}

figure figcaption {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;
  width: 100%;
  padding: 2em;
  text-align: center;
}

.list, .formulary, .team{
  background-color: #ebf0f2;
  padding: 2em;
}

main .list{
  grid-area: list;
}
main .list ul{
  line-height: 2.5em;
  padding-left: 1em ;
}

main .formulary{
  grid-area: formulary;
}
main .formulary form{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
}

main .formulary form input{
  flex-basis: 100%;
  border:  2px solid black;
  padding: 1em 1.5em;
  font-size: 1em;
}
main .formulary form input[type="checkbox"]{
  flex-basis: auto;
  width: 2em;
}
.formulary form button[type="submit"]{
  flex-basis: 70%;
  padding: 1em 2em;
  color: #a8aaab;
  font-size: 1.2em;
  margin: 0 auto;
  border: none;
  background-color: #101d20;
}

main .team{
  grid-area: team;
}

.team ol{
  list-style: disc;
  padding: 1em;
  line-height: 2em;
}

footer{
  background-image: linear-gradient(to left, #7292A6, #224459 );
  padding: 2em;
  color: #FFF;
  text-align: center;
  font-size: 1.2em;
}