:root{
	--shadow-percent: 80%;
	--shadow-width: 40%;
}

@media (min-width: 1980px) and (orientation: Landscape){
	#presentation {
    	position: relative;
        overflow: hidden;
    	background-color: black;
    	height: calc(var(--max-h) - var(--header-s1));
 	}

 	img.presentation-photo {
		position: relative;
		height: 100%;
 	}

 	div.presentation-shadow {
		position: absolute;
		background-image: linear-gradient(to right, transparent, black var(--shadow-percent), black);
		width: var(--shadow-width);
		height: 100%;
		right: 0px;
		top: 0px;
 	}

 	 div.presentation-container {
		position: absolute;
		left: 0px;
		top: 0px;
		height: 100%;
 	}

  	#presentation-nickname{
    	text-shadow: #000 6px 0px 10px;
    	top: calc((100% - var(--header-s1) - 50px) / 2);
	    position: absolute;
	    color: white;
	    font-family: OpenSans-Bold; 
	    text-align: center;
	    font-size: 200px;
	    line-height: 200px;
	    right: 5%;
 	}

	#websites {  
	    background-color: white;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-wrap: wrap;
	}

	h1.headline.websites-headline{background-color: white; color: black}

 	img.websites-photo {  
 		width: 150px;
  		border-radius: 10px;
	}

	a.websites-adress:last-child { margin: 50px 0px; }

	a.websites-adress {
 		width: 150px;
 		height: 150px;
		margin: 50px 50px 50px 0px;
	}

 	#discography{
    	flex-flow: wrap;
    	align-content: flex-start;
    	justify-content: center;
    	align-items: flex-start;
    	display: flex;
    	width: var(--max-w);
    	background-color: black;
	    min-height: calc(100vh - var(--header-s1) - var(--footer-s1) - 450px - 930px);
  	}

  	h1.headline.discography-headline{background-color: black; color: white;}
}

@media (min-width: 720px) and (max-width: 1980px) and (orientation: Landscape){
	#presentation {
		position: relative;
		overflow: hidden;
		height: calc(100vh - var(--header-s2));
		min-height: calc(640px - var(--header-s2));
		background-color: black;
  	}

 	img.presentation-photo {
		position: relative;
		height: 100%;
 	}

 	div.presentation-shadow {
		position: absolute;
		background-image: linear-gradient(to right, transparent, black var(--shadow-percent), black);
		width: var(--shadow-width);
		height: 100%;
		right: 0px;
		top: 0px;
 	}

 	 div.presentation-container {
		position: absolute;
		left: 0px;
		top: 0px;
		height: 100%;
 	}

	#presentation-nickname{
    	text-shadow: #000 0px 0px 10px;
    	top: calc((100% - var(--header-s2) - 5vw) / 2);
	    position: absolute;
	    color: white;
	    font-family: OpenSans-Bold; 
	    text-align: center;
	    font-size: 10vw;
	    line-height: 10vw;
	    right: 5%;
 	}

	#websites {
	    background-color: white;
	    text-align: center;
	    justify-content: center;
	    align-items: center;
	    display: flex;
		flex-wrap: wrap;
  	}

	h1.headline.websites-headline{background-color: white; color: black}

  	img.websites-photo {  
 		width: calc(720px / 5);
  		border-radius: 10px;
	}

	a.websites-adress:last-child {
		margin: 50px 0px;
	}

	a.websites-adress {
		width: calc(720px / 5);
		margin: 50px calc(720px / 20) 50px 0px;
	}

  	#discography{
	    flex-flow: wrap;
	    justify-content: center;
	    align-items: center;
	    display: flex;
	    background-color: black;
  	}

  	h1.headline.discography-headline{background-color: black; color: white;}
}

@media (max-width: 720px), (orientation: Portrait){  
	#presentation {
		width: 100%;
		height: 70vw;
		overflow: hidden;
		position: relative;
	    background-color: black;
	}

 	img.presentation-photo {
		position: relative;
		height: 100%;
 	}

 	div.presentation-shadow {
		position: absolute;
		background-image: linear-gradient(to right, transparent, black calc(var(--shadow-percent) - 20%), black);
		width: calc(var(--shadow-width) + 20%);
		height: 100%;
		right: 0px;
		top: 0px;
 	}

 	div.presentation-container {
		position: absolute;
		left: 0px;
		top: 0px;
		height: 100%;
 	}

  	#presentation-nickname{
		top: calc((100% - var(--header-s3)) / 2);
		position: absolute;
		color: white;
		font-family: OpenSans-Bold;
		text-align: center;
		font-size: 12vw;
		line-height: 12vw;
		right: 5vw;
 	}

	#websites {  
	    background-color: white;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-wrap: wrap;
	}

	h1.headline.websites-headline{background-color: white; color: black}

	img.websites-photo {
		width: 15vw;
	}

	a.websites-adress {
		margin: 6vw 5vw 6vw 0px;
	}

	a.websites-adress:last-child {
		margin: 6vw 0px;
	}

  	#discography{
	    flex-flow: wrap;
	    justify-content: center;
	    align-items: center;
	    display: flex;
	    text-align: center;
	    background-color: black;
  	}

  	h1.headline.discography-headline{background-color: black; color: white;}
}