body {
	background-color: #9b026b;
   	position: sticky;
   	margin-left: -.6%;
   	margin-top: -1%;
	color: black;
}

li {
	list-style: none;
}

@font-face {
  font-family: Gotham Medium;
  src: url(../webfontkit/gothammedium-webfont.woff);
}

@keyframes fade-in {
		0%    {opacity: 0;}
		50%	  {opacity: 0;}
		90%	  {opacity: 0;}
		100%  {opacity: 1;}
	}

@keyframes logo-animation {
		0%  	{opacity: 1;transform: rotateZ(0deg);transform: translateY(-1000px);}
		25%		{opacity: 1;transform: rotateZ(360deg);}
		30%		{opacity: 1;transform: rotateZ(0deg);}
		55%		{opacity: 1;transform: rotateZ(360deg);}
		100% 	{opacity: 0; transform: translateY(1000px);}
}

.playbar {
	width: 100vw;
	height: 10vh;
	background-color: black;
	position: fixed;
	margin-top: 58%;
}

.logo {
	width: 9vw;
	height: 12vh;
	margin-top: 30%;
	margin-left: 47%;
	background-color: none;
	animation: logo-animation 5s, 1;
	opacity: 0;
}

.fotorama {
	position: absolute;
	height: 80vh;
	width: 70vw;
	margin-left: 25%;
	margin-top: -100%;
	animation: fade-in 5s, 1;
}

