@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

* {
    padding: 0;
    margin: 0;
}

 /*COLOR PALETTE*/
:root {
    /*Changing colors*/
    --base-color: hsl(220deg, 23%, 95%);
    --primary-color: hsl(from var(--base-color) h s calc(l + 10));
    --secondary-color: hsl(from var(--base-color) h s calc(l + 20));
    --base-darker: hsl(from var(--base-color) h s calc(l - 5));
    --base-black: hsl(from var(--base-color) h s calc(l - 10));

    --text-color: #4c4f69;
    --secondary-text: #5c5f77;
    
    /*Stationary colors*/
    --rosewater: #f4dbd6;
    --flamingo: #f0c6c6;
    --pink: #f5bde6;
    --mauve: #c6a0f6;
    --red: #ed8796;
    --maroon: #ee99a0;
    --peach: #f5a97f;
    --yellow: #eed49f;
    --green: #a6da95;
    --teal: #8bd5ca;
    --sky: #91d7e3;
    --sapphire: #7dc4e4;
    --blue: #8aadf4;
    --lavender: #b7bdf8;
}

p {
    color: var(--text-color);
}

.darkmode {
    --base-color: hsl(232deg, 23%, 18%);
    --primary-color: hsl(from var(--base-color) h s calc(l + 10));
    --secondary-color: hsl(from var(--base-color) h s calc(l + 20));
    --base-darker: hsl(from var(--base-color) h s calc(l - 5));
    --base-black: hsl(from var(--base-color) h s calc(l - 10));

    --text-color: #cad3f5;
    --secondary-text: #b8c0e0;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: solid 2px var(--mauve);
}

html {
    display: flex;
    justify-content: center;
}

body {
    background-color: var(--base-color);
    max-width: 90wv;
    min-width: 50%;
    font-family: 'JetBrains Mono', Arial, Helvetica, sans-serif;
}

header {
    position:sticky;
    top: 20px;
    user-select: none;
    width: inherit;
    display: flex;
    gap: 20px;
    justify-content: center;
}

header ul {
    display: flex;
    gap: 10px;
    text-decoration: none;
    list-style: none;
    padding: 15px 7px;
    border-radius: 100px;
}

header ul li {
    position: relative;
}
header ul li a {
    text-decoration: none;
    position: relative;
    color: var(--text-color);
    padding: 8px 15px;
    border: 2px solid transparent;
    border-radius: 100px;
}

header ul li a:hover {
    background: rgb(146, 146, 146);
    box-shadow: rgb(255, 255, 255) 0px 0px 5px 2px inset;
    border: 2px solid rgb(255, 255, 255);
    transition: all 0.2s ease-in-out;
    color: black;
}

header ul li a:active {
    background: rgb(70, 70, 70);
    box-shadow: black 0px 0px 5px 2px inset;
    border: 2px solid black;
    transition: all 0.2s ease-in-out;
    color: white;
}

#about {
    margin-top: 200px;
    margin-bottom: 200px;
    display: flex;
    gap: 200px;
    justify-content: center;
    align-items: center;
}

.name {
    font-size: 4rem;
    font-weight: bold;
    background-image: linear-gradient(to right, var(--sky), var(--blue), var(--mauve));
    color: transparent;
    background-clip: text;
}

.undername {
    display:flex;
    gap: 30px;
    font-size: 2rem;
    align-items: end;
}

.changing-adjective {
    font-weight: bold;
    font-size: 2.5rem;
    background-image: linear-gradient(to right, var(--red), var(--yellow), var(--peach));
    color: transparent;
    background-clip: text;
}

.profile-picture {
    width: 250px;
    height: 250px;
    border-radius: 100%;
}