/* ========== GENERAL ========== */

html, body {
  height: 100%;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background: linear-gradient(#0054C8, #002962);
  font-size: 2.5vh;
  color: #002962;

  font-family: 'Inria Sans', sans-serif;
  font-weight: normal;
}

a {
  color: #002962;
}

#name
{
  font-size: 4vh;
  margin-top: -1vh;
}

/* ========== BUSINESS CARD ========== */

#business-card {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F6F6F6;
  border-radius: 1.5vh;
  width: 60vw;
  height: 80vh;
}


/* ========== SECTIONS ========== */

#resume-section
{
  margin-top: 4vh;
  margin-bottom: 4vh;
  text-align: center;
}

#resume-section a
{
  display: block;
}

.info-section-part
{
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  margin-bottom: -3.5vh;
  font-size: 2.5vh;
  margin-right: 5vh;
  margin-left: 5vh;
}

#socials-section a 
{
  text-decoration: none;
}

/* *********** IMAGES *********** */

#pfp
{
  width: 20vh;
  height: 20vh;
  border-radius: 1.5vh;
  margin-bottom: 3vh;
}

.info-img
{
  width: 2.5vh;
  height: 2.5vh;
  margin-right: 2vh;
}

.socials-img
{
  width: 4.5vh;
  height: 4.5vh;
  margin-right: 0.5vh;
  margin-left: 0.5vh;
}

@media (max-aspect-ratio: 1/1) {
  html, body {
    font-size: 2.5vh;
  }

  #name {
    font-size: 6.5vw;
    margin-top: -1vw;
  }

  #business-card {
    width: 80vw;
    height: 90vh;
  }

  #pfp {
    width: 40vw;
    height: 40vw;
    border-radius: 1.5vw;
    margin-bottom: 3vw;
  }

  .info-section-part {
    font-size: 4vw;
    margin-bottom: -4vw;
  }

  .info-img {
    width: 5vw;
    height: 5vw;
    margin-right: 2vw;
  }

  .socials-img {
    width: 10vw;
    height: 10vw;
    margin: 0 0.5vw;
  }
}