.container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 70vh; /* Imposta la larghezza uguale all'altezza dello schermo */
}

h1 {
	font-size: 3em;
}

h1, h2, h3 {
	margin: 0px;
}


.album-image {
	height: 100%;
	margin-right: 10vh;
}

.album-image > div {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	height: 100%;
	
}

.info-container {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 30%;
	 background-attachment: fixed;
}




/* Stili per dispositivi larghi in landscape */
@media screen and (min-width: 768px) and (orientation: landscape) {
    .contaner {
        flex-direction: row;
    }

    .left, .right {
        flsasaex: 1;
    }
	
	.left {
            flex: 1;
            background-color: #f2f2f2;
            padding: 20px;
    }
	
	.right {
        flex: 1;
		background-color: #ccc;
    }
}

/* Stili per telefoni e dispositivi verticali */
@media screen and (max-width: 767px) {
    .container {
		position: relative;
		background-color: #f0f0f0;
		height: 50vw;
		width: 100%; /* Imposta la larghezza uguale all'altezza dello schermo */
	}
	
	.album-image > div {
		background-size: contain;
	}
}

.cn {
	display: flex; flex-direction: row;
	height: 100vh;
	overflow: hidden;
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 30%;
	
	color: white; height: 100vh; background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}

.cn > div:first-child {
	flex: 3;
	padding: 30px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.cn > div:nth-child(2) {
	flex: 1;
	display: flex;
flex-direction: column;
  align-content: center;
  align-items: center;
  padding:20px;
}

.album-cover {
 padding: 20px;
 background-color: #313131bf;
}


.comunicato {
	white-space: pre-line;
}

.comunicato > p {
	margin-bottom: 0.5em;
}

 .button-link {
        background-color: #313131bf;
        border: none;
        color: white;
        padding: 10px 34px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 20px;
        cursor: pointer;
		width: 100%;
      }
	  
	  .button-link:hover {
        background-color: #535353bf;
      }
.buttons-link {	display: flex;	flex-direction: column;	flex-wrap: nowrap;	gap: 20px;}	  
.downloadable-covers {
	width: 175px; height: 150px; background-size: cover; background-position: center center;
}

	  
.downloadable-covers:hover {
	filter: brightness(1.5);
}




@media all and (max-width: 660px) { 
.cn {
	flex-wrap: wrap;
	overflow: auto;
	flex-direction: column-reverse;
	height: auto;
}


.cn > div:first-child {
	flex: auto;
}

.cn > div:nth-child(2) {
	flex: auto;
}


.buttons-link {
	display: none;
}

.album-cover {
	width: 300px;
}

}