:root{
    --text-50: hsl(240, 23%, 95%);
    --text-100: hsl(240, 25%, 90%);
    --text-200: hsl(240, 24%, 80%);
    --text-300: hsl(240, 24%, 70%);
    --text-400: hsl(240, 24%, 60%);
    --text-500: hsl(240, 24%, 50%);
    --text-600: hsl(240, 24%, 40%);
    --text-700: hsl(240, 24%, 30%);
    --text-800: hsl(240, 24%, 20%);
    --text-900: hsl(240, 25%, 10%);
    --text-950: hsl(240, 23%, 5%);

    --background-50: hsl(240, 31%, 95%);
    --background-100: hsl(240, 33%, 90%);
    --background-200: hsl(240, 33%, 80%);
    --background-300: hsl(240, 33%, 70%);
    --background-400: hsl(240, 33%, 60%);
    --background-500: hsl(240, 33%, 50%);
    --background-600: hsl(240, 33%, 40%);
    --background-700: hsl(240, 33%, 30%);
    --background-800: hsl(240, 33%, 20%);
    --background-900: hsl(240, 33%, 10%);
    --background-950: hsl(240, 31%, 5%);

    --primary-50: hsl(244, 62%, 95%);
    --primary-100: hsl(244, 65%, 90%);
    --primary-200: hsl(244, 65%, 80%);
    --primary-300: hsl(242, 63%, 70%);
    --primary-400: hsl(243, 64%, 60%);
    --primary-500: hsl(243, 64%, 50%);
    --primary-600: hsl(243, 64%, 40%);
    --primary-700: hsl(242, 63%, 30%);
    --primary-800: hsl(244, 65%, 20%);
    --primary-900: hsl(244, 65%, 10%);
    --primary-950: hsl(240, 62%, 5%);

    --secondary-50: hsl(240, 52%, 95%);
    --secondary-100: hsl(244, 53%, 90%);
    --secondary-200: hsl(243, 51%, 80%);
    --secondary-300: hsl(243, 52%, 70%);
    --secondary-400: hsl(243, 51%, 60%);
    --secondary-500: hsl(243, 51%, 50%);
    --secondary-600: hsl(243, 51%, 40%);
    --secondary-700: hsl(243, 52%, 30%);
    --secondary-800: hsl(243, 51%, 20%);
    --secondary-900: hsl(244, 53%, 10%);
    --secondary-950: hsl(245, 52%, 5%);

    --accent-50: hsl(240, 60%, 95%);
    --accent-100: hsl(244, 61%, 90%);
    --accent-200: hsl(243, 61%, 80%);
    --accent-300: hsl(243, 59%, 70%);
    --accent-400: hsl(243, 60%, 60%);
    --accent-500: hsl(243, 60%, 50%);
    --accent-600: hsl(243, 60%, 40%);
    --accent-700: hsl(243, 59%, 30%);
    --accent-800: hsl(243, 61%, 20%);
    --accent-900: hsl(244, 61%, 10%);
    --accent-950: hsl(244, 60%, 5%);
}

@font-face {
    font-family: Faculty-Glyphic;
    src: url("fonts/Faculty_Glyphic/FacultyGlyphic-Regular.ttf");
}

body {
  font-family: Faculty-Glyphic, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--text-200);
}

h1, h2, h3, h4, h5 {
  font-family: Faculty-Glyphic, sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 0;
}

html {font-size: 100%;} /* 16px */

h1 {font-size: 4.210rem; /* 67.36px */}

h2 {font-size: 3.158rem; /* 50.56px */}

h3 {font-size: 2.369rem; /* 37.92px */}

h4 {font-size: 1.777rem; /* 28.48px */}

h5 {font-size: 1.333rem; /* 21.28px */}

small {font-size: 0.750rem; /* 12px */}

body {
    width: 100%;
    min-height: 100vh;
    background-image: linear-gradient(185deg, var(--background-800), var(--background-950));
    overflow-x: hidden;
    margin: 0;
    padding-top: 0px;
    padding-bottom: 50px;
}

#name-heading {
    text-align: center;
    color: var(--primary-500);
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

.main-div {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    min-height: fit-content;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
    background-color: color-mix(in hsl, var(--primary-800), transparent 80%);
    border: 2px var(--accent-700) solid;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}

hr {
    width: 95%;
    border-top: 1px solid var(--accent-300);
    color: var(--accent-300);
}

.buttons-div, .content-div{
    width: 100%;
}

.content-div {
    min-height: fit-content;
}

.buttons-div {
    min-height: fit-content;
}

.buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    column-gap: 20px;
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;

    img {
        width: 88px;
        height: 31px;
        image-rendering: pixelated;
    }

    >a>img:hover {
        outline: 3px dotted var(--accent-300);
    }

}

#socials-div {
    width: 100%;
    min-height: fit-content;
    padding-top: 20px;
    padding-bottom: 10px;
}

#s-credits {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin: 0;
}

#text-div {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 2px solid var(--secondary-500);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

#pawswap-div:hover{
    outline: 3px dotted var(--accent-300);
}

#pk-xyz {
    width: 50%;
    height: 60vh;
    border: 4px solid var(--secondary-500);
    border-radius: 15px;
    zoom: 50%;
}