.home {
	position: absolute;
	margin-top: -6.5%;
	margin-left: 4%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.search {
	position: absolute;
	margin-top: -4%;
	margin-left: 4%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.your-library {
	position: absolute;
	margin-top: -1.5%;
	margin-left: 4%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.pink-mode-text {
	position: absolute;
	margin-top: 0.2%;
	margin-left: 4%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.flicker-mode-text {
	position: absolute;
	margin-top: 3%;
	margin-left: 4%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}
.fall-21 {
	position: absolute;
	margin-top: 10%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.spring-21-22 {
	position: absolute;
	margin-top: 12.5%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.fall-22 {
	position: absolute;
	margin-top: 15%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.graphic-design {
	position: absolute;
	margin-top: 17.5%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.interaction-design {
	position: absolute;
	margin-top: 20%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.illustration {
	position: absolute;
	margin-top: 22.5%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.motion-design {
	position: absolute;
	margin-top: 25%;
	font-family: Gotham Medium;
	font-size: 11pt;
	color: whitesmoke;
	animation: fade-in 5s, 1;
}

.welcome-article {
	position: absolute;
	height: 36vh;
	width: 76vw;
	margin-left: 22%;
	margin-top: -80%;
	animation: fade-in 5s, 1;
}

.welcome {
	font-family: Gotham Medium;
	font-size: 20pt;
	color: whitesmoke;
	margin-left: 1%;
	margin-top: -.10%;
	animation: fade-in 5s, 1;
}

.welcome-graphic-design {
	position: absolute;
	border-radius: 5px;
	height: 10vh;
	width: 24vw;
	background-color: #2B2D30;
	margin-left: -.05%;
	animation: fade-in 5s, 1;
}

.welcome-image-as-communication {
	position: absolute;
	border-radius: 5px;
	height: 10vh;
	width: 24vw;
	background-color: #2B2D30;
	margin-left: 34.5%;
	animation: fade-in 5s, 1;
}

.welcome-motion-design {
	position: absolute;
	border-radius: 5px;
	height: 10vh;
	width: 24vw;
	background-color: #2B2D30;
	margin-left: 69%;
	animation: fade-in 5s, 1;
}

.welcome-form-and-code {
	position: absolute;
	border-radius: 5px;
	height: 10vh;
	width: 24vw;
	background-color: #2B2D30;
	margin-left: -.05%;
	margin-top: 12%;
	animation: fade-in 5s, 1;
}

.welcome-bad-dream-baby {
	position: absolute;
	border-radius: 5px;
	height: 10vh;
	width: 24vw;
	background-color: #2B2D30;
	margin-left: 34.5%;
	margin-top: 12%;
	animation: fade-in 5s, 1;
}

.welcome-fall-22 {
	position: absolute;
	border-radius: 5px;
	height: 10vh;
	width: 24vw;
	background-color: #2B2D30;
	margin-left: 69%;
	margin-top: 12%;
	animation: fade-in 5s, 1;
}

.graphic-design-cover {
	height: 10vh;
	width: 7vw;
	border-radius: 5px;
	animation: fade-in 5s, 1;
}

.welcome-graphic-design-text {
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 38%;
	margin-top: -16%;
	animation: fade-in 5s, 1;
}

.welcome-image-as-communication-cover {
	height: 10vh;
	width: 7vw;
	background-color: #80AD3F;
	margin-left: -.10%;
	margin-top: -.10%;
	border-radius: 5px;
	animation: fade-in 5s, 1;
}

.IAC {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 20pt;
	color: black;
	margin-left: 8%;
	margin-top: 8%;
	animation: fade-in 5s, 1;
}

.welcome-image-as-communication-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 38%;
	margin-top: 8%;
	animation: fade-in 5s, 1;
}

.welcome-motion-design-cover {
	height: 10vh;
	width: 7vw;
	border-radius: 5px;
	animation: fade-in 5s, 1;
}

.welcome-motion-design-text {
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 38%;
	margin-top: -16%;
	animation: fade-in 5s, 1;
}

.welcome-form-and-code-cover {
	height: 10vh;
	width: 7vw;
	background-color: #3F90DC;
	margin-left: -.10%;
	margin-top: -.10%;
	border-radius: 5px;
	animation: fade-in 5s, 1;
}

.welcome-form-and-code-cover:hover {
	background-color: #9b026b;
}

.f-and-c {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 20pt;
	color: black;
	margin-left: 6.5%;
	margin-top: -23%;
	animation: fade-in 5s, 1;
}

.welcome-form-and-code-text {
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 38%;
	margin-top: -20%;
	animation: fade-in 5s, 1;
}

.welcome-bad-dream-baby-cover {
	height: 10vh;
	width: 7vw;
	border-radius: 5px;
	animation: fade-in 5s, 1;
}

.welcome-bad-dream-baby-text-1 {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 46%;
	margin-top: 13.5%;
	animation: fade-in 5s, 1;
}

.welcome-bad-dream-baby-text-2 {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 46%;
	margin-top: 15.25%;
	animation: fade-in 5s, 1;
}

.welcome-bad-dream-baby-text-3 {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 46%;
	margin-top: 17%;
	animation: fade-in 5s, 1;
}

.welcome-fall-22-cover {
	height: 10vh;
	width: 7vw;
	background-color: #662D80;
	margin-left: -.10%;
	margin-top: -.10%;
	border-radius: 5px;
	animation: fade-in 5s, 1;
}

.f-22 {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 20pt;
	color: black;
	margin-left: 5%;
	margin-top: -23%;
	animation: fade-in 5s, 1;
}

.fall-22-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-left: 39%;
	margin-top: -20%;
	animation: fade-in 5s, 1;
}

#background {
	background-image: url(../img/home-background.jpg);
	background-size: cover;
	width: 102vw;
	height: 170vh;
	margin-top: -40%;
	animation: fade-in 5s, 1;
}

#sidebar {
	height: 170vh;
	width: 20vw;
	background-color: black;
	margin-top: -12%;
	animation: fade-in 5s, 1;
}

.sidebar-icons {
	margin-top: 90%;
	height: 10vh;
	width: 1.8vw;
	animation: fade-in 5s, 1;
}

.turn-pink {
	font-family: Gotham Medium;
	color: #ff91de;
}

@keyframes opacity-shift {
	0%			{opacity: 0;}
	5%			{opacity: 1;}
	15%			{opacity: 0;}
	23%			{opacity: 1;}
	30%			{opacity: 0;}
	36%			{opacity: 1;}
	42%			{opacity: 0;}
	50%			{opacity: 1;}
	58%			{opacity: 0;}
	62%			{opacity: 1;}
	68%			{opacity: 0;}
	75%			{opacity: 1;}
	79%			{opacity: 0;}
	83%			{opacity: 1;}
	89%			{opacity: 0;}
	92%			{opacity: 1;}
	96%			{opacity: 0;}
	100%		{opacity: 1;}
}
.flickermode {
	animation-name: opacity-shift ;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.recently-played-article {
	position: absolute;
	height: 80vh;
	width: 76vw;
	margin-left: 22%;
	margin-top: -55%;
	animation: fade-in 5s, 1;
}

.recently-played {
	font-family: Gotham Medium;
	font-size: 16pt;
	color: whitesmoke;
	margin-left: 1%;
	margin-top: -.10%;
	animation: fade-in 5s, 1;
}

.your-favorite-artists {
	position: absolute;
	background-color: #1C1C1C;
	height: 28vh;
	width: 14vw;
	border-radius: 5px;
	margin-left: 0%;
	animation: fade-in 5s, 1;
}

.your-favorite-artists:hover{
	background-color: #9b026b 
}

.your-favorite-artists-text {
	font-family: Gotham Medium;
	font-size: 16pt;
	color: whitesmoke;
	margin-left: 1%;
	margin-top: 34%;
	animation: fade-in 5s, 1;
}

.your-favorite-artists-selfie {
	height: 15vh;
	width: 10vw;
	margin-top: 7%;
	margin-left: 12%;
}

.about-fiona-keith {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 7%;
	margin-left: 12%;
	animation: fade-in 5s, 1;
}

.falling-blocks {
	position: absolute;
	background-color: #1C1C1C;
	height: 28vh;
	width: 14vw;
	border-radius: 5px;
	margin-left: 0%;
	animation: fade-in 5s, 1;
}

.falling-blocks:hover {
	background-color: #9b026b;

}

.sparkle-circles {
	position: absolute;
	background-color: #1C1C1C;
	height: 28vh;
	width: 14vw;
	border-radius: 5px;
	margin-left: 20%;
	animation: fade-in 5s, 1;
}

.sparkle-circles:hover {
	background-color: #9b026b;
}

.how-do-you-feel {
	position: absolute;
	background-color: #1C1C1C;
	height: 28vh;
	width: 14vw;
	border-radius: 5px;
	margin-left: 40%;
	animation: fade-in 5s, 1;
}

.how-do-you-feel:hover {
	background-color: #9b026b;
}

.rectangle-heart {
	position: absolute;
	background-color: #1C1C1C;
	height: 28vh;
	width: 14vw;
	border-radius: 5px;
	margin-left: 60%;
	animation: fade-in 5s, 1;
}

.rectangle-heart:hover {
	background-color: #9b026b;
}

.steven-alexander-p1-20 {
	position: absolute;
	background-color: #1C1C1C;
	height: 28vh;
	width: 14vw;
	border-radius: 5px;
	margin-left: 80%;
	animation: fade-in 5s, 1;
}

.steven-alexander-p1-20:hover {
	background-color: #9b026b;
}

.falling-blocks-cover {
	position: absolute;
	width: 11vw;
	height: 15vh;
	margin-left: 10%;
	margin-top: 10%;
	animation: fade-in 5s, 1;
}

.sparkle-circles-cover {
	position: absolute;
	width: 11vw;
	height: 15vh;
	margin-left: 10%;
	margin-top: 10%;
	animation: fade-in 5s, 1;
}

.how-do-you-feel-cover {
	position: absolute;
	width: 11vw;
	height: 15vh;
	margin-left: 10%;
	margin-top: 10%;
	animation: fade-in 5s, 1;
}

.steven-alexander-p1-20-cover {
	position: absolute;
	width: 11vw;
	height: 15vh;
	margin-left: 10%;
	margin-top: 10%;
	animation: fade-in 5s, 1;
}

.rectangle-heart-cover {
	position: absolute;
	width: 11vw;
	height: 15vh;
	margin-left: 10%;
	margin-top: 10%;
	animation: fade-in 5s, 1;
}

.falling-blocks-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 84%;
	margin-left: 10%;
	animation: fade-in 5s, 1;
}

.sparkle-circles-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 84%;
	margin-left: 10%;
	animation: fade-in 5s, 1;
}

.how-do-you-feel-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 84%;
	margin-left: 10%;
	animation: fade-in 5s, 1;
}

.rectangle-heart-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 84%;
	margin-left: 10%;
	animation: fade-in 5s, 1;
}

.steven-alexander-p1-20-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 84%;
	margin-left: 10%;
	animation: fade-in 5s, 1;
}

#pink {
	position: absolute;
	margin-top: 0%;
	border-radius: 10px;
	animation: fade-in 5s, 1;
}

#flickermode {
	position: absolute;
	margin-top: 3%;
	border-radius: 10px;
	animation: fade-in 5s, 1;
}

