/* FONTS */

@font-face{
	font-family: 'PPMigra-Regular';
	font-weight: normal;
	font-style: normal;
	src: url("fonts/PPMigra-Regular.woff2") format('woff2');
}


@font-face{
	font-family: 'PPMigra-Italic';
	font-weight: normal;
	font-style: italic;
	src: url("fonts/PPMigra-Italic.woff2") format('woff2');
}

@font-face{
	font-family: 'PPMigra-Extrabold';
	font-weight: 700;
	src: url("fonts/PPMigra-Extrabold.woff2") format('woff2');
}

/* SCROLLING */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: white; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #D3D3D3;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #D3D3D3; 
}

/* STRUCTURE */

*{
	margin: 0;
	padding: 0;
}

body{
}

h3{
	font-family: 'PPMigra-Italic';
	font-weight: normal;
	font-style: italic;
	font-size: 2em;
	line-height: 1.2em;
}

h3 > a{
	text-decoration: none;
}


a:visited {
   color: inherit;
}

a.content{
	border-bottom:  5px solid #FFFF64;
	text-decoration: none;
	color: black;
}

a.content:hover{
	font-family: 'PPMigra-Italic';
	font-weight: normal;
	font-style: italic;
}

a.content:visited{
	color: black;
}

/* CLASSES */

.container{
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-gap: 1em;
	grid-auto-rows: minmax(90px,auto);
	grid-template-areas:
		"text-left text-right"
		"text-left text-right"
	;
}


.text-content{
	font-family: 'PPMigra-Regular';
	font-weight: normal;
	font-size: 6em;
	line-height: 1.2em;
	padding-left: 1em;
}

.text1{
	grid-area: text-left;
}

.text2{
	grid-area: text-left;
	z-index: 10;
}

/* ANIMATION */


.fade-out{
	animation: fadeOut 3s;
	animation-delay: 1s;
	-webkit-animation-fill-mode: forwards;
}

.fade-in{
	animation: fadeIn 3s;
	animation-delay: 2s;
	-webkit-animation-fill-mode: backwards;
}


@keyframes fadeOut {
	from{
		display: block;
		opacity: 100%;
	}

	to{
		display: none;
		opacity: 10%;
	}
}

@keyframes fadeIn {
	from{
		display: none;
		opacity: 0%;
	}

	to{
		display: block;
		opacity: 100%;
	}
}


.article-source{
	padding-left: 6em;
	padding-top: 1.5em;
	margin-bottom: 1em;
	font-size: 1em;
	background: white;
	position: fixed;
	bottom: 0;
}

.nested-grid{
	font-family: 'Space Mono', monospace;
	font-size: 1em;
	width: 27vw;
	margin-right: 4em
}

.playlist{
	padding-top: 3em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(1.2em, auto);
	grid-row-gap: 0.8em;
	grid-column-gap: 2.5em;
	position: sticky;
	top: 0;
}

.track-number{
	display: grid;
	justify-items: end;
}

.track-name{
	display: grid;
	justify-items: start;
}

.playlist2{
	display: none;
}

.track-number2{
	display: none;
}

.track-name2{
	display: none;
}

/*/* sixth paragraph - hovers */

.words span{
  opacity: 0;
  width: 100%;
  margin: 0 auto;
  position: relative;
  color: white;
}

.words-2 span{
  animation: animateWords 10s linear infinite 0s;
}

.words span:nth-child(2) {
  animation-delay: 1s;
  color: white;
}
.words span:nth-child(3) {
  animation-delay: 2s;
  color: white;
}
.words span:nth-child(4) {
  animation-delay: 3s;
  color: #FFFF64;
  animation-fill-mode: forwards;  
}


