/* CSS Custom Properties (Variables) */
:root {
  --primary-color: #f5f5f5;
  --secondary-color: #f2f2f2;
  --hover-color: #dddddd;
  --background-overlay-start: rgba(209, 130, 130, 0.2);
  --background-overlay-end: rgba(88, 119, 168, 0.2);
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html, body {
  font-family: var(--font-stack);
  font-weight: 400;
  color: var(--primary-color);
}

body {
  background-image: linear-gradient(120deg, var(--background-overlay-start) 1%, var(--background-overlay-end) 70%), url("../image/background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-stack);
  font-weight: 400;
  color: var(--secondary-color);
}

a {
  color: var(--primary-color);
}

a:hover {
  color: var(--hover-color);
  text-decoration: none;
}

::placeholder {
  color: var(--primary-color) !important;
}

#legal {
  align-content: left;
}

#profile-card {top: 0; padding-top: 30vh; padding-bottom: 5vh; min-height: 45vh;}
#profile-card .card {background: transparent; min-height: 20em; opacity: 0.85; border: none; border-radius: 1rem;}
#profile-card .card-content {padding: 2em 0;}
#profile-card .fa-1x {font-size: 1.3em;}
#profile-card .text-spacing {letter-spacing: 0.5rem;}
@media screen and (max-width: 1920px) {#profile-card {padding-top: 35vh;}}
@media screen and (max-width: 1440px) {#profile-card {padding-top: 30vh;}}
@media screen and (max-width: 1200px) {#profile-card {padding-top: 20vh;}}
@media screen and (max-width: 1024px) {#profile-card {padding-top: 25vh;}}
@media screen and (max-width: 480px) {#profile-card {padding-top: 20vh; padding-bottom: 10vh;}}
@media screen and (max-width: 350px) {#profile-card{padding-top: 15vh;}}