#about-button {
	z-index: 2;
	position: absolute;
	margin-top: 105%;
	margin-left: -5%;
	border-radius: 10px;
	animation: fade-in 5s, 1;
}

aside#aboutsidedrawer {
	background-color: #260657;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 100vw;
	transition: transform 1s;
}

.slidethedrawer {
	transform: translate(-70vh);
}

.about-side-drawer-title {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 30pt;
	text-align: center;
	color: #9b026b;
	margin-left: -3%;
}

.about-text-1 {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 4%;
	margin-top: 7%;
}

.about-text-2 {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 4%;
	margin-top: 18%;
}

.about-text-3 {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 4%;
	margin-top: 28%;
}

.extra-info-title {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 30pt;
	text-align: center;
	color: #9b026b;
	margin-left: -3%;
	margin-top: 40%;
}

.extra-info {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 2%;
	margin-top: 45%;
}

.jquery-stuff {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 2%;
	margin-top: 53%;
}



/* HERE IS MY BREAKPOINT FOR TABLETS */

@media screen and (max-width: 1200px) {

body {
	background-color: #260657;
}

.fotorama {
	position: absolute;
	height: 80vh;
	width: 70vw;
	margin-left: 25%;
	margin-top: -77%;
}

#sidebar {
	height: 130vh;
	width: 20vw;
	background-color: black;
	margin-top: -10%;
}

