/*** Box Sizing ***/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*** Global Resets ***/
* {
    margin: 0;
}

html {
    font-size: 18px; /* Base font size */
    line-height: 1.5; /* Default line height */
}

input, button, textarea, select {
    font: inherit;
    font-family: inherit; /* Inherit font family */
    font-size: inherit; /* Inherit font size */
}

a {
    color: inherit; /* Inherit color */
    text-decoration: none; /* Remove underline */
}

/*** Typography ***/

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	justify-items: center;
}

h1 {
    font-size: 3rem;
	line-height: 4rem;
	margin-bottom: 2rem;
}

@media (min-width: 500px) {
	h1{
		font-size: 4rem;
		line-height: 5rem;			
	}
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.5rem;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
}

p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

a:not(.nav-link, .titles) {
    border-bottom: 2px solid black; /* Underline effect */
}

a:not(.nav-link, .titles):hover {
    border-bottom: 2px solid transparent; /* Underline effect */
}


/*** Animations ***/
@keyframes projects-appear {
    0% {
        transform: scale(0.25); translate: 0 -200px; opacity: 0;
    }
    100% {
        transform: scale(1); translate: 0 0px; opacity: 1;
    }
}

@keyframes appear {
    0% {
        transform: scale(0.25); opacity: 0;
    }
    100% {
        transform: scale(1); opacity: 1;
    }
}

@keyframes wobble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(1deg); }
    50% { transform: rotate(-1deg); }
    75% { transform: rotate(1deg); }
    100% { transform: rotate(0deg); }
  }


/*** Navigation ***/
nav {
    height: 4rem;
	width: 100%;
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure it is above other content */
	background: white;
    border-bottom: 1px solid black;
    align-content: center;
    justify-items: center;
}

nav[data-state="hidden"] {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

nav[data-state="visible"] {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

.nav-list {
	display: flex;
	flex-flow: row;
    list-style: none; /* Remove default list styles */
    padding: 0 1rem; /* Remove padding */
    margin: 0; /* Remove margin */
    width: 100%;
    max-width: 1700px;
}

.nav-items {
    margin-right: 1.5rem; /* Space between navigation items */
}

.nav-items:first-of-type {
	font-weight: 600;
}

.nav-link {
    text-decoration: none; /* Remove underline */
    border-bottom: 2px solid transparent; /* Underline effect */
    cursor: pointer; /* Pointer cursor on hover */
}

.nav-link:hover {
    border-bottom: 2px solid black; /* Underline effect */
    transition: border-bottom 0.3s ease; /* Smooth transition */
}

.nav-items img {
    width: 1.5rem; /* Icon size */
    height: 1.5rem; /* Icon size */
    margin-right: 0.5rem; /* Space between icon and text */
}

/*** Header ***/
header {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	width: 100%;
    max-width: 1700px;
	margin-top: 6rem;
    padding: 0rem 1rem; /* Padding for main content */
}

.project-description > p {
	max-width: 900px;
}


/*** Main ***/
main {
    z-index: 1;
    position:relative;
	margin: 6rem 0rem 4rem 0rem;
    padding: 0rem 1rem; /* Padding for main content */
    min-height: 100vh; /* Ensure it covers full viewport height */
	max-width: 1700px;
}

/*** Projects Section ***/
.projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem; /* Gap between columns */
}

@media (min-width: 1000px) {
.projects {
    grid-template-columns: 1fr 1fr;
	}
}

.container {
    opacity: 0;
}

.container[data-state="animate"] {
    animation: projects-appear 0.5s ease-in-out forwards; /* Apply appear animation */
}

.container[data-state="appeared"] {
    position: relative;
    border-radius: 10px;
    border: 1px solid black;
    overflow: hidden; /* Ensure content stays within rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    opacity: 1; /* Ensure fully visible after animation */
    transition: transform 0.25s ease-in-out, translate 0.25s ease-in-out, box-shadow 0.25s ease-in-out; /* Smooth transition */
}

.container[data-state="appeared"]:hover {
    border: none; /* Remove border on hover */
    transform: scale(1.005); /* Slightly enlarge on hover */
    translate: 0 -2.5px; /* Move up on hover */
    box-shadow: 0 2.5px 5px rgba(0, 0, 0, 1); /* Add shadow on hover */
    transition: transform 0.25s ease-in-out, translate 0.25s ease-in-out, box-shadow 0.25s ease-in-out, border 0.25s ease-in-out; /* Smooth transition */
}

.container img {
    width: 100%; /* Full width of the container */
    height: 100%; /* Maintain aspect ratio */
}

.container video {
    width: 100%; /* Full width of the container */
    height: 100%; /* Maintain aspect ratio */
}

.titles {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10; /* Ensure titles are above the image */
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    background: rgba(255, 255, 255, 0.7); 
    padding: 1rem;
    border-radius: 10px;
    transition: opacity 0.25s ease-in-out; /* Smooth transition */
}

.titles:hover {
    opacity: 1; /* Fully visible on hover */
    transition: opacity 0.25s ease-in-out, /* Synchronized transitions */
}

/*** Image Gallery ***/
.row {
  	display: grid;
  	grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
	.row {
  		grid-template-columns: 1fr 1fr;
		grid-gap: clamp(1rem, 2%, 2rem);
	}
}

/* Create four equal columns that sits next to each other */
.column {
  	max-width: 100%;
	justify-items: center;
}

.work {
    opacity: 0;
    margin-top: clamp(1rem, 4%, 2rem);
    vertical-align: middle;
    width: 100%;
    height: auto;
    background:black;
}

.work[data-state="animate"] {
    animation: appear 0.5s ease-in-out forwards; /* Apply appear animation */
}

.work[data-state="appeared"] {
    opacity: 1; /* Ensure fully visible after animation */
}

video[class="work"]{
    border: 2px solid black;
}

/*** Width Media Queries ***/
@media (min-width: 500px) {
    main, header, .nav-list {
        padding: 0 2rem; /* Increase base font size */
    }
}