garden/public/css/styles.css

@font-face {
    font-family: 'Cotham';
    src: url('../fonts/CothamSans.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Redacted';
	src: url('../fonts/Redaction_70-Italic.woff2') format('woff2');
	font-display: fallback;
}

@font-face {
	font-family: 'Redacted Reg';
	src: url('../fonts/Redaction_70-Regular.woff2') format('woff2');
	font-display: fallback;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: 'IBM Plex Mono', monospace;
	background-color: whitesmoke;
}

#container-gallery {
	position: absolute;
	top:100px;
	left: 0;
	z-index: -999;
}

#project-container-gallery {
	flex-grow: 1;
	width: 100%;
	font-family: "Gothic A1", sans-serif;
	font-weight: 400;
  	font-style: normal;
	line-height: 30px;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	gap: 20px;
	z-index: 100;
	background: url('/images/website/skybox.png');
	background-size: cover;
	background-repeat: repeat-x;
	background-position: 0 0;
}

#image-gallery {
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 20px;
	padding-left: 25px;
	padding-right: 25px;
}

.gallery-image{
	max-width: 400px;
	height: auto;
	margin-left: auto;
  	margin-right: auto;
  	animation: turn 1s steps(2, end) infinite;
	border: 2px solid rgb(245, 102, 102);
}

.gallery-image:hover {
	animation: swiv 5s steps(2, end) infinite;
	cursor: pointer;
}


.image-container {
	width: 100%;
	height: 50px;
}

#focused-image-container {
	display: none;
	width: 100%;
	height: 100%;
	flex-direction: column;
	text-align: center;
	align-items: center;
	gap: 20px;
	z-index: 200;
	justify-content: center;
	align-items: center;
}

.focused-image {
	height: 600px;
	width: auto;
	margin-left: auto;
  	margin-right: auto;
}

