@keyframes slideInFromLeft {

  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

body {
	background: -webkit-linear-gradient(-90deg, #7d91e4, #DE5D83); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(-90deg, #7d91e4, #DE5D83); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(-90deg, #7d91e4, #DE5D83); /* For Firefox 3.6 to 15 */
    background: linear-gradient(-90deg, #7d91e4, #DE5D83); /* Standard syntax */
}

#navbar {
	z-index: 1;
}

#mainContainer {
	z-index: 1;
}

#artistType {
    font-style: regular;
    font-weight: 500;
    font-size: 4vw;
	opacity: 40%;
	text-align: left;
}

#artistName {
	font-style: bold;
	font-size: 10vw;
	text-align: left;
	opacity: .85;
}

#artistName, #artistType{
    opacity: 0; /* Start completely transparent */
    animation: fadeIn 3s forwards; /* Apply the animation */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: .8;
    }
}

#description {
		z-index: 2;
		text-align: left;
		position: relative;
		left: 0;
		top: 22.5%;
	}

	#linking > a > img {
		width: 10%;
		height: auto;
		margin-right: 1.5%;
		display: inline-block;
	}

	#folio {
		color: #fff;
		font-size: 85%;
		margin-top: 4px;
	}

	#folio:hover {
		color: gray;
	}

@media (max-width: 991.98px) {
	img {
		width: 100vw;
		height: auto;
		
	}
}