.welcome-article {
	position: absolute;
	height: 36vh;
	width: 76vw;
	margin-left: 22%;
	margin-top: -60%;
}

.favorite-artists-article {
	height: 36vh;
	width: 76vw;
	background-color: pink;
}

.recently-played-article {
	position: absolute;
	height: 80vh;
	width: 76vw;
	margin-left: 22%;
	margin-top: -32%;
	animation: fade-in 5s, 1; }

.f-and-c {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 20pt;
	color: black;
	margin-left: 5%;
	margin-top: -26%;
	animation: fade-in 5s, 1;
}

.f-22 {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 20pt;
	color: black;
	margin-left: 3.5%;
	margin-top: -26%;
	animation: fade-in 5s, 1;
}

.about-side-drawer-title {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 30pt;
	text-align: center;
	color: #9b026b;
	margin-left: -3%;
	margin-top: 2%;
}

.about-text-1 {
	position: absolute;
	width: 38vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 4%;
	margin-top: 7%;
}

.about-text-2 {
	position: absolute;
	width: 38vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 4%;
	margin-top: 20%;
}

.about-text-3 {
	position: absolute;
	width: 38vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 4%;
	margin-top: 32%;
}

.extra-info-title {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 30pt;
	text-align: center;
	color: #9b026b;
	margin-left: -2%;
	margin-top: 46%;
}

.extra-info {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 2%;
	margin-top: 50%;
}

.jquery-stuff {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 11pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 2%;
	margin-top: 57%;
}

.IAC {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 20pt;
	color: black;
	margin-left: 6%;
	margin-top: 8%;
	animation: fade-in 5s, 1;
}

/* HERE IS MY BREAKPOINT FOR SMART PHONES */

@media screen and (max-width: 600px) {

body {
	background-color: orange;
}

#background {
	background-image: url(../img/home-background.jpg);
	background-size: cover;
	width: 102vw;
	height: 200vh;
	margin-top: -60%;
	animation: fade-in 5s, 1;
}

.logo {
	width: 19vw;
	height: 12vh;
	margin-top: 30%;
	margin-left: 47%;
	background-color: none;
	animation: logo-animation 5s, 1;
	opacity: 0;
}

.fotorama {
	height: 100vh;
	width: 95vw;
	margin-left: 2%;
	margin-top: 68%;
}

