<<<<<<< HEAD
body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
}

/* HOME PAGE */

.home-container{
display:flex;
height:100vh;
}

.home-section{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

.logo{
width:220px;
margin:20px;
cursor:pointer;
}

.enter-button{
font-size:22px;
text-decoration:none;
padding:12px 20px;
border:2px solid black;
border-radius:6px;
}

@media (max-width:800px){
.home-container{
flex-direction:column;
}
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:center;
gap:60px;
margin:30px auto;
max-width:1000px;
text-align:center;
}

.navbar a{
text-decoration:none;
color:black;
text-align:center;
}

.nav-logo{
width:96px;
display:block;
margin:auto;
}

.navbar span{
display:block;
margin-top:8px;
font-weight:bold;
}

/* BREADCRUMB */

.breadcrumb{
margin:20px auto;
max-width:1000px;
font-size:14px;
color:#666;
}

.breadcrumb a{
text-decoration:none;
color:#0077cc;
}

.breadcrumb span{
margin:0 6px;
}

/* SECTION GRID */

.section-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
max-width:1000px;
margin:auto;
gap:40px;
}

.section-card{
text-align:center;
}

.section-card img{
width:120px;
}

/* PLAYLIST */

.playlist-list{
max-width:1000px;
margin:auto;
}

.playlist-card{
display:flex;
align-items:center;
gap:20px;
margin-bottom:30px;
}

.playlist-thumb img{
width:220px;
border-radius:6px;
}

.playlist-info{
flex:1;
}

.playlist-info h2{
margin:0;
}

.playlist-info p{
margin-top:8px;
}

.playlist-count{
font-size:14px;
color:#666;
margin-top:4px;
}

/* HOVER EFFECT */

.navbar img:hover,
.section-card img:hover{
transform:scale(1.05);
}

.section-title{

text-align:center;
margin-top:40px;
margin-bottom:40px;
font-size:32px;

}

.playlist-image{
transition: transform 0.2s ease;
cursor:pointer;
}

.playlist-image:hover{
transform:scale(1.05);
}

.facebook-box{
text-align:center;
margin:40px 0;
}

.facebook-box img{
width:96px;
cursor:pointer;
}

.facebook-box img{
transition: transform 0.2s ease;
}

.facebook-box img:hover{
transform:scale(1.05);
}

.video-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, 250px);
    justify-content:center;
    gap:30px;
    max-width:1000px;
    margin:40px auto;
}

.video-item{
text-align:center;
}

.video-item{
    max-width:280px;
    margin:auto;
}

.video-thumb{
width:100%;
border-radius:6px;
transition: transform 0.2s ease;
cursor:pointer;
}

.video-thumb:hover{
transform:scale(1.05);
}


