* {
    box-sizing: 0;
}

html {
    background-color:#30125b;
    color: #dca8ff;
    font-family: monospace;
    box-sizing: border-box;
	scroll-behavior: smooth;
}

.setmargin {
    margin: 0 2rem 2rem 2rem;
}

img {
    
    border: #dca8ff 0.5px solid;
    border-radius: 2px;
	object-fit: cover;
}

nav {
    justify-content: space-between;
    display: flex;
    align-items: center;
    position: sticky;
	top: 0;
    background-color:#30125b;
    color: #dca8ff;
	z-index: 50;
	padding: 0 2rem 0 2rem;
}

footer {
    text-align: center;
}

/* p:hover {
    for when i do different projects
    background-color: #041375;
} */
h1 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fad8ff;
}

h2 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fad8ff;
}

h3 {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #fad8ff;
}

hr {
    border: dotted #dca8ff;
}

a {
    /* text-decoration: none; */
}

a:link {
    color: #dca8ff;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
    background-color: #dca8ff;
    color:#30125b;
}

a:visited {
    /* color: #f53f35; */
    color: white;
}

ul {
    list-style: none;
}

p {
    margin: 0;
}

li::before {
  content: ">";
  margin-right: 0.5em;
}

li:hover {
    background-color: #dca8ff;
    color:#30125b;
    /* background-color: #A6ED00;
    color: #011212; */
}

.li-indent:hover {
    background-color: #dca8ff;
    color:#30125b;
    /* background-color: #A6ED00;
    color: #011212; */
}

.special-text {
    font-family: monospace;
}

.resume-button {
    outline: #dca8ff solid 0.5px;
    padding: 0.75rem;
    border-radius: 2px;
    text-decoration: none;
}

.nav-items {
    display: flex;
    gap: 2rem;
    align-items: center;
    text-decoration: none;
}

.nav-items:visited {
    color: white;
    text-decoration: none;
}

.nav-icon {
    text-decoration: none;
    color: #dca8ff;
}

.nav-icon:hover {
    background-color: #dca8ff;
    color:#30125b;
}

.nav-icon:visited {
    color:white;
}

.name {
    background-color: white;
    color:#011212;
    display: inline-block;
    padding: 0 1rem;
    font-size: 6rem;
}

.hero {
    height: 95vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
	align-items: center;
	gap: 20rem;
}

.hero-txt-contain {
	display: flex;
}

.hero-img-contain {
	display: flex;
	gap: 0.5rem;
}

.hero-small-img {
	display: flex;
	max-width: 400px;
	flex-direction: column;
	gap: 0.5rem;
}

.hero-deco {
    font-size: 18rem;
    margin: 0;
}

.hero-h {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.about-content {
    display: flex;
    gap: 1rem;
    /* flex-direction: column; */
}
/* .about-img {
    float: left;
} */

.about-subtext {
    margin-left: 1rem;
}

.footer-links {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.credits {
    font-size: smaller;
}

#about {
	scroll-margin-top: 90px;
}

#experience {
	scroll-margin-top: 90px;
}

#design {
	scroll-margin-top: 90px;
}

#projects {
	scroll-margin-top: 135px;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    max-width: 100vw;
    gap: 1.5rem;
    /* width: 100vw; */
    margin: 0 0 2rem 0;
}

/* .project-info { */
    /* background-color: aquamarine; */
/* } */

.project-card {
    /* background-color: #0d2bc3;
    outline: solid white 0.5px;
    max-width: 300px;
    display: flex; */
    /* padding: 0 60px 60px 0; */
    background-color:#30125b;
    outline: solid #fad8ff 0.5px;
    border-radius: 2px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    height: 300px;
}

.project-link {
    text-decoration: none;
}

.project-card:hover {
    background-color: #dca8ff;
    color:#30125b;
    filter: brightness(80%);
}

.project-text {
    padding: 0 2rem 2rem 2rem;
}

.project-tech {
    display: flex;
    gap: 1rem;
    padding: 0 2rem 2rem 2rem;
    flex-wrap: wrap;
}

.project-tech-img {
    height: 25px;
    border: none;
}

.project-img {
    border: none;
    width: 300px;
    height: 100px;
    object-fit: cover;
}

.design {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 0 0 2rem 0;
}

.design-card {
    outline: solid white 0.5px;
    max-width: 400px;
    display: flex;
    height: 300px;
}

.design-card:hover {
    filter: brightness(80%);
}

.design-img {
    width: 400px;
    height: 300px;
    object-fit: cover;
}

/* FALLING ITEMS */
/* @-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	} */