/* 

========================== Styles ==========================

================== Colors ==================
Primary Color: #D7263D
Secondary Color: #02182B
Tertiary Color: #FFFFE7

White Optional Shades
Seashell: #FFF5EE
White Heat: #FDF9EF
Spatial White: #DEDDDB
Antique White: #FAEBD7
Pacific Pearl: #E8EAE6

Black Optional Shades
Ink Black: #212122
Tech Black: #0D0E0E
Premium Black: #100E09

================== Typography ==================
Font Family: Stardom and Teko 
font-family: 'Stardom', sans-serif;
font-family: 'Teko', sans-serif;

FONT SIZES
12px / 16px / 20px / 24px / 32px / 40px / 48px / 62px

FONT WEIGHTS
400 / 700

LINE HEIGHTS
1.2 / 1.5

LETTER SPACING
0 / -2px

================== Border Radius ==================
4px / 8px / 20px

================== Break points ==================
Mobile: 320px to 600px
Tabs: 600px to 1024px
Laps: 1024px to 1440px 

*/

/* ================================== Global Styles ================================== */

:root {
    /* Font size */
    --text-sm: 1.2rem;
    --text-base: 1.6rem;
    --text-para: 2rem;
    --text-h1: 6.2rem;
    --text-h2: 4.8rem;
    --text-h3: 4rem;
    --text-h4: 3.2rem;
    --text-h5: 2.4rem;

    /* font weight */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;

    /* letter spacing */
    --letter-spacing-tight: -2px;

    /* font family */
    --font-family-pri: 'Stardom', sans-serif;
    --font-family-sec: 'Teko', sans-serif;

    /* colors */
    --primary-base: #02182B; /* 970B2D / D7263D */
    --secondary-base: #D7263D;
    --tertiary-base: #FFFFE7;
    --white-shades-seashell: #FFF5EE;
    --white-shades-heat: #FDF9EF;
    --white-shades-spatial: #DEDDDB;
    --white-shades-antique: #FAEBD7;
    --white-shades-pacific: #E8EAE6;
    --black-shades-ink: #212122;
    --black-shades-tech: #0D0E0E;
    --black-shades-premium: #100E09;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.darkmode {
    --primary-base: rgba(215, 38, 61, 0.027); /* 970B2D / D7263D (using this)-> rgba(215, 38, 61, 0.027) */
    --secondary-base: rgba(2, 24, 43, 0.027); /* #02182B using this */
    --tertiary-base: #ffffe7cc; /* #FFFFE7 using this */
}

html {
    font-size: 62.5%;  /* 10px / 16px = 62.5% */
}

body {
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    /* background-color: var(--primary-base); */
    background-image: url("./assets/moody-gradients-texture-assets-vol1_NjhlZTlmNzBmNjY0NzQwMDMzNWYyYTNk/moody-gradient_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    transition: background-image 1s ease-in-out;
}

h1, h2, h3, h4 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    font-family: var(--font-family-pri);
}

h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

h4 {
    font-size: var(--text-h4);
}

h5 {
    font-size: var(--text-h5);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    font-family: var(--font-family-sec);
}

p {
    font-size: var(--text-para);
    font-family: var(--font-family-sec);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

a {
    font-size: var(--text-base);
    text-decoration: none;
    display: inline-block;  /* subjected to change */
    font-family: var(--font-family-pri);
    font-weight: var(--font-weight-bold);
}

/* ================================== Components ================================== */

/* .gradient1 {
    background: url("./assets/moody-gradients-texture-assets-vol1_NjhlZTlmNzBmNjY0NzQwMDMzNWYyYTNk/moody-gradient_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.gradient2 {
    background: url("./assets/moody-gradients-texture-assets-vol1_NjhlZTlmNzBmNjY0NzQwMDMzNWYyYTNk/moody-gradient_3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
} */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */

.scale-in-center {
	-webkit-animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
	        animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

.focus-in-expand-fwd {
	-webkit-animation: focus-in-expand-fwd 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
	        animation: focus-in-expand-fwd 1.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
}
/**
 * ----------------------------------------
 * animation focus-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-800px);
            transform: translateZ(-800px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-800px);
            transform: translateZ(-800px);
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

/* ================================== Sections ================================== */

.main-container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}

.content-wrapper {
    max-width: 700px;
    /* background-color: white; */
    background-color: var(--primary-base);
    width: 100%;
    /* height: 100vh; */
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px; 
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.3); */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.089);
}

.head-wrapper {
    /* background-color: blue; */
    width: 100%;
    height: 15vh;
    /* text-align: right; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.toggle-wrapper {
    /* background-color: yellow; */
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 6rem;
    width: 100%;
    /* aspect-ratio: 1/1; */
    border-radius: 50%;
    margin: 0 40px;
}

.toggle-wrapper a {
    /* background-color: red; */
    width: 100%;
    border-radius: 50%;
    /* display: inline-block; */
    height: 100%;
    padding: 18px 10px;
}

#grad-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--white-shades-pacific);
    margin-right: auto;
    margin-left: 0.5rem;
    cursor: pointer;
}

#grad-switch svg {
    transition: transform 0.4s ease-in-out;
}

#grad-switch:hover svg {
    transform: rotate(360deg);
}

#theme-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0;
    background-color: var(--white-shades-pacific);
    margin-right: 0.5rem;
    cursor: pointer;
}

#theme-switch img {
    fill: var(--secondary-base);
    transition: transform 0.4s ease-in-out;
}

#theme-switch:hover img {
    transform: rotate(360deg);
}

#theme-switch img:first-child {  /* last child was changed to first */
    display: none;
}

.darkmode #theme-switch img:last-child { /* first child was changed to last */
    display: none;
}

.darkmode #theme-switch img:first-child { /* last child was changed to first */
    display: block;
}

.bio-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: black; */
    width: 100%;
    gap: 24px;
}

.bio-wrapper .img-wrapper {
    /* background-color: yellow; */
    width: 80%;
    max-width: 150px;
    height: 15rem;
    border-radius: 50%;
    /* padding-top: 0.5rem; */
    margin-top: 1.5rem;
}

.bio-wrapper .img-wrapper .logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 50%;
}

.bio-wrapper .bio-container {
    /* background-color: yellow; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* color: var(--secondary-base); */
    color: var(--tertiary-base);
}

.content-wrapper .link-wrapper {
    /* background-color: green; */
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 2rem;
}

.link-wrapper .short-links {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    height: 4rem;
    /* margin: 2rem; */
}

.link-wrapper .short-links .short-btn {
    cursor: pointer;
    /* height: 100%; */
    padding: 0.3rem 2rem;
    /* margin: 0 1rem; */
    color: var(--tertiary-base);
    transition: transform 0.4s ease-in-out;
}

.link-wrapper .short-links .short-btn:hover {
    transform: scale(1.5);
}

.link-wrapper .large-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    gap: 20px;
    height: 100%;
    margin: 3rem;
}

.link-wrapper .large-links .lg-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2rem;
    background-color: var(--secondary-base);
    /* border: 2px solid var(--secondary-base); */
    border: 1px solid var(--tertiary-base);
    border-radius: 20px;
    color: var(--tertiary-base);
    transition: transform 0.4s ease-in-out;
}

.link-wrapper .large-links .lg-btn:hover {
    transform: scale(1.05);
}

.content-wrapper .foot-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 20px; */
    /* background-color: pink; */
    width: 100%;
    padding: 2rem;
}

.content-wrapper .foot-wrapper .foot-container {
    width: 100%;
    /* height: 100%; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    /* background-color: black; */
    /* font-family: var(--font-family-sec); */
    color: var(--tertiary-base);
}