:root {
  --first-color: linear-gradient(30deg, #235423 -10%, #052474 100%);
  --second-color: linear-gradient(6deg, #03221efe 30%, #4408c5 100%);
  --third-color: linear-gradient(20deg, #80094c 15%, #ae380a 100%);
  --fourth-color: rgba(161, 5, 130, 0.662);
}

html {
  /* Setting a base font size of 10px give us easier rem calculations
       Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth
     */
  font-size: 10px;
}

body {
  /* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1.9rem;
  line-height: 1.5;
  text-align: center;
  color: rgb(132, 144, 147);
  background: #FFFFFF;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 30px 30px 30px 30px;
  background: var(--first-color);
  margin-bottom: -2%;
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

img {
  max-width: 100%;
  flex-direction: column;
  display: block;
  height: auto;
  margin: 0 auto;
  border-radius: 30px;
}

#img-div {
  background: var(--third-color);
  padding: 10px;
  border-radius: 40px;
  viewport-fit: cover;
  margin: 0;
}

#img-caption {
  margin: 15px 0 5px 0;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

#headline {
  margin: 30px 0px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background: var(--fourth-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 40px;
}

ul {
  max-width: 750px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
}

li {
  margin: 16px 0;
}

 .contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--second-color);
  margin: 30px 8px;
  border-radius: 0px;
  margin-bottom: -2.5%;
}
.contact-section-header {
background: var(--first-color);
padding: 0 0rem;
margin: 30px 8px;
border-radius: 30px 30px 0 0;
margin-bottom: -2.5%;
}
.contact-section-header > h2 {
  font-size: 6rem;
}

@media (max-width: 28.75em) {
  .contact-section-header > h2 {
    font-size: 4rem;
  }
}

.contact-section-header > p {
  font-style: italic;
  padding-bottom: none;
}

.contact-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0%;
}

.contact-details {
  font-size: 2.4rem;
  text-shadow: 2px 2px 1px #1f1f1f;
  transition: transform 0.3s ease-out;
  padding: 25px 50px 75px 10px;

}

.contact-details:hover {
  transform: translateY(8px);
}

/* Footer */
  
footer {
  font-weight: 500;
  display: flex;
  background: var(--first-color);
  color: #000;
  margin: 30px 8px;
  border-radius: 0 0 30px 30px;
}

footer > p {
  margin: 2rem;
}

footer i {
  vertical-align: middle;
}

@media (max-width: 28.75em) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}