* {

    box-sizing: border-box;
}

html {
    block-size: 100%;
    color-scheme: light;
    background-color: var(--bg-color);
}

[data-theme="dark"] {
    color-scheme: dark;
}

@supports not (color-scheme: dark) {
    [data-theme="dark"] {
        background: #111;
    }
}


@keyframes octocat-wave {

    0%,
    100% {
        transform: rotate(0);
    }

    20%,
    60% {
        transform: rotate(-25deg);
    }

    40%,
    80% {
        transform: rotate(10deg);
    }
}

.inconsolata {
    font-family: "Inconsolata", monospace;
    font-optical-sizing: auto;
    font-weight: light;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.code-saver-normal-400 {
    font-family: "code-saver", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "code-saver", sans-serif;
    color: var(--heading-color);
}

body {
    margin: 0 !important;
}

body,
p {
    font-family: "Roboto", serif;
    font-weight: 400;
    font-style: normal;
    color: var(--paragraph-color);
}

/* Heading underline */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    width: 200px;

    opacity: 0.60;
    border: 0;
    border-top: 1px solid var(--hr-color);
    margin: 20px 0;
}

/* Link Styles */
a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-color-hover);
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, max-content);
    width: 100%;
}

/* Header Styles */
header {
    grid-row: 1/2;
}

header {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Nav Styles */
header h1 {
    color: var(--paragraph-color);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-color);

    position: relative;
    padding: 0 2.5rem 0 2.5rem;

    .popover-button {
    	display: none;
		background: none;
		padding: 0;
		border: none;
    }
}

.navbar-logo {
    display: flex;
    align-items: center;
}

.navbar-logo img {
    height: 40px;
    margin-right: 10px;
}

.navbar-logo h1 {
    font-size: 24px;
}
.hamburger-svg {
    fill: pink;
    color: var(--paragraph-color);
}
/* Navigation Links */

#popover-menu {
    display: none;
}

.navbar-links {
    list-style: none;
    padding: 0;
    font-family: "code-saver", sans-serif;
    font-weight: 400;
    font-style: normal;

	a {
		display: block;
		position: relative;
		padding: 0.2em 0;
		text-decoration: none;
		color: var(--paragraph-color);
		padding: 10px 15px;

		&:hover {
			color: var(--link-color-hover);
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 0.1em;
			background-color: var(--link-color);
			opacity: 0;
			transform: scale(0);
			transform-origin: center;
			transition: opacity 300ms, transform 300ms;
		}

		&:hover::after,
		&:focus::after {
			opacity: 1;
			transform: scale(1);
		}
	}
}

.navbar-large {
    display: flex;
}

#popover-menu:popover-open {
	display: block;
}

@media (max-width: 600px) {
	nav .popover-button {
		display: block;
	}

    .navbar-links {
        flex-direction: column;
        /* Changed to column for a vertical layout */
        top: 2.5rem;
        width: 100%;
        background-color: var(--bg-color);
        padding: 1em;
        /* Set to full width */
        box-shadow: 0 4px 8px var(--boxshadow);

        li {
			margin: 10px 0;
			list-style: none;
		}
    }

    .navbar-large {
		display: none;
    }

	#popover-menu:popover-open {
		width: 100%;
		padding: 2rem 0.8rem;
		border: none;
		color: var(--paragraph-color);
	}

    .menu-toggle {
        display: flex;
        color: var(--link-color);
    }

    .navbar-links.active {
        display: flex;
    }

    #theme-toggle>svg {
        padding: 10px;
    }
}

/* Main Styles */

#main {
    grid-row: 2/3;
    height: minmax(100vh max-content);
    padding: 0 2.7rem 0 2.7rem;
    display: grid;
    grid-template-columns: 70% 30%;
}
#left {
    margin: 0;
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 0 2.7rem 0 0;
}

#right {
    grid-column: 2/3;
    background-image: url("../assets/mind-fuzz.webp");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    filter: var(--image-filter);
}

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

/* Footer Styling */
footer {
    grid-row: 3/4;
    background-color: var(--bg-color);
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid var(--border-color);
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.social-links a {
    margin: 0 10px;
    text-decoration: none;
    font-weight: bold;
}


@media (max-width: 600px) {
    nav {
        padding: 0.2rem;
    }
    main {
        grid-template-columns: 1fr !important;
        padding: 0 5px 0 10px;
    }

    #left {
        grid-column: 1/2;
    }
    #right {
        display: none;
    }
}