#close-button {
	width: fit-content;
	color: rgb(255,250,149);
	font-size: 40px;
	animation: rotate 5s steps(15, end) infinite;
}
  
  #main-container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: auto;
  }

  #nav-container {
	height: 100px;
	background-color: rgb(255, 250, 149);
	flex-shrink: 0;
	display: flex; /* Use Flexbox for alignment */
	flex-direction: row;
	gap: 20px;
	padding-left: 25px;
	padding-right: 35px;
	align-items: center; /* Center content vertically */
	color: rgb(0, 0, 0); /* Optional: text color for visibility */
	font-size: 24px; /* Optional: font size */
	border: 2px dotted black;
	font-style: italic;
	font-weight: 400;
	overflow-x: auto;
	z-index: 99999;
  }

  #nav-container::-webkit-scrollbar {
	 /* for Chrome, Safari, and Opera */
  }

  .nav-emoji {
	font-style: normal;
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	cursor: pointer;
	display: flex;
	flex-direction: row;
  }

  .nav-emoji a {
	text-decoration: none;
	color: black;
	cursor: crosshair;
  }
  
  .nav-emoji .emoji-flip {
	animation: flip 1s steps(1, end) infinite;
  }

  .nav-about a{
	color:blue;
	text-decoration: underline;
  }

  #container {
	width: 100%;
	flex-grow: 1;
	display: flex;
	overflow-y: scroll;
    flex-direction: column;
  }

  #project-container {
	color: black;
	flex-grow: 1;
	margin: 25px;
	width: 60%;
	font-family: "Gothic A1", sans-serif;
	font-weight: 400;
  	font-style: normal;
	line-height: 30px;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 100;
  }

  #list-container {
	color: black;
	flex-grow: 1;
	width: 100%;
	font-family: "Gothic A1", sans-serif;
	font-weight: 400;
  	font-style: normal;
	line-height: 30px;
	font-size: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	z-index: 100;
	align-items: center;
  }

  #list-container h2{
	font-family: 'Redacted Reg';
	letter-spacing: 2px;
	font-size: 40px;
	color: rgb(245, 102, 102);
	line-height: 50px;
	margin: 0;
  }

  .article-image {
	width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
  }

  .article-image img {
	width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .articles {
	display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 50px;
	justify-content: center;

  }

  .filter {
	margin: 25px;
  }

  .article {
	display: flex;
	flex-direction: column;
	width: 500px;
	height: 400px;
	gap:10px;
  }

  .article #project-tags{
  }

  #clouds {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -999;
  }

  .cloud {
	position: absolute;
	top: 50%;
	z-index: -99;
	animation: cloud linear 20s  infinite;
	width: 100px;
  }

  .cloud-gif {
	position: absolute;
	top: 45%;
	z-index: -99;
	animation: cloud linear 22s  infinite;
  }

  .cloud-gif img{
	width: 200px;
	height: auto;
  }
  
  .cloud1 {
	position: absolute;
	top: 67%;
	z-index: -99;
	animation: cloud linear 25s  infinite;
	width: 100px;
  }

  .cloud2 {
	position: absolute;
	top: 25%;
	z-index: -99;
	animation: cloud linear 30s  infinite;
	width: 100px;
	
  }



  #project-header {
	font-family: 'Redacted Reg';
	letter-spacing: 2px;
	font-size: 60px;
	margin-top: 25px;
	/* margin-bottom: 25px; */
	color: rgb(245, 102, 102);
	height: fit-content;
	line-height: initial;
  }

  #project-tags {
	display: flex;
	flex-direction: row;
	row-gap: 5px;
	column-gap: 10px;
	flex-wrap: wrap;
	color: rgb(73, 146, 248);
	text-transform: uppercase;
	font-family: 'Redacted Reg';
	font-size: 21px;
  }

  .project-tag {
	cursor: pointer;
  }

  #project-body p {
	font-size: 20px;
  }

  #project-body a{
	color: rgb(73, 146, 248);
	text-decoration: none;
	padding-left: 2.5px;
	padding-right: 2.5px;
	cursor: pointer;
  }

  p img {
	width: 100%;
	height: auto;
  }

  #project-cover img{
	/* border: 2px solid rgb(255 149 149); */
	width: 100%;
	height: auto;
  }

  #pr-header {
	font-family: 'Gothic A1', sans-serif;
	font-size: 25px;
	color: rgb(245, 102, 102);
	height: fit-content;
	margin-bottom: 25px;
  }

  #pr-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
  }

  #pr-list ul {
 	
  }

  #pr-list a{
	color: rgb(73, 146, 248);
	text-decoration: none;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 20px;
	padding-left: 2.5px;
	padding-right: 2.5px;
	font-style: italic;
	cursor: pointer;
  }

  img:hover {
	animation: turn 1s steps(2, end) infinite;
  }

  #social-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 20px;
	font-family: 'IBM Plex Mono', monospace;
	font-style: italic;
	color: rgb(0, 0, 0);
  }

  #social-container a{
	color: rgb(73, 146, 248);
	text-decoration: none;
	font-style: normal;
	cursor: pointer;
  }

  #chat {
	position: absolute;
	bottom: 25px;
	right: 25px;
	z-index: 100;
	font-size: 24px;
  }

  #chat a{
	text-decoration: none;
  }

  #monster {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	top: 0px;
	left: 0px;
	color: rgb(245, 102, 102);
	font-size: 24px;
	animation: flip 1s steps(1, end) infinite;
	z-index: 500;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  #main-container a{
	cursor: pointer;
  }

  #sleeping-mario {

  }

  #sleeping-mario img{
	width: 10%;
	height: auto;
  }

  #credit-cont {
	display: flex;
	flex-direction: column;
	gap:5px;
  }

  #showcase-cont {
	display: flex;
	flex-direction: column;
	gap:5px;
  }

  .showcase {
	display: flex;
	flex-direction: row;
	gap: 5px;
	height: fit-content;
	flex-wrap: wrap;
  }

  .showcase p {
	margin: 0;
	padding: 0;
  }

  .credit {
	display: flex;
	flex-direction: row;
	gap: 5px;
	height: fit-content;
	flex-wrap: wrap;
  }

  .credit p {
	padding: 0;
	margin: 0;
  }

  #modified-time {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 25px;
  }

  #modified-time p{
	padding: 0;
	margin: 0;
  }

  #modified-time h4{
	padding: 0;
	margin: 0;
  }

  #wanderers-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
  }

  #wanderers-container p{
	padding: 0;
	margin: 0;
  }

  #wanderers-container h4{
	padding: 0;
	margin: 0;
  }

  

  
  @keyframes turn {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(10deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(180deg);
    }
    100% {
        transform: rotateZ(359deg);
    }
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes swiv {
    0% {
        transform: rotateZ(0deg);
		transform: scale(110%);
    }
    25% {
        transform: rotateZ(10deg);
    }
	50% {
        transform: rotateZ(0deg);
		transform: scale(100%);
    }
	75% {
        transform: rotateZ(-10deg);
    }
    100% {
        transform: rotateZ(0deg);
		transform: scale(110%);
    }
}

@keyframes cloud {
    0% {
        left:-700px;
    }
    
    100% {
        left: calc(100vw + 335px);
    }
}

 @media only screen and (max-width: 768px) {
	.article {
		height: auto;
		width: 80%;
	}

	#list-container {
		padding-bottom: 25px;
	}

	#project-container {
		width: 90%;
		line-height: 20px;
		font-size: 15px;
		gap: 10px;
	}

	#project-header {
		font-size: 30px;
	}

	.focused-image {
		height: auto;
		width: 90%;
	}

	#project-tags {
		row-gap: 5px;
		column-gap: 10px;
		font-size: 15px;
	}

	#pr-header {
		font-size: 20px;
		margin-bottom: 25px;
	}

	#pr-list a {
		font-size: 15px;
	}

	#project-body p {
		font-size: 15px;
	}
	
}

@media only screen and (max-width: 480px) {
	#list-container h2 {
		letter-spacing: 1px;
		font-size: 20px;
		line-height: 25px;
	}

	#project-tags {
		row-gap: 2.5px;
		column-gap: 5px;
		font-size: 12px;
	}

	.gallery-image{
		max-width: 90%;
	}

	
}