/* MEDIA QUERIES */


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	/* SCROLLING */

	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: black; 
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #D3D3D3;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #D3D3D3; 
	}

	.blank{
		display: block;
	}

	body{
		background-color: black;
	}

	h3{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
		line-height: 1.2em;
	}

	h3 > a{
		text-decoration: none;
	}


	a:visited {
	   color: inherit;
	}

	a.content{
		border-bottom:  5px solid #FFFF64;
		text-decoration: none;
		color: white;
	}

	a.content:hover{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
	}

	a.content:visited{
		color: white;
	}

	a.content2{
		border-bottom:  5px solid black;
		text-decoration: none;
		color: black;
	}

	a.content2:hover{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
	}

	a.content2:visited{
		color: black;
	}

	.container{
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-gap: 1em;
		grid-auto-rows: minmax(90px,auto);
		grid-template-areas:
		"text-left text-right"
		"text-left text-right";
		background-color: black;
		color: white;
	}

	.container-article{
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-gap: 1em;
		grid-auto-rows: minmax(90px,auto);
		grid-template-areas:
			"text-left text-right"
			"text-left text-right";
		color: black;
		background-color: #FFFF64;
	}

	.article-source2{
		padding-left: 4.5em;
		padding-top: 1.5em;
		padding-bottom: 0.5em;
		font-size: 0.8em;
		background-color: #FFFF64;
		width: 100vw 10ch;
		position: sticky;
		z-index: 3;
		bottom: 0;
	}

	.text-content{
		font-family: 'PPMigra-Regular';
		font-weight: normal;
		font-size: 3.5em;
		line-height: 1.2em;
		padding-top: 2em;
		padding-left: 1em;
		width: 10ch;
		z-index: 1;
	}

	.article-source{
		padding-left: 3.7em;
		padding-top: 1.5em;
		padding-bottom: 0.5em;
		font-size: 0.8em;
		background-color: black;
		width: 100%;
		height: 10vw;
		position: sticky;
		z-index: 3;
		bottom: 0;
	}

	.nested-grid{
		display: none;
	}

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	/* SCROLLING */

	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: #4d4d4d; 
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #D3D3D3;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #D3D3D3; 
	}

	.blank{
		display: none;
	}

	body{
		background-color: #4d4d4d;
	}

	h3{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
		line-height: 1.2em;
	}

	h3 > a{
		text-decoration: none;
	}


	a:visited {
	   color: inherit;
	}

	a.content{
		border-bottom:  5px solid #FFFF64;
		text-decoration: none;
		color: white;
	}

	a.content:hover{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
	}

	a.content:visited{
		color: white;
	}

	a.content2{
		border-bottom:  5px solid black;
		text-decoration: none;
		color: black;
	}

	a.content2:hover{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
	}

	a.content2:visited{
		color: black;
	}

	.container{
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-gap: 1em;
		grid-auto-rows: minmax(90px,auto);
		grid-template-areas:
		"text-left text-right"
		"text-left text-right"
		background-color: #4d4d4d;
		color: white;
	}

	.container-article{
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-gap: 1em;
		grid-auto-rows: minmax(90px,auto);
		grid-template-areas:
			"text-left text-right"
			"text-left text-right";
		color: black;
		background-color: #FFFF64;
	}

	.article-source2{
		padding-left: 4em;
		padding-bottom: 1em;
		padding-top: 1.5em;
		font-size: 1em;
		background-color: #FFFF64;
		width: 100%;
		position: sticky;
		z-index: 3;
		bottom: 0;
	}


	.text-content{
		font-family: 'PPMigra-Regular';
		font-weight: normal;
		font-size: 3.5em;
		line-height: 1.2em;
		padding-top: 2em;
		padding-left: 1em;
		z-index: 1;
		width: 18ch;
		margin-bottom: 1em;
	}

	.article-source{
		padding-left: 4em;
		padding-bottom: 1em;
		padding-top: 1.5em;
		font-size: 1em;
		background-color: #4d4d4d;
		width: 100%;
		position: sticky;
		z-index: 3;
		bottom: 0;
	}

	.nested-grid{
		font-family: 'Space Mono', monospace;
		width: 27vw;
		margin-right: 4em
	}
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	/* SCROLLING */

	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: white; 
	}
	 
	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #D3D3D3;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #D3D3D3; 
	}

	/* STRUCTURE */

	*{
		margin: 0;
		padding: 0;
	}

	body{
		background-color: white;
	}

	h3{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
		font-size: 2em;
		line-height: 1.2em;
	}

	h3 > a{
		text-decoration: none;
	}


	a:visited {
	   color: inherit;
	}

	a.content{
		border-bottom:  5px solid #FFFF64;
		text-decoration: none;
		color: black;
	}

	a.content:hover{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
	}

	a.content:visited{
		color: black;
	}

	a.content2{
		border-bottom:  5px solid black;
		text-decoration: none;
		color: black;
	}

	a.content2:hover{
		font-family: 'PPMigra-Italic';
		font-weight: normal;
		font-style: italic;
	}

	a.content2:visited{
		color: black;
	}

	/* CLASSES */

	.container{
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-gap: 1em;
		grid-auto-rows: minmax(90px,auto);
		grid-template-areas:
			"text-left text-right"
			"text-left text-right"
		;
		color: black;
	}

	.mobile-menu{
		display: none;
	}


	.text-content{
		font-family: 'PPMigra-Regular';
		font-weight: normal;
		font-size: 5.3em;
		line-height: 1.2em;
		padding-top: 2em;
		padding-left: 1em;
		width: 20ch;
		margin-bottom: 1em;
	}

	.text1{
		grid-area: text-left;
	}

	.text2{
		grid-area: text-left;
		z-index: 10;
	}

	/* ANIMATION */


	.fade-out{
		animation: fadeOut 3s;
		animation-delay: 1s;
		-webkit-animation-fill-mode: forwards;
	}

	.fade-in{
		animation: fadeIn 3s;
		animation-delay: 2s;
		-webkit-animation-fill-mode: backwards;
	}


	@keyframes fadeOut {
		from{
			display: block;
			opacity: 100%;
		}

		to{
			display: none;
			opacity: 10%;
		}
	}

	@keyframes fadeIn {
		from{
			display: none;
			opacity: 0%;
		}

		to{
			display: block;
			opacity: 100%;
		}
	}

	.article-source{
		padding-left: 5em;
		padding-top: 1.5em;
		margin-bottom: 1em;
		font-size: 1em;
		background: white;
		position: sticky;
		bottom: 0;
		padding-bottom: 1.5em;

	}

	.container-article{
		display: grid;
		grid-template-columns: 3fr 1fr;
		grid-gap: 1em;
		grid-auto-rows: minmax(90px,auto);
		grid-template-areas:
			"text-left text-right"
			"text-left text-right";
		color: black;
		background-color: #FFFF64;
	}

	.article-source2{
		padding-left: 5em;
		padding-top: 1.5em;
		font-size: 1em;
		background-color: #FFFF64;
		width: 100%;
		position: sticky;
		z-index: 3;
		bottom: 0;
	}

	.nested-grid{
		font-family: 'Space Mono', monospace;
		font-size: 1em;
		width: 27vw;
		margin-right: 4em;
	}

	.playlist{
		padding-top: 3em;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(1.2em, auto);
		grid-row-gap: 0.8em;
		grid-column-gap: 2.5em;
		position: sticky;
		top: 0;
	}

	.track-number{
		display: grid;
		justify-items: end;
	}

	.track-name{
		display: grid;
		justify-items: start;
	}

	.playlist2{
		display: none;
	}

	.track-number2{
		display: none;
	}

	.track-name2{
		display: none;
	}

	/*/* sixth paragraph - hovers */

	.words span{
	  opacity: 0;
	  width: 100%;
	  margin: 0 auto;
	  position: relative;
	  color: white;
	}

	.words-2 span{
	  animation: animateWords 10s linear infinite 0s;
	}

	.words span:nth-child(2) {
	  animation-delay: 1s;
	  color: white;
	}
	.words span:nth-child(3) {
	  animation-delay: 2s;
	  color: white;
	}
	.words span:nth-child(4) {
	  animation-delay: 3s;
	  color: #FFFF64;
	  animation-fill-mode: forwards;  
	}

}