#sidebar {
	display: none;
}

#pink {
	display: none;
}

.welcome-article {
	position: absolute;
	height: 36vh;
	width: 76vw;
	margin-left: 5%;
	margin-top: 20%;
}

.welcome-graphic-design {
	position: absolute;
	border-radius: 5px;
	height: 6vh;
	width: 30vw;
	background-color: #2B2D30;
	margin-left: -.05%;
}

.welcome-image-as-communication {
	position: absolute;
	border-radius: 5px;
	height: 6vh;
	width: 30vw;
	background-color: #2B2D30;
	margin-left: 42%;
}

.welcome-motion-design {
	position: absolute;
	border-radius: 5px;
	height: 6vh;
	width: 30vw;
	background-color: #2B2D30;
	margin-left: 83%;
}

.welcome-form-and-code {
	position: absolute;
	border-radius: 5px;
	height: 6vh;
	width: 30vw;
	background-color: #2B2D30;
	margin-left: -.05%;
	margin-top: 25%;
}

.welcome-bad-dream-baby {
	position: absolute;
	border-radius: 5px;
	height: 6vh;
	width: 30vw;
	background-color: #2B2D30;
	margin-left: 42%;
	margin-top: 25%;
}

.welcome-fall-22 {
	position: absolute;
	border-radius: 5px;
	height: 6vh;
	width: 30vw;
	background-color: #2B2D30;
	margin-left: 83%;
	margin-top: 25%;
}

.graphic-design-cover {
	height: 6vh;
	width: 8vw;
	border-radius: 5px;
}

.welcome-graphic-design-text {
	font-family: Gotham Medium;
	font-size: 7pt;
	color: whitesmoke;
	margin-left: 38%;
	margin-top: -21%;
}

.welcome-image-as-communication-cover {
	height: 6vh;
	width: 8vw;
	background-color: #80AD3F;
	margin-left: -.10%;
	margin-top: -.10%;
	border-radius: 5px;
}

.IAC {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 10pt;
	color: black;
	margin-left: 6%;
	margin-top: 11%;
}

.welcome-image-as-communication-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 7pt;
	color: whitesmoke;
	margin-left: 36%;
	margin-top: 9%;
}

.welcome-motion-design-cover {
	height: 6vh;
	width: 8vw;
	border-radius: 5px;
}

.welcome-motion-design-text {
	font-family: Gotham Medium;
	font-size: 7pt;
	color: whitesmoke;
	margin-left: 38%;
	margin-top: -25%;
}

.welcome-form-and-code-cover {
	height: 6vh;
	width: 8vw;
	background-color: #3F90DC;
	margin-left: -.10%;
	margin-top: -.10%;
	border-radius: 5px;
}

.f-and-c {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 10pt;
	color: black;
	margin-left: 4%;
	margin-top: -33%;
}

.welcome-form-and-code-text {
	font-family: Gotham Medium;
	font-size: 7pt;
	color: whitesmoke;
	margin-left: 38%;
	margin-top: -34%;
}

.welcome-bad-dream-baby-cover {
	height: 6vh;
	width: 8vw;
	border-radius: 5px;
}

.welcome-bad-dream-baby-text-1 {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 7pt;
	color: whitesmoke;
	margin-left: 55%;
	margin-top: 27%;
}

.welcome-bad-dream-baby-text-2 {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 5pt;
	color: whitesmoke;
	margin-left: 55%;
	margin-top: 30%;
}

.welcome-bad-dream-baby-text-3 {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 7pt;
	color: whitesmoke;
	margin-left: 55%;
	margin-top: 32%;
}

.welcome-fall-22-cover {
	height: 6vh;
	width: 8vw;
	background-color: #662D80;
	margin-left: -.10%;
	margin-top: -.10%;
	border-radius: 5px;
}

.f-22 {
	position: absolute;
	font-family: Futura;
	font-weight: bolder;
	font-size: 10pt;
	color: black;
	margin-left: 2.5%;
	margin-top: -33%;
}

.fall-22-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 7pt;
	color: whitesmoke;
	margin-left: 39%;
	margin-top: -30%;
}

