body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: rgb(248,247, 243);
  padding: 2em;
  color: rgb(59, 16, 59);
}

a {
  color: rgb(59, 16, 59);
}

main {
  max-width: 800px;
  margin: 0 auto;

  display: flex;
  gap: 60px;
  margin-bottom: 2em;
}

.contact-section {
  max-width: 800px;
  margin: 0 auto;

  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;

  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  margin-top: 1em;
}

h1 {
  margin-bottom: 6px;
  color: rgb(52, 118, 150);
  font-size: 60px;
  letter-spacing: 3px;
}

.subtitle {
  font-weight: bold;
  letter-spacing: 4px;
}

.logo-container {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.info-container {
  flex: 1 1 0;
}

.logo-container img { max-width: 320px;}

img { width: 100%; }

ul { 
  font-size:20px; 
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left: 0;
  padding-left: 20px;
  letter-spacing: 2px;
  font-size: 21px;
  font-weight: bold;  
  list-style: none;
}

ul li:before {
  content: "\00a0";
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  top: 6px;
  margin-right: 18px;
  border: 2px solid rgb(59, 16, 59);
}

ul li:first-child:before { background: rgb(247, 221, 71);}
ul li:nth-child(2):before { background: rgb(112, 173, 218);}
ul li:nth-child(3):before { background: rgb(228, 147, 57);}
ul li:nth-child(4):before { background: rgb(52, 119, 153);}
ul li:nth-child(5):before { background: rgb(219, 56, 89);}


@media only screen and (max-width: 900px) {
  main { gap: 30px; }
  h1 { font-size: 50px; }
}

@media only screen and (max-width: 800px) {
  main { gap: 20px; }
  h1 { font-size: 40px; }

  .contact-section {
    font-size: 16px;
  }

  ul { font-size: 16px; }
}

@media only screen and (max-width: 750px) {
  body { padding: 1em; }
  main { flex-direction: column; gap: 0; margin-bottom: 1em; }
  .logo-container { justify-content:center; }
  .info-container { 
    display:flex; 
    flex-direction: column;
    justify-content:center; 
    align-items: center;
    gap: 15px;
  }

  ul { gap: 10px; }
  ul li:before {  
    width: 12px;
    height: 12px;
    top: 4px;
    margin-right: 10px;
  }
}

@media only screen and (max-width: 550px) {
  .logo-container img { max-width: 180px;}
  .contact-section { flex-direction:column; }
}