/* Imports */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');


/* Basic Style Configurations */

:root {
    background-color: rgb(11, 12, 14);
    margin: 2rem;
}

body {
    margin: 4em;
    font-family: Quicksand, sans-serif; font-weight: 500;
    color: rgb(255, 255, 255);
}

p, b {
    font-size: clamp(14px, 4vw, 18px);
    color: #ffffff
}

h1, h2, h3, h4, h5, h6 {
    font-family: Raleway, sans-serif; font-weight: 500;
    color: rgb(165, 210, 252);
}

ul a {
    color: rgb(165, 210, 252);
    text-decoration-style: dotted;
    text-decoration-thickness: .15rem;
    text-underline-offset: .2rem;
    text-decoration-color: #ffffff;
}

ul li {
    margin: 10px;
    align-items: center;
}

a:hover, a:focus {
    color: rgb(94, 167, 180);
}

/* Style Classes */

.container {
    container-type: size;
}

.center {
    text-align: center;
}

.round {
    border-radius: 50%;
}

.drop-cap::first-letter {
    font-size: 1.2em;
    font-family: Raleway, sans-serif;
}

.return-button {
    color: rgb(165, 210, 252);
    text-decoration-style: solid;
    text-decoration-thickness: .1rem;
    text-underline-offset: .2rem;
    text-decoration-color: #ffffff;
}

/* Color Classes */

.C-White {
    color: white;
}

.C-light-blue {
    color: rgb(165, 210, 252);
}

.C-black {
    color: rgb(42, 41, 43);
}

.C-red {
    color: rgb(255, 134, 134);
}

.C-green {
    color: rgb(62, 233, 182);
}

/* Element ID's */

#pfp {
    width: auto; height: auto;
    max-width: 6%; max-height: 6%;
    aspect-ratio: 1;
    box-shadow: 0 0 calc(1.4cqw) rgba(165, 210, 252, 0.581);
}

#landing-page-links {
    list-style: none;
    font-size: clamp(20px, 5vw, 24px);
    padding: 0;
}