/* Used for debugging html - will render a border around the element */
.debug {
  border-width: 2px;
  border: #222;
  border-style: solid;
}

/* Mobile-first design */
/* Extra small (portrait phones, less than 576px) and small devices (landscape phones, 576px and up) */
body {
  font-family: "Sulphur Point", sans-serif;
}

.jumbotron {
  background-color: white;
  margin-top: 5%;
}

#name {
  margin-top: 5%;
  font-weight: 700;
  font-size: xx-large;
}

#job-title {
  font-size: x-large;
}

p {
  font-size: large;
}

a#spotify-link:link,
a#spotify-link:visited,
a#spotify-link:active {
  color: #1ed760;
  background-color: transparent;
  text-decoration: none;
}

a#spotify-link:hover {
  color: #5b8fa2;
  background-color: transparent;
  text-decoration: underline;
  /* text-shadow: 0 0 4px black; */
}

a.media-icon-link:link,
a.media-icon-link:visited,
a.media-icon-link:hover,
a.media-icon-link:active {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

#cpu-icon {
  color: #3498db;
}

#photo-container {
  text-align: center;
}

#text-container {
  text-align: center;
}

#profile-picture {
  width: 35vw;
  border-radius: 50%;
  box-shadow: 0 50px 50px rgb(0 0 0 / 0.2);
}

.media-icon-col {
  font-size: 10vw;
  text-align: center;
}

/* Medium (tablets, 768px and up), large (desktops, 992px and up) and extra large devices (large desktops, 1200px and up) */
@media (min-width: 768px) {
  #name {
    margin-top: 0;
  }

  p {
    max-width: 35vw;
  }

  #photo-container {
    text-align: right;
  }

  #text-container {
    text-align: left;
  }

  #icon-row {
    max-width: 35vw;
  }

  .media-icon-col {
    font-size: 7.5vw;
    text-align: left;
  }
}