:root {
  --dk-gray:#19191c;
  --dk-gray-2:#29292e;
  --dk-gray-3:#131313;
  --blk: #000000;
  --off-white: #e9e8ef;
  --red: #E7346C;
  --blue: #61A0F0;
  --lt-blue: #cddcf3;
  --purple: #9353F6;
}

@keyframes fadeOut {
  0% {opacity:1;}
  100% {opacity:0;}
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

html {
  font-size:18px;
  scroll-behavior:smooth;
  scroll-padding: var(--scroll-padding, 5.3rem);
}

body {
  font-family:'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:var(--off-white);
  font-weight:200;
  background: var(--dk-gray);
  background: -moz-linear-gradient(190deg, var(--dk-gray), var(--dk-gray-3) 60%);
  background: -webkit-linear-gradient(190deg, var(--dk-gray), var(--dk-gray-3) 60%);
  background: linear-gradient(190deg, var(--dk-gray), var(--dk-gray-3) 60%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#19191c",endColorstr="#131313",GradientType=1);
  padding:1rem;
  display:grid;
  place-items: center;
}

::selection {
  color:var(--dk-gray);
  background: var(--off-white);
}

a {transition:0.2s;}

a:focus:not(:active) {
  outline:2px solid var(--red);
  outline-offset:2px;
}

a:focus:not(:focus-visible) {
  outline:none;
}

p {margin-bottom:0.6rem;}

p:last-child {
  margin-bottom:0;
}

h1 {
  font-weight:200;
  text-align:justify;
  font-size:clamp(2.1rem, 11vw, 2.7rem);
  line-height:1;
  margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--off-white);
}

main {
  width:min(390px, 100%);
  padding-inline:1rem;
}

.intro-container p,
.bottom-info {
  font-size:0.75rem;
  line-height:1.7;
  text-align:justify;
}

.contact-links {
  margin-block:1.5rem;
  display:flex;
  justify-content:center;
  gap:2rem;
}

.contact-links a {
  text-decoration:none;
  font-size:1.5rem;
  color: var(--off-white);
}

.contact-links a:hover {
  transition:0.2s;
  color:var(--purple);
}

.bottom-info {text-align:center;}