/* palette di colori */

:root {
    --bianco:#ffffff;
    --nero:#000000;
    --blu:#1e1e6c;
    --bluscuro:#232345;
    --bluchiaro: #222fe1;
    --biancoBluastro: #EDF6F9;
    --ghiaccio: #7373ef;
    --grigioscuro:#141414;
}

/* components */

body{
    background-color:var(--bluscuro);
    margin: 0px;
    min-height: 100vh;
    display: flex;        
    flex-direction: column;
}

.main-navbar{
    background-color:var(--ghiaccio);
}

.main-footer{
    background-color:var(--grigioscuro);
    height:250px;
    margin-top: auto;
    text-align: center;
}

/* texts */

.navbar-brand{
    color: var(--bluscuro);
    font-weight: 500;
}

.navbar-text{
    color: var(--bluscuro);
    font-weight: 500;
}

.navbar-text:hover{
    color: var(--bluchiaro) !important ;
}

.navbar-text:focus{
    color: var(--blu) ;
}

.page-text{
    color: var(--biancoBluastro);
    text-align: center;
}

.link-text{
    text-decoration: none;
    font-size: 20px;
    color: var(--ghiaccio);
    font-weight: 600;
}

.link-text:hover{
    text-decoration: none;
    font-size: 20px;
    color: var(--bluScuro);
    font-weight: 700;
}

.footer-text{
    color: var(--ghiaccio);
}


/* buttons */

.button{
    background-color: var(--ghiaccio);
}

.button:hover{
    background-color: var(--bianco);
}

/* cards */

.card{
    background-color: var(--ghiaccio);
}

/* footer */

.contact-me{
    text-decoration: none;
    color: var(--biancoBluastro);
}

.contact-me:hover{
    color: var(--bluchiaro);
}

.copyright{
    background-color: #181818;
    height: 70px;
    display: flex;
    justify-content: center;
}

.copy-name{
    color: #373737;
    font-size: xx-small;
    margin: auto;
    padding: 10px;
}

@media screen and (max-width: 1200px) {
    .main-footer{
        height: 200px;
    }
  }

  @media screen and (max-width: 1200px) {
    .copyright{
    background-color: #181818;
    height: 100px;
    display: flex;
    justify-content: center;
    }
  }

  @media screen and (max-width: 1200px) {
    .copy-name{
        color: #373737;
        font-size: xx-small;
    }
  }

  .logo-grande{
    height: 700px;
    opacity: 0.3;
    margin: auto;
  }

  @media screen and (max-width: 1200px) {
    .logo-grande{
        max-width: 100%;
        height: auto;
        opacity: 0.3;
        margin: auto;
      }
  }

  .evento{
    height: 1000px;
    padding: 100px;
  }

  @media screen and (max-width: 1200px) {
    .evento{
    max-width:100%;
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
    padding: auto;
    }
  }