/* colors */
:root {
  --red-50: rgba(252, 240, 242, 1);
  --black: rgba(0, 0, 0, 1);
  --neutral-900: rgba(29, 31, 32, 1);
  --neutral-800: rgba(54, 57, 58, 1);
  --neutral-700: rgba(78, 82, 85, 1);
  --neutral-600: rgba(98, 103, 106, 1);
  --neutral-500: rgba(114, 119, 123, 1);
  --neutral-400: rgba(146, 151, 155, 1);
  --neutral-300: rgba(183, 187, 189, 1);
  --neutral-200: rgba(213, 215, 216, 1);
  --neutral-100: rgba(234, 235, 235, 1);
  --neutral-50: rgba(247, 247, 248, 1);
  --white: rgba(255, 255, 255, 1);
  --orange-900: rgba(52, 26, 4, 1);
  --orange-800: rgba(91, 44, 6, 1);
  --orange-700: rgba(129, 63, 9, 1);
  --orange-600: rgba(162, 79, 11, 1);
  --orange-500: rgba(182, 89, 13, 1);
  --orange-400: rgba(224, 109, 16, 1);
  --orange-300: rgba(244, 161, 93, 1);
  --orange-200: rgba(248, 194, 150, 1);
  --orange-100: rgba(251, 219, 193, 1);
  --orange-50: rgba(253, 241, 231, 1);
  --teal-900: rgba(15, 36, 23, 1);
  --teal-800: rgba(28, 66, 43, 1);
  --teal-700: rgba(40, 93, 61, 1);
  --teal-600: rgba(49, 114, 75, 1);
  --teal-500: rgba(57, 133, 87, 1);
  --teal-400: rgba(70, 164, 108, 1);
  --teal-300: rgba(121, 198, 152, 1);
  --teal-200: rgba(176, 221, 194, 1);
  --teal-100: rgba(216, 238, 225, 1);
  --teal-50: rgba(239, 248, 243, 1);
  --cyan-900: rgba(12, 36, 39, 1);
  --blue-900: rgba(12, 34, 49, 1);
  --cyan-800: rgba(22, 66, 73, 1);
  --blue-800: rgba(22, 61, 87, 1);
  --cyan-700: rgba(29, 89, 98, 1);
  --blue-700: rgba(31, 86, 122, 1);
  --cyan-600: rgba(38, 114, 126, 1);
  --cyan-500: rgba(43, 129, 142, 1);
  --blue-600: rgba(39, 109, 155, 1);
  --blue-500: rgba(44, 124, 176, 1);
  --cyan-400: rgba(53, 160, 177, 1);
  --blue-400: rgba(71, 154, 209, 1);
  --cyan-300: rgba(102, 195, 209, 1);
  --blue-300: rgba(124, 183, 222, 1);
  --cyan-200: rgba(165, 220, 228, 1);
  --blue-200: rgba(173, 210, 235, 1);
  --cyan-100: rgba(208, 237, 241, 1);
  --blue-100: rgba(214, 233, 245, 1);
  --cyan-50: rgba(233, 247, 249, 1);
  --blue-50: rgba(235, 244, 250, 1);
  --indigo-900: rgba(24, 30, 52, 1);
  --indigo-800: rgba(44, 54, 94, 1);
  --indigo-700: rgba(64, 78, 136, 1);
  --indigo-600: rgba(80, 98, 170, 1);
  --indigo-500: rgba(99, 115, 182, 1);
  --indigo-400: rgba(135, 148, 199, 1);
  --indigo-300: rgba(165, 174, 213, 1);
  --indigo-200: rgba(200, 205, 229, 1);
  --indigo-100: rgba(224, 227, 240, 1);
  --indigo-50: rgba(241, 243, 248, 1);
  --fuschia-900: rgba(45, 24, 50, 1);
  --fuschia-800: rgba(80, 43, 90, 1);
  --fuschia-700: rgba(117, 63, 131, 1);
  --fuschia-600: rgba(142, 76, 158, 1);
  --fuschia-500: rgba(159, 91, 176, 1);
  --fuschia-400: rgba(182, 131, 195, 1);
  --fuschia-300: rgba(201, 162, 210, 1);
  --fuschia-200: rgba(219, 193, 225, 1);
  --fuschia-100: rgba(235, 221, 238, 1);
  --fuschia-50: rgba(247, 241, 248, 1);
  --red-900: rgba(67, 12, 21, 1);
  --red-800: rgba(113, 20, 35, 1);
  --red-700: rgba(160, 28, 50, 1);
  --red-600: rgba(191, 34, 60, 1);
  --red-500: rgba(218, 48, 76, 1);
  --red-400: rgba(227, 95, 117, 1);
  --red-300: rgba(236, 147, 162, 1);
  --red-200: rgba(243, 186, 195, 1);
  --red-100: rgba(249, 220, 225, 1);
}

/* || General setup */
html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 10px;
  background-color: var(--blue-900);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  color: var(--white);
}

/* || typography */

h1,
h2,
h3,
h4,
h5,
h6,
p,
input,
li {
  font-family: "Domine", serif;
}

.name{
  font-size: 4.0rem;
  margin-bottom: 0;
}

.marker {
  margin-top: 0;
  font-size: 2.0rem;
  font-family: 'Permanent Marker', cursive;
}

.profile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px
}

.profile-circle-outer {
  border-radius: 100%;
  background-color: var(--indigo-400);
  padding: 23px;
  z-index: 999;
}

.profile-circle-inner {
  border-radius: 100%;
}

.links-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 64px;
}

.links-container a {
  color: var(--white);
  text-decoration: none;
}

.links-container p {
  height: 64px;
  width: 80px;
  overflow: hidden;
}

/* || main layout */

main {
  display: flex;
  height: 100%;
  width: 67%;
  max-width: 400px;
  flex-direction: column;
  justify-content: space-around;
  overflow: none;
}