@tailwind base;
@tailwind components;
@tailwind utilities;


@import '../styles/homeApp/index.css';
@import '../styles/aboutApp/index.css';
@import '../styles/portfolioApp/index.css';
@import '../styles/resumeApp/index.css';
@import '../styles/base/base.css';
@import '../styles/errorApp/index.css';
@import '../styles/navigation/index.css';
@import '../styles/partials/footer.css';
@import '../styles/homeApp/iframe.css';
@import '../styles/storyApp/writeStory.css';
@import '../styles/storyApp/storyView.css';


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

::-webkit-scrollbar {
	width: 0;
	height: 0;
}

@font-face {
	font-family: "Wanted-ExtraBlack";
	src: url("../fonts/Wanted/WantedSans-ExtraBlack-BF65baf133c4859.otf")
		format("opentype");
}

@font-face {
	font-family: "Wanted-Black";
	src: url("../fonts/Wanted/WantedSans-Black-BF65baf1369b817.otf")
		format("opentype");
}

@font-face {
	font-family: "Wanted-ExtraBold";
	src: url("../fonts/Wanted/WantedSans-ExtraBold-BF65baf137317a5.otf")
		format("opentype");
}

@font-face {
	font-family: "Wanted-SemiBold";
	src: url("../fonts/Wanted/WantedSans-SemiBold-BF65baf13722853.otf")
		format("opentype");
}

@font-face {
	font-family: "Wanted-Bold";
	src: url("../fonts/Wanted/WantedSans-Bold-BF65baf135d5a25.otf")
		format("opentype");
}

@font-face {
	font-family: "Wanted-Medium";
	src: url("../fonts/Wanted/WantedSans-Medium-BF65baf1388963b.otf")
		format("opentype");
}

@font-face {
	font-family: "Wanted-Regular";
	src: url("../fonts/Wanted/WantedSans-Regular-BF65baf13579965.otf")
		format("opentype");
}

@font-face {
	font-family: "Wanted-Variable";
	src: url("../fonts/Wanted/WantedSansVariable-BF65baf13a24667.ttf")
		format("truetype");
}


:root {
    /* Light mode variables */
    --primary-color: #e0dad6;
    --subprim-color: #282120;
    --text-color: #282120;
    --icon-color: #282120;
    --bg-color: #e0dad6;
}

/* Dark mode variables */
:root[data-mode="dark"] {
    --primary-color: #282120;
    --subprim-color: #e0dad6;
    --text-color: #e0dad6;
    --icon-color: #e0dad6;
    --bg-color: #282120;
}


html, body {
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#beck-bg {
    background: linear-gradient(2deg, #18ecffb4, #18ecff66, rgba(24, 236, 255, 0.096));
    background-color: rgba(24, 236, 255, 0.096);
    background-size: 400% 400%;
    -webkit-animation: bgAnimate 25s ease infinite;
    -moz-animation: bgAnimate 25s ease infinite;
    animation: bgAnimate 25s ease infinite;
    margin: 0;
}

#adg-bg {
    background: linear-gradient(2deg, #ff0080b7, #5d104e0d, #440b380d);
    background-color: #ff00807a;
    background-size: 400% 400%;
    -webkit-animation: bgAnimate 25s ease infinite;
    -moz-animation: bgAnimate 25s ease infinite;
    animation: bgAnimate 25s ease infinite;
    margin: 0;
}

#oakl-bg {
    background: linear-gradient(2deg, #ffe018ad, #ffe01866, #49410c66);
    background-color: #49410c66;
    background-size: 400% 400%;
    -webkit-animation: bgAnimate 25s ease infinite;
    -moz-animation: bgAnimate 25s ease infinite;
    animation: bgAnimate 25s ease infinite;
    margin: 0;
}

@-webkit-keyframes bgAnimate {
    0% {
        background-position: 0% 15%
    }

    50% {
        background-position: 100% 86%
    }

    100% {
        background-position: 0% 15%
    }
}

@-moz-keyframes bgAnimate {
    0% {
        background-position: 0% 15%
    }

    50% {
        background-position: 100% 86%
    }

    100% {
        background-position: 0% 15%
    }
}

@keyframes bgAnimate {
    0% {
        background-position: 0% 15%
    }

    50% {
        background-position: 100% 86%
    }

    100% {
        background-position: 0% 15%
    }
}

.bg-container {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.116);
    background-color: rgba(6, 6, 6, 0.146);
    top: 0;
    left: 0;
    backdrop-filter: blur(5px);
    position: fixed;
}

.custom-shape-divider-bottom-1687053023 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: -1;
}

.custom-shape-divider-bottom-1687053023 svg {
    position: relative;
    display: block;
    width: calc(188% + 1.3px);
    height: 117px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1687053023 .shape-fill {
    fill: #162780;
}



.spin {
    animation: spin 1s linear infinite;
}

.spinner {
    animation: spin 3s linear infinite;
}


@layer utilities {
    .shadow-custom {
        box-shadow: 0 4px 4px 0 rgba(255, 255, 255, 0.2),
            0 -4px 4px 0 rgba(255, 255, 255, 0.2),
            4px 0 4px 0 rgba(255, 255, 255, 0.2),
            -4px 0 4px 0 rgba(255, 255, 255, 0.2),
            0 6px 20px 0 rgba(255, 255, 255, 0.19);
    }

    .dark\:shadow-custom {
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2),
            0 -4px 4px 0 rgba(0, 0, 0, 0.2),
            4px 0 4px 0 rgba(0, 0, 0, 0.2),
            -4px 0 4px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}


#glass {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(3.5px);
    -webkit-backdrop-filter: blur(3.5px);
    border: 1px solid rgba(255, 255, 255, 0.067);
}

.dark #glass {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.067);
}

/* Add these styles for the theme toggle button */
#theme-toggle {
    transition: background-color 0.3s ease;
}

/* Add these styles for SVG icons */
.social-icon {
    fill: var(--text-color);
    transition: fill 0.3s ease;
}

/* Optional hover effect */
.social-icon:hover {
    opacity: 0.75;
}