.recently-played-article {
	position: absolute;
	height: 80vh;
	width: 76vw;
	margin-left: 5%;
	margin-top: 95%;
	animation: fade-in 5s, 1;
}

.falling-blocks {
	position: absolute;
	background-color: #1C1C1C;
	height: 18vh;
	width: 28vw;
	border-radius: 5px;
	margin-left: 0%;
	animation: fade-in 5s, 1;
}
.sparkle-circles {
	position: absolute;
	background-color: #1C1C1C;
	height: 18vh;
	width: 28vw;
	border-radius: 5px;
	margin-left: 40%;
	animation: fade-in 5s, 1;
}
.how-do-you-feel {
	position: absolute;
	background-color: #1C1C1C;
	height: 18vh;
	width: 28vw;
	border-radius: 5px;
	margin-left: 80%;
	animation: fade-in 5s, 1;
}
.rectangle-heart {
	display: none;
}

.steven-alexander-p1-20 {
	display: none;
}

.falling-blocks-cover {
	position: absolute;
	width: 28vw;
	height: 18vh;
	margin-left: 0%;
	margin-top: 0%;
	animation: fade-in 5s, 1;
	border-radius: 5px;
}

.sparkle-circles-cover {
	position: absolute;
	width: 28vw;
	height: 18vh;
	margin-left: 0%;
	margin-top: 0%;
	animation: fade-in 5s, 1;
	border-radius: 5px;
}

.how-do-you-feel-cover {
	position: absolute;
	width: 28vw;
	height: 18vh;
	margin-left: 0%;
	margin-top: 0%;
	animation: fade-in 5s, 1;
	border-radius: 5px;
}

.falling-blocks-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 110%;
	margin-left: 2%;
	animation: fade-in 5s, 1;
}

.sparkle-circles-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 110%;
	margin-left: 2%;
	animation: fade-in 5s, 1;
}

.how-do-you-feel-text {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 110%;
	margin-left: 2%;
	animation: fade-in 5s, 1;
}

.your-favorite-artists {
	position: absolute;
	background-color: #1C1C1C;
	height: 18vh;
	width: 28vw;
	border-radius: 5px;
	margin-left: 0%;
	margin-top: 0%;
	animation: fade-in 5s, 1;
}

.your-favorite-artists-text {
	font-family: Gotham Medium;
	font-size: 16pt;
	color: whitesmoke;
	margin-left: 1%;
	margin-top: 70%;
	animation: fade-in 5s, 1;
}

.your-favorite-artists-selfie {
	height: 15vh;
	width: 25vw;
	margin-top: 7%;
	margin-left: 5%;
}

.about-fiona-keith {
	position: absolute;
	font-family: Gotham Medium;
	font-size: 12pt;
	color: whitesmoke;
	margin-top: 20%;
	margin-left: 12%;
	animation: fade-in 5s, 1;
}

aside#aboutsidedrawer {
	background-color: #260657;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 100vw;
	transition: transform 1s;
}

.slidethedrawer {
	transform: translate(-40vh);
}

#about-button {
	z-index: 2;
	position: absolute;
	margin-top: 105%;
	margin-left: 5%;
	border-radius: 10px;
	animation: fade-in 5s, 1;
}

.about-side-drawer-title {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 30pt;
	text-align: center;
	color: #9b026b;
	margin-left: 7%;
	margin-top: 2%;
}

.about-text-1 {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 9pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 7%;
	margin-top: 12%;
}

.about-text-2 {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 9pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 7%;
	margin-top: 50%;
}

.about-text-3 {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 9pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 7%;
	margin-top: 85%;
}

.extra-info-title {
	position: absolute;
	width: 50vw;
	font-family: Gotham Medium;
	font-size: 30pt;
	text-align: center;
	color: #9b026b;
	margin-left: 7%;
	margin-top: 122%;
}

.extra-info {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 9pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 7%;
	margin-top: 132%;
}

.jquery-stuff {
	position: absolute;
	width: 35vw;
	font-family: Gotham Medium;
	font-size: 9pt;
	text-align: center;
	color: whitesmoke;
	margin-left: 7%;
	margin-top: 148%;
}