section{
    height: 100vh;
    width: 100vw;
	position: relative;
	scroll-snap-align: center;
    scroll-snap-stop: always;
}

.section-header{
	padding: 0.75em;
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
	font-size: 3rem;
	color: #ffffff;
	text-align: center;
	font-family: 'Noto Color Emoji', 'Caveat', cursive;
}

.container{
	margin: auto;
	padding: 2em;
	background-color: rgba(255, 255, 255, 0.5);
	width: 90%;
	height: 75%;
	border-radius: 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
	row-gap: 1em;
	overflow-y: auto;
}

.container::-webkit-scrollbar{ width: 1em }
.container::-webkit-scrollbar-thumb{ background-color: #ffffff; border-radius: 0 1em 1em 0 }

.card{
	margin: auto;
	width: 12em;
	height: 12em;
	border-radius: 1em;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.card:hover{
	box-shadow: 0 0 1.5rem #ffffff;
	transition: 200ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.card-main{
	padding: 0.5em;
	width: 100%;
	height: 75%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Noto Color Emoji', 'Caveat', monospace;
	font-size: 2em;
}

.card-main > *{
	width: inherit;
	height: inherit;
}

.card-footer{
	width: 100%;
	height: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000000;
	border-radius: 0 0 1em 1em;
	background-color: #ffffff;
	font-family: monospace;
	font-size: 1rem;
}


/*Section 1 - Home*/
#home {
	background: linear-gradient(60deg, #84432c, #05041c);
	z-index: 2;
}

#home #bg_img {
	height: inherit;
}

#home #intro-container{
	color: white;
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
	text-align: right;
}

#home h1{
	font-family: "Gochi Hand", cursive;
	font-weight: 900;
	font-size: 5em;
	line-height: 2em;
}

#home h2{
	font-size: 2em;
	font-family:'Courier New', Courier, monospace;
}

#home #intrests{
	font-family: Caveat;
}


/*Section 2 - Board*/
#redirect-board{
	background-color: #d24e1d;
}


/*Section 3 - Coding*/
#coding{
	background-color: #4d4d4d;
}


/*Section 4 - Writings*/
#writings{
	background-color: #84432c;
}

#writings .container::-webkit-scrollbar-track { background-color: #6e2307; border-radius: 0 1em 1em 0 }

#writings .card{ background-color: #6e2307 }

#writings #writings-content-modal{
	padding: 1.5em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 0.5em;
	height: 90vh;
	width: 60vw;
	border: none;
	background-color: #a26b03;
}

#writings #writings-content-modal::backdrop {
	background-color: rgba(0, 0, 0, 0.4);
}

#writings-content-modal-close-btn{
	margin: 1em;
	position: absolute;
	top: 0;
	right: 0;
	font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	font-weight: bolder;
	font-size: 1.5em;
	border-radius: 1em;
	height: 2em;
	width: 2em;
	border: none;
	cursor: pointer;
}

#writings-content-modal-close-btn:hover{
	background-color: #000000;
	color: #ffffff;
}

#writings #writings-content-modal-title{
	margin-bottom: 1.5rem;
	font-family: 'Noto Color Emoji', 'Caveat', cursive;
	font-size: 2.5rem;
	color: #ffffff;
}

#writings #writings-content-modal-body{
	font-family: 'Courier New', Courier, monospace;
	font-size: 1.25rem;
	font-weight: 600;
	color: #d9d9d9;
	overflow-y: auto;
	line-height: 1.5em;
}

#writings #writings-content-modal-link{
	color: #b9ff22;
	font-weight: bolder;
	font-family: 'Courier New', Courier, monospace;
	display: block;
	padding: 2em 0;
}


/*Section 5 - Music*/
#music{
	background-color: #d23d56;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	z-index: 1;
}

#music iframe{
	border-radius: 1rem;
	box-shadow: 0 0 1rem #ffffff;
}

#music #music-controls{
	width: 10vw;
	height: 50%;
	justify-content: space-around;
	display: flex;
	flex-direction: column;
}

#music #music-controls img{
	height: 5rem;
	cursor: pointer;
}

#music #music-show-random{ transition: 300ms }

#music #music-show-random:hover{
	scale: 1.1;
	transition: 500ms;
	animation: dice-magic 1200ms linear;
}

@keyframes dice-magic {
	0%{ transform: rotate(0deg) }
	25%{ transform: rotate(-30deg) }
	50%{ transform: rotate(20deg) }
	75%{ transform: rotate(-10deg) }
	100%{ transform: rotate(0deg) }
}

#music #music-show-last:hover{
	transform: rotate(-360deg);
	transition: 1200ms;
}


/*Section 6 - Socials*/
#socials{
	background-color: #05041c;
	padding: 2rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
  	grid-gap: 1em;
}

#socials a{
	padding: 1rem;
	height: 100%;
	width: 100%;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

#socials a img {
	height: 7.5em;
}

#socials a:not(:hover) { opacity: 0.25 }

#socials a:hover {
	opacity: 1;
	transform: scale(1.1);
}