.video-page {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.video-main {
    width: 70%;
}

.video-main iframe {
    width: 100%;
    height: 400px;
}

.video-sidebar {
    width: 30%;
    max-height: 500px;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.sidebar-item:hover {
    transform: scale(1.05);
}

.sidebar-item img {
    width: 120px;
}

.sidebar-item.active {
    border: 2px solid #007BFF;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

.video-links {
    text-align: center;
    margin-top: 10px;
}

.video-links a {
    display: block;
    margin: 5px 0;
}

.sidebar-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* max 2 righe */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-description {
    max-width: 900px;
    margin: 30px auto;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

.video-description h2 {
    margin-bottom: 10px;
}

.video-description p {
    white-space: normal;
}

.video-nav {
    display: flex;
    justify-content: center;   /* centrati */
    gap: 40px;                 /* distanza tra bottoni */
    max-width: 900px;
    margin: 20px auto;
}

.nav-button {
    text-decoration: none;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: black;
    transition: 0.2s;
}

.nav-button:hover {
    background-color: #f0f0f0;
}

.nav-button {
    min-width: 160px;
    text-align: center;
}

.autoplay-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none;
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,0.6);
}

.autoplay-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.autoplay-buttons button {
    margin: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.autoplay-overlay {
    z-index: 10;
}

.next-video-preview {
    text-align: center;
}

.next-thumb {
    width: 200px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.next-title {
    font-weight: bold;
    font-size: 14px;
=======
body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
}

/* HOME PAGE */

.home-container{
display:flex;
height:100vh;
}

.home-section{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:40px;
}

.logo{
width:220px;
margin:20px;
cursor:pointer;
}

.enter-button{
font-size:22px;
text-decoration:none;
padding:12px 20px;
border:2px solid black;
border-radius:6px;
}

@media (max-width:800px){
.home-container{
flex-direction:column;
}
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:center;
gap:60px;
margin:30px auto;
max-width:1000px;
text-align:center;
}

.navbar a{
text-decoration:none;
color:black;
text-align:center;
}

.nav-logo{
width:96px;
display:block;
margin:auto;
}

.navbar span{
display:block;
margin-top:8px;
font-weight:bold;
}

/* BREADCRUMB */

.breadcrumb{
margin:20px auto;
max-width:1000px;
font-size:14px;
color:#666;
}

.breadcrumb a{
text-decoration:none;
color:#0077cc;
}

.breadcrumb span{
margin:0 6px;
}

/* SECTION GRID */

.section-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
max-width:1000px;
margin:auto;
gap:40px;
}

.section-card{
text-align:center;
}

.section-card img{
width:120px;
}

/* PLAYLIST */

.playlist-list{
max-width:1000px;
margin:auto;
}

.playlist-card{
display:flex;
align-items:center;
gap:20px;
margin-bottom:30px;
}

.playlist-thumb img{
width:220px;
border-radius:6px;
}

.playlist-info{
flex:1;
}

.playlist-info h2{
margin:0;
}

.playlist-info p{
margin-top:8px;
}

.playlist-count{
font-size:14px;
color:#666;
margin-top:4px;
}

/* HOVER EFFECT */

.navbar img:hover,
.section-card img:hover{
transform:scale(1.05);
}

.section-title{

text-align:center;
margin-top:40px;
margin-bottom:40px;
font-size:32px;

}

.playlist-image{
transition: transform 0.2s ease;
cursor:pointer;
}

.playlist-image:hover{
transform:scale(1.05);
}

.facebook-box{
text-align:center;
margin:40px 0;
}

.facebook-box img{
width:96px;
cursor:pointer;
}

.facebook-box img{
transition: transform 0.2s ease;
}

.facebook-box img:hover{
transform:scale(1.05);
}

.video-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, 250px);
    justify-content:center;
    gap:30px;
    max-width:1000px;
    margin:40px auto;
}

.video-item{
text-align:center;
}

.video-item{
    max-width:280px;
    margin:auto;
}

.video-thumb{
width:100%;
border-radius:6px;
transition: transform 0.2s ease;
cursor:pointer;
}

.video-thumb:hover{
transform:scale(1.05);
}


.video-page {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.video-main {
    width: 70%;
}

.video-main iframe {
    width: 100%;
    height: 400px;
}

.video-sidebar {
    width: 30%;
    max-height: 500px;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.sidebar-item:hover {
    transform: scale(1.05);
}

.sidebar-item img {
    width: 120px;
}

.sidebar-item.active {
    border: 2px solid #007BFF;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

.video-links {
    text-align: center;
    margin-top: 10px;
}

.video-links a {
    display: block;
    margin: 5px 0;
}

.sidebar-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* max 2 righe */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-description {
    max-width: 900px;
    margin: 30px auto;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

.video-description h2 {
    margin-bottom: 10px;
}

.video-description p {
    white-space: normal;
}

.video-nav {
    display: flex;
    justify-content: center;   /* centrati */
    gap: 40px;                 /* distanza tra bottoni */
    max-width: 900px;
    margin: 20px auto;
}

.nav-button {
    text-decoration: none;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    color: black;
    transition: 0.2s;
}

.nav-button:hover {
    background-color: #f0f0f0;
}

.nav-button {
    min-width: 160px;
    text-align: center;
}

.autoplay-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: none;
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,0.6);
}

.autoplay-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.autoplay-buttons button {
    margin: 10px;
    padding: 8px 12px;
    cursor: pointer;
}

.autoplay-overlay {
    z-index: 10;
}

.next-video-preview {
    text-align: center;
}

.next-thumb {
    width: 200px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.next-title {
    font-weight: bold;
    font-size: 14px;
>>>>>>> 7199ac989e2ee430b700e25371aa983ee3974792
}