@media (max-width: 480px) {
    /*Sezione Html*/
    html, body {
      height: 100%;
      margin: 0;
      font-size: 15px;
      background: linear-gradient(180deg, #00164e, #00103d);
      background-attachment: fixed;
  }
    .container {
        width: 80%;
        margin: auto;
    }
    /*Sezione Nav*/
    nav{
        background-color: rgb(0, 0, 140);
        border: 2px solid rgb(235, 235, 235);
        border-radius: 8px;
        box-shadow: 4px 10px rgba(17, 17, 17, 0.497);
    }
    .NavBar{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 10px;
        gap: 10px;
    }
    .NavBar h1{
        color: white;
        font-size: 1.4rem;
        letter-spacing: 1px;
        font-weight: 500;
    }
    .NavBar span{
        color: white;
        font-size: 1.45rem;
        font-weight: 300;
    }
    /*Apertura e chiusura del menu*/
    .overlay {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        background-color: rgba(5, 0, 45, 0.9);
        overflow-x: hidden;
        transition: 0.6s;
      }
      .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 40px;
      }
      .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 40px;
        color: #ffffff;
        display: block;
        transition: 0.3s;
      }
      .overlay a:hover, .overlay a:focus {
        color: #000000;
      }
      .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
      }
      /*Sezione Entrata*/
      .IntroPage{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        position: relative;
        width: 100%;
        height: 400px;
        background-image: url(IntroPage.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
      .IntroPage::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
      }
      .IntroPage h1{
        color: white;
        font-size: 3rem;
        font-weight: 500;
        text-align: center;
        z-index: 1;
      }
      /*Sezione Stagionali*/
      #TitoloStagionali{
        color: white;
        font-size: 2rem;
        font-weight: 500;
        text-align: center;
        margin-top: 15px;
        border: 2px solid rgb(235, 235, 235);
        border-radius: 8px;
        box-shadow: 4px 10px rgba(17, 17, 17, 0.497);
        padding: 10px;
        background-color: rgb(0, 0, 140);
      }
      .anime-list{
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .Card{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid rgb(235, 235, 235);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 4px 10px rgba(17, 17, 17, 0.5);
        color: white;
        background-color: rgb(0, 0, 25);
      }
      .Card h1{
        color: white;
        font-size: 1.6rem;
        font-weight: 500;
        text-align: center;
      }
      .Card p{
        text-align: justify;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
        flex-grow: 1;
        font-size: 1.25rem;
      }
      .Card button{
        width: fit-content;
        height: 30px;
        background-color: rgb(0, 0, 140);
        color: white;
        font-size: 1.05rem;
        font-weight: 500;
        border-radius: 8px;
        border: none;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      /*Sezione di registrazione e login*/
      .FormR form, .FormL form{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        gap: 15px;
      }
      .FormR form label, .FormL form label{
        color: white;
        font-size: 1.8rem;
        font-weight: 600;
        text-align: center;
      }
      .FormR form input, .FormL form input{
        width: 80%;
        height: 40px;
        padding: 10px;
        border-radius: 8px;
        border: 2px solid rgb(235, 235, 235);
        box-shadow: 4px 10px rgba(17, 17, 17, 0.497);
      }
      .FormR form button, .FormL form button{
        width: 40%;
        height: 40px;
        background-color: rgb(0, 0, 62);
        color: white;
        font-size: 1.4rem;
        font-weight: 500;
        border-radius: 8px;
        border: none;
        box-shadow: 4px 10px rgba(17, 17, 17, 0.497);
      }
      .Reference{
        text-decoration: none;
        color: white;
      }
      .Reference:hover, .Reference:focus{
        color: white;
        text-decoration: none;
      }
      /*Sezione MyProfile*/
      .MyProfile{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-top: 10px;
      }
      .MyProfile h1{
        color: white;
        font-size: 1.6rem;
        font-weight: 600;
        text-align: center;
        letter-spacing: 1px;
      }
      .MyProfile h2{
        color: white;
        font-size: 1.2rem;
        font-weight: 600;
        text-align: center;
        letter-spacing: 1px;
      }
      .Ricerca form{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .Ricerca input{
        width: 50%;
        height: 15px;
        padding: 6px;
        border-radius: 8px;
        border: 1px solid rgb(235, 235, 235);
      }
      .Ricerca button{
        width: 20%;
        height: 30px;
        background-color: rgb(0, 0, 165);
        color: white;
        font-size: 1.05rem;
        font-weight: 500;
        border-radius: 8px;
        border: none;
      }
      .animeList{
        display: flex;
        flex-direction: row;
        border: 1px solid rgb(235, 235, 235);
        transition: all 0.3s ease;
        background-color: rgb(0, 0, 145);
        align-items: center;
        justify-content: center;
        padding: 8px;
        border-radius: 8px;
        gap: 15px;
      }
      .animeList:hover{
        transform: scale(1.1);
      }
      .animeList span{
        color: white;
        font-size: 1.2rem;
        font-weight: 500;
        text-align: center;
        margin-top: 15px;
        border-radius: 8px;
        padding: 10px;
      }
      .animeList button{
        width: fit-content;
        height: 35px;
        background-color: rgb(0, 0, 60);
        color: white;
        font-size: 1.05rem;
        font-weight: 500;
        border-radius: 8px;
        border: none;
        margin-top: 10px;
      }
}