* {
	margin: 0;
	padding: 0;
    padding-top: 30px;
	box-sizing: border-box;
}

@font-face {
    font-family: "Mincho";
    src: url("Mincho-Variable-Remix.ttf") format("truetype");
}

body {
  font-family: "Mincho";
}

.container {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	font-size: 18px;
	padding: 40px;
}

.container h1 {
	font-size: 50px;
	line-height: 1.2em;
	margin-bottom: 20px;
}

.container p {
	line-height: 1.2em;
	margin-bottom: 20px;
	color: #222222;
}

.website-anim {
    font-variation-settings: "RAIN" 0;
    animation-name: boomerang;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes boomerang {
    0% {
		font-variation-settings: "RAIN" 0;
	}
	100% {
		font-variation-settings: "RAIN" 600;
	}
}

.leftright {
    font-variation-settings: "RAIN" 0;
    animation-name: leftright;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes leftright {
    from {
        transform: translateX(0);
      }
      to {
        transform: translateX(200px);
      }
}

.projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.project-link {
	color: black;
	border: 1px solid black;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
}
.project-link:hover {
	color: black;
	border: 2px solid black;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
    /* transition: 1s; */
    font-variation-settings: "RAIN" 600;
    /* transform: scale(1.05); */
    background-color:lightblue;
}
.project-link img {
	width: 100%;
}
.project-link h2 {
	font-size: 18px;
}
.project-link p {
	font-size: 18px;
}

.puddle-container {
    background-color: 314A63;
}

.project-puddle {
    color: black;
	border: 1px solid black;
	text-decoration: none;
	display: flex;
	flex-direction: column;
    grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 10px;
    font-size: 18px;
    

    flex-shrink: 1;
	flex-grow: 1;
	transition: 1s;
	flex-basis: 0px;
}

.project-puddle:hover {
	color: black;
	border: 2px solid black;
	text-decoration: none;
	display: flex;
    flex-grow: 1;
	gap: 10px;
	padding: 10px;
    font-variation-settings: "RAIN" 600;
    /* transform: scale(1.05); */
    background-color:lightblue;
    flex-grow: 10;
	flex-basis: 100px;
}

.puddle-container p {
    padding: 200px;
    max-width: 300px;
    color:lightblue;
}

.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color:lightblue;
}

.tilt {
    transform:rotate(45deg);
    text-decoration: none;
    background-color: 01162B;
}

.swing-anim {
    font-variation-settings: "RAIN" 0;
    animation-name: swing;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes swing {
    0% {
		font-variation-settings: "RAIN" 0;
        transform: rotate(0deg)
	}
	100% {
		font-variation-settings: "RAIN" 600;
        transform: rotate(180deg)
	}
}

.container-2 {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	font-size: 38px;
	padding: 40px;
}
.container-2 a {
    align-items: center;
    color:aliceblue;
}

.container-2:hover {
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	font-size: 38px;
	padding: 40px;
    align-items: center;
    color:aliceblue;
    animation-play-state: paused;
}