* {
	 font-family: 'Press-Start';
	 margin: 0;
	 padding: 0;
	 box-sizing: border-box;
	 -ms-overflow-style: none;
	/* IE and Edge */
	 scrollbar-width: none;
	/* Firefox, Safari 18.2+, Chromium 121+ */
}
 @font-face {
	 font-family: "Romantics";
	 src: url('src/suika.otf') format("truetype");
	 font-weight: normal;
	 font-style: normal;
	 letter-spacing: 40px;
}
 @font-face {
	 font-family: 'Pixel';
	 src: url('src/LowresPixel-Regular.otf') format('opentype');
	 font-weight: normal;
	 font-style: normal;
}
 @font-face {
	 font-family: 'Playfair-Italic';
	 src: url('src/PlayfairDisplay-Italic.ttf') format("truetype");
}
 @font-face {
	 font-family: 'Press-Start';
	 src: url('src/PressStart2P-Regular.ttf') format("truetype");
}
 :root {
	 font-family: 'Romantics';
	 font-synthesis: none;
	 text-rendering: optimizeLegibility;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}
 #experience {
	 position: fixed;
	 height: 100%;
	 width: 100%;
	 top: 0;
	 left: 0;
	 overflow: hidden;
}
 #exp-canvas {
	 height: 100%;
	 width: 100%;
}
 .modal {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 font-size: 3vh;
	 z-index: 999;
	 display: none;
	 background-color: black;
	 color: white;
}
/* top nav */
 .topnav {
	 background-color: #5064a7;
	 overflow: hidden;
	 position: fixed;
	 width: 100%;
	 z-index: 1000;
	 margin-top: -4px;
	 height: fit-content;
}
 .topnav h4 {
	 font-size: 2vh;
	 padding: 14px 16px;
	 float: left;
	 color: #f2f2f2;
}
 .topnav img {
	 position: relative;
	 width: 2%;
	 left: 0%;
	 margin-top: 0.4%;
}
 .song-name {
	 position: fixed;
	 display: inline-block;
	 padding: 14px 16px;
	 font-size: 2vh;
	 color: #f2f2f2;
}
 @media (max-width: 1000px) {
	 .topnav h4, .topnav img, .song-name {
		 display: none;
	}
}
 .topnav a {
	 float: right;
	 color: #f2f2f2;
	 text-align: center;
	 padding: 14px 16px;
	 text-decoration: none;
	 font-size: 2vh;
}
 .topnav a:hover {
	 background-color: #36477a;
	 color: white;
}
 .topnav a.active {
	 background-color: #859ada;
	 color: white;
}
 .nothing {
	 color: #5064a7;
}
/* specifically for about.html */
 .about-me-div {
	 height: fit-content;
	 width: 40%;
	 position: relative;
	 margin-top: 30px;
	 left: 8%;
	 transition: transform 0.6s ease-in-out;
	 transform: scale(1);
}
 .about-me-div .bg {
	 width: 100%;
	 position: absolute;
	 z-index: -10;
}
 .about-me-div div {
	 left: 0%;
	 width: 100%;
	 margin-top: 7%;
	 text-align: center;
	 position: absolute;
	 h5 {
		color:#1700d1;
		margin-top: -5%;
		font-size: 1vw;
		line-height: 1.5;
	 }
}
 .about-me-div div h1 {
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 4px;
	 font-size: 3vw;
	 transform: translateX(-3vw);
}
 .about-me-div div img {
	 width: 30%;
	 margin-top: 0px;
}
#donate-img {
	margin-top: 5%;
}
 .about-me-div:hover {
	 transform: scale(1.02);
}
 .tiny-img-display-div {
	 height: fit-content;
	 width: 15%;
	 position: relative;
	 margin-top: 3%;
	 float: right;
	 right: 15%;
	 transform: scale(1);
	 animation-name: rotate-div;
	 animation-duration: 2s;
	 animation-iteration-count: infinite;
	 animation-direction: alternate;
	 animation-timing-function: ease-in-out;
}
 .tiny-img-display-div .slideshow {
	 width: 80%;
	 display: block;
	 margin: auto;
	 margin-top: 15%;
	 object-fit: cover;
	 padding: 10px;
}
 .tiny-img-display-div .bg {
	 width: 100%;
	 height: auto;
	 position: absolute;
	 z-index: -10;
	 display: block;
	 margin: auto;
}
 .tiny-img-display-div:hover {
	 transform: scale(1.1);
}
 @keyframes rotate-div {
	 from {
		 transform: rotate(-2deg);
	}
	 to {
		 transform: rotate(2deg);
	}
}
 .cloud {
	 width: 15%;
	 animation: floatUpDown 6s ease-in-out infinite;
}
 #star1_3d {
	 position: absolute;
	 width: 4%;
	 float: right;
	 right: 13%;
	 margin-top: 15%;
	 z-index: 10;
	 animation: floatUpDownLess 5s ease-in-out infinite;
}
 @keyframes floatUpDown {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(-20px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 .giant_2d_stars {
	 position: absolute;
	 z-index: -10;
	 width: 30%;
	 left: 15%;
	 margin-top: 25%;
}
 #cloud1 {
	 position: absolute;
	 left: 45%;
	 margin-top: 7%;
}
 .giant-about-me-div {
	 height: fit-content;
	 width: 50%;
	 position: relative;
	 margin-top: 20%;
	 float: right;
	 right: -6%;
	 transition: transform 0.6s ease-in-out;
	 transform: scale(1);
}
 .giant-about-me-div:hover {
	 transform: scale(1.02);
}
 .giant-about-me-div .bg {
	 width: 100%;
	 position: absolute;
	 z-index: -10;
}
 .giant-about-me-div div {
	 margin-left: 15%;
	 margin-top: 12%;
	 position: relative;
	 display: flex;
	 align-content: center;
}
 .some-info {
	 margin-left: 15%;
	 display: block;
	 text-align: center;
	 padding: 10%;
	 padding-top: 3%;
	 color: #1700d1;
	 font-size: 1.5vw;
	 line-height: 1.5;
}
 .giant-about-me-div div span {
	 width: 50%;
	 text-align: center;
	 margin-top: 5%;
	 height: fit-content;
}
 .giant-about-me-div div span h1 {
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 3vw;
}
 .giant-about-me-div div span h2 {
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 1.5vw;
	 margin-bottom: 10%;
}
 .giant-about-me-div div span h4 {
	 color: #1700d1;
	 font-size: 1.25vw;
	 line-height: 1.5;
}
 .me-img {
	 width: 40%;
	 margin-left: 5%;
	 margin-top: 5%;
	 border: 1vw solid #5064a7;
}
 .space-cat-div {
	 height: fit-content;
	 width: 20%;
	 position: relative;
	 margin-top: 60%;
	 left: 15%;
	 transform: scale(1);
	 animation: floatUpDownLess 5s ease-in-out infinite;
}
 .space-cat-div .bg {
	 width: 100%;
	 height: auto;
	 position: absolute;
	 z-index: -10;
	 display: block;
	 margin: auto;
}
 .space-cat-div .cat {
	 position: absolute;
	 width: 50%;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 margin-top: 50%;
}
 .space-cat-div .balloon {
	 position: absolute;
	 width: 30%;
	 top: 50%;
	 transform: translate(-50%, -50%);
	 margin-top: 15%;
}
 #planet1 {
	 width: 10%;
	 position: absolute;
	 left: 30%;
	 margin-top: 15%;
	 z-index: 10;
	 animation: rotate-div 2s infinite alternate ease-in-out;
}
 @keyframes floatUpDownLess {
	 0% {
		 transform: translateY(0);
	}
	 50% {
		 transform: translateY(-10px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 #cloud2 {
	 position: absolute;
	 left: 30%;
	 margin-top: 60%;
	 z-index: 10;
}
 .hyperlinks {
	 position: absolute;
	 float: right;
	 right: 16%;
	 margin-top: 12%;
	 width: 35%;
	 display: flex;
	 justify-content: space-between;
	 column-gap: 5vw;
	 text-align: center;
}
 .discord, .spotify, .github {
	 width: 100%;
	 z-index: 10;
	 transform: scale(1);
	 transform: rotate(0deg);
	 transition: transform 0.3s ease-in-out;
}
 .discord:hover, .spotify:hover, .github:hover {
	 transform: scale(1.1) rotate(-10deg);
}
 .text-window-div {
	 height: fit-content;
	 width: 65%;
	 position: relative;
	 margin-top: 85%;
	 margin-left: auto;
	 margin-right: auto;
	 transform: translateX(-50%);
	 transform: scale(1);
	 transition: transform 0.6s ease-in-out;
	 text-align: center;
}
 .text-window-div .bg {
	 width: 100%;
	 height: auto;
	 position: absolute;
	 z-index: -10;
	 display: block;
	 margin: auto;
}
 .text-window-div div {
	 text-align: left;
	 width: 65%;
	 padding: 5%;
	 padding-left: 7%;
	 padding-top: 15%;
	 position: relative;
	 color: #1700d1;
}
 .text-window-div div h1 {
	 font-family: "Playfair-Italic";
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 3vw;
	 margin-bottom: 3%;
	 margin-left: 5%;
}
 .text-window-div div ul {
	 line-height: 1.5;
	 font-size: 1.25vw;
}
 .text-window-div div ul li ul {
	 margin-left: 5%;
}
 .text-window-div #cute-cat {
	 position: absolute;
	 float: right;
	 margin-top: -52%;
	 right: 0%;
	 width: 40%;
	 transform: scale(1);
	 transform: rotate(0deg);
	 transition: transform 0.3s ease-in-out;
}
 .text-window-div #cute-cat:hover {
	 transform: scale(1.2) rotate(-5deg);
}
 .text-window-div #crown {
	 position: absolute;
	 float: right;
	 margin-top: -58%;
	 right: 18%;
	 width: 18%;
	 animation: rotate-div 2s infinite alternate ease-in-out;
}
 .text-window-div:hover {
	 transform: scale(1.02);
}
 #star1_2d {
	 position: absolute;
	 float: right;
	 margin-top: -35%;
	 right: 8%;
	 width: 15%;
}
 #star2_3d {
	 position: absolute;
	 margin-top: -8%;
	 left: 6%;
	 width: 20%;
	 animation: rotate-div 3s infinite alternate ease-in-out;
}
 .inspirations-div {
	 height: fit-content;
	 width: 30%;
	 position: relative;
	 margin-top: -5%;
	 float: right;
	 margin-right: 10%;
	 animation: floatUpDown 5s ease-in-out infinite;
	 text-align: center;
}
 .inspirations-div h1 {
	 margin-top: 12%;
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 2vw;
}
 .inspirations-div .bg {
	 width: 100%;
	 height: auto;
	 position: absolute;
	 z-index: -10;
	 display: block;
	 margin: auto;
}
 .inspirations-div .slideshow {
	 overflow: hidden;
	 width: 70%;
	 aspect-ratio: 1;
	 display: block;
	 margin: auto;
	 object-fit: cover;
	 padding: 10px;
}
 .scrolling-txt-div {
	 width: 30%;
	 background-color: #36477a;
	 padding-top: 2vw;
	 padding-bottom: 2vw;
	 position: relative;
	 margin-top: 7%;
	 margin-left: 28%;
}
 .scrolling-txt-div div {
	 overflow: hidden;
	 white-space: nowrap;
	 margin-left: 1vw;
	 margin-right: 1vw;
}
 .scrolling-txt {
	 display: inline-block;
	 animation: scroll-left 30s linear infinite;
	 color: white;
}
 .scrolling-txt span {
	 font-family: "Playfair-Italic";
	 font-weight: bolder;
	 font-size: 2vw;
	 margin-right: 0%;
}
 @keyframes scroll-left {
	 0% {
		 transform: translateX(0%);
	}
	 100% {
		 transform: translateX(-50%);
	}
}
 .links-div {
	 height: fit-content;
	 width: 40%;
	 position: relative;
	 margin-top: 3%;
	 margin-left: 10%;
	 text-align: center;
	 transform: scale(1);
	 transition: transform 0.6s ease-in-out;
}
 .links-div div {
	 left: 0%;
	 width: 100%;
	 margin-top: 10%;
	 text-align: center;
	 position: absolute;
}
 .links-div div h1 {
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 3vw;
}
 .links-div div span {
	 margin-top: 6%;
	 display: flex;
	 justify-content: space-around;
}
 .links-div div span ul {
	 text-align: left;
	 line-height: 2;
	 font-size: 1.5vw;
	 color: #1700d1;
}
 .links-div div span ul a {
	 color: inherit;
	 text-decoration: none;
}
 .links-div div span ul li:hover {
	 color: #f99aaf;
	 text-decoration: none;
}
 .links-div .bg {
	 width: 100%;
	 height: auto;
	 position: absolute;
	 z-index: -10;
	 display: block;
	 margin: auto;
}
 .links-div:hover {
	 transform: scale(1.02);
}
 #cloud3 {
	 position: absolute;
	 left: 40%;
	 margin-top: 20%;
	 z-index: 10;
}
 #giant_star2 {
	 position: absolute;
	 left: 55%;
	 margin-top: 0%;
	 z-index: -10;
	 width: 20%;
}
 #ribbon1 {
	 position: absolute;
	 left: 10%;
	 margin-top: 20%;
	 width: 15%;
	 animation: rotate-div 4s infinite alternate ease-in-out;
}
 #dog1 {
	 position: absolute;
	 float: right;
	 right: 5%;
	 margin-top: 2%;
	 width: 10%;
	 animation: rotate-div 3s infinite alternate ease-in-out;
}
 .ending {
	 position: relative;
	 margin: auto;
	 margin-top: 40%;
	 width: fit-content;
	 margin-bottom: 20px;
	 background-color: #36477a;
	 padding: 1vh 1vw;
	 border-radius: 8px;
	 transform: scale(1);
	 transition: transform 0.6s ease-in-out;
	 color: white;
	 font-family: "Playfair-Italic";
	 font-weight: bolder;
	 text-align: center;
	 font-size: 1vw;
}
 .ending a {
	 font-family: inherit;
	 color: inherit;
	 font-size: inherit;
	 text-decoration: none;
}
 .ending:hover {
	 transform: scale(1.02);
}
/* specifically for projects.html */
 #giant_star3 {
	 position: absolute;
	 left: 55%;
	 margin-top: 0%;
	 z-index: -10;
	 width: 35%;
}
 #ribbon2 {
	 position: absolute;
	 left: 40%;
	 margin-top: 100%;
	 z-index: 100;
	 width: 15%;
	 animation: rotate-div 4s infinite alternate ease-in-out;
}
 #cloud4 {
	 position: absolute;
	 left: 40%;
	 margin-top: 20%;
	 z-index: 10;
}
 #dog2 {
	 position: absolute;
	 float: right;
	 right: 56%;
	 margin-top: 138%;
	 width: 10%;
	 animation: rotate-div 3s infinite alternate ease-in-out;
}
 #planet2 {
	 width: 10%;
	 position: absolute;
	 left: 33%;
	 margin-top: 65%;
	 z-index: 10;
	 animation: rotate-div 2s infinite alternate ease-in-out;
}
 #invis-ending {
	 position: relative;
	 margin-top: 120%;
	 color: rgba(0, 0, 0, 0);
}
 #proj-ending {
	 margin-top: 20%;
}
 .project-div {
	 width: 60%;
	 height: fit-content;
	 margin: 20px auto;
	 margin-top: 50px;
	 overflow: hidden;
	 padding-top: 0px;
	 padding-left: -2px;
	 padding-right: -2px;
	 background-color: #fffefc;
	 border-radius: 4px;
	 border-width: 10px;
	 border: solid;
	 border-color: #726dd3;
	 box-sizing: border-box;
}
 .project-left {
	 margin-left: 10%;
}
 .project-left .project-title, .project-left .project-blurb {
	 margin-left: 40px;
}
 .project-right {
	 margin-right: 10%;
	 display: flex;
	 flex-direction: column;
	 align-items: stretch;
}
 .project-right .project-title, .project-right .project-blurb {
	 margin-right: 40px;
	 text-align: right;
}
 .project-bar {
	 width: calc(fit-content + 4px);
	 box-sizing: border-box;
	 background-color: #a6a2ff;
	 margin-left: -2px;
	 margin-right: -2px;
	 margin-bottom: 20px;
	 margin-top: -2px;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 padding: 5px 10px;
	 padding-left: 20px;
	 padding-right: 30px;
	 border-radius: 4px;
	 border-width: 10px;
	 border: solid;
	 border-color: #726dd3;
}
 .project-bar div {
	 display: flex;
	 justify-content: space-between;
	 gap: 10px;
}
 #projects-title {
	 margin-top: 30px;
	 text-align: center;
	 font-size: 60px;
	 color: white;
	 font-family: 'Romantics';
	 letter-spacing: 2px;
}
 .project-img {
	 height: 90%;
	 width: auto;
	 margin-right: 20px;
	 margin-left: 20px;
}
 .proj-flex-container {
	 height: 50vh;
	 margin-top: 20px;
	 display: flex;
	 align-items: flex-start;
	 gap: 10%;
}
 .project-right .proj-flex-container {
	 justify-content: flex-end;
	 gap: 10%;
}
 .project-desc {
	 margin-right: 50px;
}
 body {
	 background: linear-gradient(120deg, #8992dd, #d2bbd8, #fecacc, #fecacc);
	 background-repeat: no-repeat;
	 background-attachment: scroll;
	 cursor: url('src/mouse_cursor.png'), auto;
}
 .giant-project-div {
	 height: fit-content;
	 width: 55%;
	 position: relative;
	 margin-top: 30%;
	 float: right;
	 right: 5%;
	 transition: transform 0.6s ease-in-out;
	 transform: scale(1);
}
 .giant-project-div:hover {
	 transform: scale(1.02);
}
 .giant-project-div .bg {
	 width: 100%;
	 position: absolute;
	 z-index: -10;
}
 .giant-project-div div {
	 margin-left: 3%;
	 margin-top: 12%;
	 position: relative;
	 display: flex;
	 align-content: center;
}
 .project-info {
	 display: block;
	 text-align: left;
	 padding-left: 10%;
	 padding-top: 5%;
	 color: #1700d1;
	 font-size: 1vw;
	 line-height: 1.5;
}
 .giant-project-div div span {
	 width: 50%;
	 text-align: center;
	 margin-top: 5%;
	 margin-left: 6%;
	 height: fit-content;
}
 .giant-project-div div span h1 {
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 3vw;
}
 .giant-project-div div span li {
	 margin-top: 5%;
	 font-size: 1vw;
}
 .proj-img {
	 width: 30%;
	 margin-left: 5%;
	 margin-top: 5%;
	 border: 0.5vw solid #5064a7;
	 object-fit: cover;
}
 #project-div-2 {
	 height: fit-content;
	 width: 55%;
	 position: relative;
	 margin-top: 10%;
	 float: left;
	 left: 5%;
}
 #project-div-3 {
	 height: fit-content;
	 width: 55%;
	 position: relative;
	 margin-top: 10%;
	 float: right;
	 right: 5%;
}
 .add-project-div {
	 height: fit-content;
	 width: 25%;
	 position: relative;
	 margin-top: 30%;
	 float: left;
	 margin-left: 4%;
	 animation: floatUpDown 5s ease-in-out infinite;
	 text-align: center;
}
 .add-project-div h1 {
	 margin-top: 12%;
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 2vw;
}
 .add-project-div .bg {
	 width: 100%;
	 height: auto;
	 position: absolute;
	 z-index: -10;
	 display: block;
	 margin: auto;
}
 .add-project-div .slideshow {
	 width: 70%;
	 display: block;
	 margin: auto;
	 object-fit: cover;
	 padding: 10px;
	 padding-top: 20%;
}
 #project-div-1 .slideshow {
	 height: 70%;
	 width: 100%;
	 margin-top: -15%;
}
 #add-project-div-1-1-2 {
	 height: fit-content;
	 width: 25%;
	 position: absolute;
	 margin-top: 45%;
	 margin-left: 13%;
}
 #add-project-div-1-1-2 .slideshow {
	 height: 70%;
	 width: 100%;
	 margin-top: -15%;
}
 #add-project-div-1-2 {
	 height: fit-content;
	 width: 25%;
	 position: relative;
	 margin-top: 2%;
	 float: right;
	 margin-right: 10%;
}
 #add-project-div-1-2 .slideshow {
	 height: 70%;
	 width: 100%;
	 margin-top: -15%;
}
 #add-project-div-1-2 h1 {
	 margin-top: 10%;
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 2vw;
}
 #add-project-div-1-2-2 {
	 height: fit-content;
	 width: 25%;
	 position: absolute;
	 margin-top: 85%;
	 margin-left: 73%;
}
 #add-project-div-1-2-2 .slideshow {
	 height: 70%;
	 width: 100%;
	 margin-top: -18%;
}
 #add-project-div-1-2-2 h1 {
	 margin-top: 10%;
	 font-family: "Playfair-Italic";
	 color: #1700d1;
	 font-weight: bolder;
	 letter-spacing: 0.25vw;
	 font-size: 2vw;
}
 #add-donate-div-1-2-2 {
	 height: fit-content;
	 width: 25%;
	 position: relative;
	 margin-top: 14%;
	 float: right;
	 margin-right: 4%;
}
 #add-project-div-1-3 {
	 height: fit-content;
	 width: 25%;
	 position: relative;
	 margin-top: 15%;
	 float: left;
	 margin-left: 4%;
}
 #add-project-div-1-3 .slideshow {
	 height: 70%;
	 width: 100%;
	 margin-top: -20%;
}
/* for donate.html */
 #donate-ending {
	 margin-top: 10%;
}
 #cloud5 {
	 position: absolute;
	 left: 70%;
	 width: 25%;
	 margin-top: 20%;
	 z-index: 10;
	 animation: floatUpDown 7s ease-in-out infinite;
}
 #star3_3d {
	 position: absolute;
	 margin-top: 45%;
	 left: 22%;
	 width: 12%;
	 animation: rotate-div 3s infinite alternate ease-in-out;
}
 #star2_2d {
	 position: absolute;
	 float: right;
	 margin-top: 6%;
	 right: 20%;
	 width: 20%;
}
 #dog3 {
	 position: absolute;
	 float: right;
	 right: 42%;
	 margin-top: 96%;
	 width: 10%;
	 animation: rotate-div 3s infinite alternate ease-in-out;
}
 #ribbon4 {
	 position: absolute;
	 left: 20%;
	 margin-top: 132%;
	 z-index: 100;
	 width: 15%;
	 animation: rotate-div 4s infinite alternate ease-in-out;
}
 #donate-title {
	 text-align: center;
	 margin-top: 30px;
	 font-weight: bold;
	 font-size: 60px;
	 color: white;
	 font-family: 'Romantics';
	 letter-spacing: 2px;
}
/* form inputs */
 input[type=text], select, textarea {
	 width: 100%;
	 padding: 12px;
	 border: 1px solid #ccc;
	 border-radius: 4px;
	 box-sizing: border-box;
	 margin-top: 6px;
	 margin-bottom: 16px;
	 resize: vertical;
}
/* submit button */
 input[type=submit] {
	 background-color: #aaaaf9;
	 color: white;
	 padding: 12px 20px;
	 border: none;
	 border-radius: 4px;
	 cursor: pointer;
}
 input[type=submit]:hover {
	 background-color: #aaaaf9;
}
/* form container */
 .container {
	 border-radius: 5px;
	 background-color: #ccf;
	 margin: auto;
	 margin-top: 30px;
	 padding: 20px;
	 width: 80%;
}
 #add-donate-div-1-3 {
	 height: fit-content;
	 width: 25%;
	 position: relative;
	 margin-top: 15%;
	 float: left;
	 margin-left: 4%;
}
/* stars */
 @keyframes move-background {
	 from {
		 -webkit-transform: translate3d(0px, 0px, 0px);
	}
	 to {
		 -webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
 @-webkit-keyframes move-background {
	 from {
		 -webkit-transform: translate3d(0px, 0px, 0px);
	}
	 to {
		 -webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
 @-moz-keyframes move-background {
	 from {
		 -webkit-transform: translate3d(0px, 0px, 0px);
	}
	 to {
		 -webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
 @-webkit-keyframes move-background {
	 from {
		 -webkit-transform: translate3d(0px, 0px, 0px);
	}
	 to {
		 -webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
 @keyframes slide-bg {
	 from {
		 background-position: 0 0;
	}
	 to {
		 background-position: 100% 100%;
	}
}
 @keyframes slide-bg2 {
	 from {
		 background-position: 0% 0%;
	}
	 to {
		 background-position: 0% 100%;
	}
}
 .stars {
	 background: transparent url("src/stars.png") repeat;
	 position: fixed;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 display: block;
	 z-index: -1000;
	 background-repeat: repeat;
	 animation: slide-bg 200s linear infinite;
}
 .stars2 {
	 transform: rotate(45deg);
	 animation: slide-bg2 240s linear infinite;
}
 .grid {
	 background: transparent url("src/grid.png") repeat;
	 opacity: 100%;
	 position: fixed;
	 top: 0;
	 bottom: 0;
	 left: 0;
	 right: 0;
	 display: block;
	 z-index: -100;
	 background-repeat: repeat;
}