body {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: Arial;
  background: #2e2e2e;
  gap: 30px;
  margin-top: 35px;
}

main {
  width: 500px;
  height: 707px;
  display: flex;
}

/* LADO ESQUERDO */

.ladoEsquerdo {
  width: 200px;
  height: 100%;
  background: #322f51;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 30px;
}

.ladoEsquerdo img {
  object-fit: contain;
  height: 150px;
  width: 150px;
  border-radius: 75px;
  border: 2px solid #fff;
}

.contentEsquerdo {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 30px;
}

.contentE * {
  margin: 0;
  padding: 0;
}

.contentE {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}

.contentE p {
  font-size: 12px;
  font-weight: 200;
}

.contentE p::before {
  content: "● ";
}

.tituloE {
  margin-bottom: 5px;
}

.quadradinhoE {
  width: 15px;
  height: 2px;
  background: #fff;
}

/* LADO DIREITO */

.ladoDireito {
  width: 300px;
  height: 100%;
  background: #fff;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: left;
  padding: 20px;
}

.ladoDireito a {
  color: #322f51;
  text-decoration: none;
}

header * {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

h1 {
  color: #322f51;
}

header div {
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.contentD * {
  margin: 0;
  padding: 0;
}

.contentD {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.contentD p,
.contentD li {
  color: #555;
}

.contentD ul {
  margin-left: 10px;
}

.quadradinhoD {
  width: 20px;
  height: 4px;
  background: #322f51;
}

.tituloD {
  color: #322f51;
  font-size: 15px;
}

.ul-contentD1 {
  margin-bottom: 10px;
}

/* FOOTER */

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 20px;
  color: #ccc;
}

footer * {
  padding: 0;
  margin: 0;
}

footer div {
  display: flex;
  align-items: center;
  gap: 20px;
}

footer a {
  color: #bbb;
}

/* RESPONSIVIDADE */

@media (max-width: 430px) {
  main {
    width: 300px;
    height: 424.2px;
  }

  /* LADO DIREITO */

  .ladoDireito {
    width: 380px;
    gap: 10px;
  }

  header div {
    font-size: 7px;
  }

  .ladoDireito h1 {
    font-size: 20px;
  }

  .contentD h3 {
    font-size: 9px;
  }

  .contentD {
    font-size: 6.5px;
  }

  .quadradinhoD {
    height: 2px;
    width: 15px;
  }

  .ul-contentD1 {
    margin-bottom: 5px;
  }

  /* LADO ESQUERDO */

  .ladoEsquerdo {
    width: 120px;
    gap: 10px;
  }

  .ladoEsquerdo img {
    height: 90px;
    width: 90px;
    border-radius: 45px;
    border: 2px solid #fff;
  }

  .quadradinhoE {
    height: 2px;
    width: 15px;
  }

  .tituloE {
    font-size: 9px;
  }

  .contentE p {
    font-size: 6.5px;
  }

  .contentEsquerdo {
    gap: 10px;
  }

  /* FOOTER */

  footer {
    text-align: center;
    gap: 15px;
  }

  footer h2 {
    font-size: 18px;
  }

  footer div {
    gap: 10px;
    font-size: 9px;
  }

  footer a {
    font-size: 10px;
  }
}