@font-face {
    font-family: 'Fauna One';
    src: url('../assets/FaunaOne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Indie Flower';
    src: url('../assets/IndieFlower-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
    --text: #0d0707;
    --background: #e6e6e6;
    --primary: #5dadcb;
    --secondary: #87f7ee;
    --accent: #ed5a5a;
    --linear-primary-secondary: linear-gradient(#5dadcb, #87f7ee);
    --linear-primary-accent: linear-gradient(#5dadcb, #ed5a5a);
    --linear-secondary-accent: linear-gradient(#87f7ee, #ed5a5a);
    --radial-primary-secondary: radial-gradient(#5dadcb, #87f7ee);
    --radial-primary-accent: radial-gradient(#5dadcb, #ed5a5a);
    --radial-secondary-accent: radial-gradient(#87f7ee, #ed5a5a);

    --primary-text: 'Fauna One', sans-serif;
    --alt-text: 'Indie Flower', cursive;
}

:root[data-theme="dark"] {
    --text: #f8f2f2;
    --background: #1a1a1a;
    --primary: #3485a2;
    --secondary: #08786f;
    --accent: #a51212;
}
  
body {
    font-family: var(--primary-text);
    font-weight: 400;
    background-color: var(--background);
    min-height: 100vh;
}

h1, h2, h3, h4, h5 {
    font-family: var(--primary-text);
    font-weight: 700;
}

.alt-text {
    font-family: var(--alt-text);
    font-weight: 700;
}




/* ********** toogle theme ***********/ 
.theme {
    --bg-color: var(--background);
    --main-color: var(--primary);
    --dark-color: var(--text);
    position: absolute;
    top: 1.5rem;
    right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-color);
    border-radius: 100%;
    border: 2px solid var(--main-color);
    box-shadow: 4px 4px var(--main-color);
}
.input {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;

}
.icon {
    position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 13px);
    width: 26px;
    height: 26px;
}

.icon.icon-moon {
    fill: var(--main-color);
}

.icon.icon-sun {
    stroke: var(--main-color);
    display: none;
}

.input:checked ~ .icon.icon-sun {
    display: block;
}

.input:checked ~ .icon.icon-moon {
    display: none;
}

.theme:active {
    box-shadow: 0px 0px var(--main-color);
    transform: translate(3px, 3px);
}
/* Apply transitions to all elements */
* {
    transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

/* If you want to exclude certain elements from the transition, you can do so like this: */
.no-transition {
    transition: none !important;
}



/* navigation */
nav ul li a {
    text-decoration: none;
    font-size: 1.5rem;
}
nav ul li a:hover {
    text-decoration: none;
}


/* ********** main ***********/
#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
}
/* Center the profile image */
.profile-image {
    margin: 2.5rem auto;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary), rgba(0, 0, 0, 0));
}
/* Center-align social media icons */
.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
}