@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html { 
	scroll-behavior: smooth; 
	font-family: "PT Sans", sans-serif;
}

@view-transition {
  navigation: auto;
}

.move-up {
	transform: translateX(2);
	transition: all .75s ease;
}
/* Add a black background color to the top navigation */
.topnav {
  position:fixed;
  top:0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #242424;
  display: flex;
  justify-content: left;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  /* text-align: center; */
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

footer {
	background: #242424;
	padding-bottom: 0%;
}

.fade-in {
	transition: 
		height 4s,
		opacity 0.5s;
	@starting-style {
    opacity: 0;
  	}	
}

.fade-in-slower {
	transition: 
		opacity 0.5s;
	transition-delay: 0.5s;
	@starting-style {
		opacity: 0;
		visibility: hidden;
  	}	
}

.fade-in-slowest {
	transition: 
		opacity 1s,
		height 4s,
		display 2s;
	transition-delay: 1s;
	@starting-style {
		opacity: 0;
		visibility: hidden;
  	}	
}



@keyframes fadeInOpacity {
	0% {
		opacity: 0;
		transform: translateX(-10%)
	}
	100% {
		opacity: 1;
		transform: translateX(0%)
	}
}

.full-page-div {
  padding-top: 30vh;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url('cover2.JPG');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  background-color: #ddd;
  color: #ddd;
  
  width: 100vw;   /* 100% of the viewport width */
  height: 100vh;  /* 100% of the viewport height */
  box-sizing: border-box; /* Ensures padding doesn't break the size */
  align-items: center;
  justify-content: center;
  text-align: center;
}
.projects-container {
    display: flex;
    flex-direction: column;   /* Stacks the project cards vertically */
    align-items: center;      /* Centers the cards horizontally on the screen */
    gap: 40px;                /* Creates clean spacing between each project card */
    width: 100%;
    padding: 40px 0;
	
    box-sizing: border-box;
}

.tags {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
}

.tag {
	outline-width: 1px;
	padding: 4px 8px;
	outline-style: outset;
	box-sizing: border-box;
	text-align: center;
	display: inline-block;
	background-color: #3498db;
	border-radius: 10%;
	
}
.tag-container {
    display: flex;
    flex-wrap: wrap; /* Allows tags to wrap to the next line if space is tight */
    gap: 6px;
}

.games {
	display: flex;
	padding: 2%; 
	flex-direction: column; 
	align-items: center;
	margin: 20px;
	place-items: center;
}

.game {
	outline-width: 1px;
	outline-style: outset;
	box-sizing: border-box;
	padding: 15px;
	place-items: center;
	justify-items: center;
	/* width: 50vw;    */
	
	align-content: center;
	display: inline-flex;
	background-color: #242424;
}

.game-title {
	text-align: right;
	font-size: 90px;
	float: right; 
	justify-self: center;
	/* justify-content: center; */
	align-self: auto;
	font-weight: bold;
	line-height: 1;
	margin-bottom: -20px;
	/* margin-top: -20px; */
}

.game-subtitle {	
	text-align: right;
	font-size: 40px;
	float: right; 
	justify-self: center;
	justify-content: center;	
	line-height: 1;
	margin-top: 20px;
	/* margin-bottom: 20px; */
}
.game-context {
	text-align: right;
	font-size: 20px;
	float: right; 
	justify-self: center;
	justify-content: center;
	font-weight: lighter;
}

.game-info {
	text-align: right;
	font-size: 20px;
	float: right; 
	justify-content: center;
	font-weight: bold;
	align-items: center;
}

.text-side {
	padding-left: 20px;
    flex: 2; /* Takes up 2 parts of the available space */
	display: flex;
	flex-direction: column;   /* Stacks the text blocks vertically */
    align-items: flex-end;    /* Pushes all text elements to the right side */
    justify-content: right;  /* Centers them vertically within the card */
    gap: 8px;                 /* Controls the exact spacing between lines */
}

.content-side {
	flex-direction: column;   /* Stacks the text blocks vertically */
    align-items: flex-end;    /* Pushes all text elements to the right side */
    justify-content: center;  /* Centers them vertically within the card */
    gap: 8px;                 /* Controls the exact spacing between lines */
}



body {
	margin: 0;
	font: 1.2em; 
	line-height: 1.5;
	/* margin-top: 10px; */
	/* padding: 1%; */
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: rgb(16, 16, 16);
	color: white;
}

h1 {
	text-align: center;
	font-size: 100;
	margin-bottom: 0%;
	margin-top: 0%;
}

h2 {
	text-align: center;
	font-size: 40;
}

p {
	text-align: center;
	box-sizing: border-box;
}


.static {
  position: absolute;
  background: white;
  transition: opacity 0.25s;
 }

.static:hover {
  opacity: 0;
 }

.pt-sans-regular {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.pt-sans-bold {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.pt-sans-regular-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.pt-sans-bold-italic {
  font-family: "PT Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
}