@font-face {
  font-family: MaiowkiFont;
  src: url(UmbrellaMSZag-Regular.ttf);
}

@font-face {
  font-family: Basic;
  src: url(./font/BergenMono-Regular.otf);
}

body {
  /* width: 100vw;
    height: 100vh; */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.mainContainerHome {
  display: flex;
  background-color: black;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.navbar {
  height: 7vh;
  width: 100%;
  /* border: 1px solid white;  */
  padding: 0;
  position: fixed;
  font-size: 3.2vw;
  color: white;
  z-index: 20000;
  box-shadow: rgba(62, 39, 130, 0.3) 0px 19px 38px, rgba(62, 39, 130, 0.22) 0px 15px 12px;
  background-color: black;
}

.separatorNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.IconNavBar {
  font-family: MaiowkiFont;
  color: white;
  text-decoration: none;
}

.separatorNav .plusNav {

  font-size: 3vw;
  font-weight: 100;
  color: white;
  cursor: pointer;
  margin-right: 2%;
}

.IconNavBar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.separatorNav a {
  text-decoration: none;
}

.open {
  width: 35%;
}

.ContainerContent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.divider {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}

.dividerdescription {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.sidebar {
  position: fixed;
  top: 7vh;
  right: 0;
  width: 0px;
  height: 93vh;
  background-color: #333;
  color: #fff;
  transition: width 0.4s ease;
  background-color: black;
  z-index: 1000;
}

.internalsidebar {
  position: fixed;
  width: 100%;
  height: 100%;
  color: white;
  font-family: Basic;
  display: flex;
  flex-direction: column;
  padding-top: 9%;
  font-size: 0.8vw;
}

.minit {
  padding: 0.5%;
  display: flex;
  align-items: center;
  font-family: Basic;
}

.minit i {
  padding: 1%;
  font-size: 1vw;
}


.minit .separatorminit {
  padding: 0.5%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.minit .separatorminit i {
  padding: 1%;
  font-size: 1vw;
}


.sidebar.open {
  width: 30%;
}

.ContentText {
  color: #6038ab;
  font-size: 13vw;
  font-family: MaiowkiFont;
  text-align: center;
  z-index: 100;
  margin: 0;
}

.separatorContent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}

.box {
  position: absolute;
  background-color: white;
  width: 40%;
  height: 70%;
  padding: 2.5%;
}

.internalbox {
  background-image: url(../img/MyImage.jpg);
  background-position: center;
  background-size: cover;
  filter: grayscale(80%);
  width: 100%;
  height: 100%;
}

.rotate45 {
  transform: rotate(-45deg);
}

#plustext {
  transition: 0.4s ease;
}

.rotate45anim {
  transition: 0.4s ease;
  transform: rotate(-45deg);
}

a {
  text-decoration: none;
  color: white;
}

.list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

/* Stile di base per gli elementi della lista */
.list li {
  opacity: 0;
  /* Nascosto all'inizio */
  transform: translateY(-20px);
  /* Spostato leggermente verso l'alto */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Stile per rendere visibile la lista con effetto cascata */
.list.show li {
  opacity: 1;
  transform: translateY(0);
}

/* Ritardo dell'animazione per ogni elemento */
.list li:nth-child(1) {
  transition-delay: 0.1s;
}

.list li:nth-child(2) {
  transition-delay: 0.2s;
}

.list li:nth-child(3) {
  transition-delay: 0.3s;
}

.list li:nth-child(4) {
  transition-delay: 0.4s;
}

.list li:nth-child(5) {
  transition-delay: 0.5s;
}

.description {
  height: 100vh;
  width: 99vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.thought {
  background-color: black;
  height: 100%;
  width: 70%;
  font-family: Basic;
  font-size: 1.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.masters {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  height: 100%;
  width: 30%;
  font-family: Basic;
  font-size: 1.2vw;
  color: #6038ab
}

.masterstext {
  padding: 5%;
}

.thoughttext {
  padding: 5%;
}

.esperienzenav {
  background-color: white;
}

.Content {
  /* display: flex; */
  background-color: white;
  justify-content: center;
  align-items: center;
  width: 100vw;
  color: #6038ab;
  ;
  height: 100vh;
  flex-direction: column;
}

.EsperienzeText {
  font-family: MaiowkiFont;
  margin-top: 10%;
  margin-right: 50%;
  font-size: 3vw;
  text-align: center;
}

.esperienzeico {
  color: #6038ab;
}

.esperienzeplus {
  color: #6038ab;
}

.esperienzeList {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: black;
  justify-content: center;

}

.esperienzeList ul {
  font-size: 1.6vw;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.esperienzaelement {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80vh;
  /* height: 80vh; */
}

.expSep {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.expIco {
  width: 5vw;
  margin: 15px;
}

.Exptitle {
  font-size: 2vw;
  font-family: MaiowkiFont;
  color: #6038ab;
  text-align: center;
  text-wrap-mode: nowrap;
}

.esperienzaDescription {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 60%;
  font-size: 1.2vw;
  font-family: Basic;
  
}

.EsperienzaDescript {
  font-family: Basic;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
  width: 100%;
  color: black;
}

.EsperienzaDescript p {
  width: 50%;
  text-align: left;
}

.CompetenzeDescripto {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* align-items: center; */
  font-family: Basic;
  height: 60%;
}

.comp {
  margin-left: 5%;
  margin-right: 5%;
  font-size: 1.2vw;
}

.compHead
{
  font-size: 1.4vw;
  border-bottom : 1px solid ;
}
@media screen and (max-width: 500px) {
  /*HOME*/
  .IconNavBar {
    font-family: MaiowkiFont;
    text-decoration: none;
    font-size: 40px;
  }

  .description {
    flex-direction: column-reverse;
  }

  .box {
    position: absolute;
    background-color: white;
    width: 60%;
    height: 50%;
    padding: 2.5%;
  }

  .internalbox {
    background-image: url(../img/MyImage.jpg);
    background-position: center;
    background-size: cover;
    filter: grayscale(80%);
    width: 100%;
    height: 100%;
  }

  .thought {
    background-color: black;
    height: 100%;
    width: 80%;
    font-family: Basic;
    font-size: 2.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }

  .thoughttext {
    padding: 2.5%;
  }

  .masters {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    height: 30%;
    width: 100%;
    font-family: Basic;
    font-size: 2.2vw;
    color: #6038ab
  }
  .separatorNav .plusNav
  {
    font-size: 10vw;
  }
  .sidebar.open {
    width: 70%;
  }
  .minit
  {
    font-size: 3.5vw;
  }
  .minit i 
  {
    font-size: 7vw !important;
  }

  /*Esperienze*/

  .EsperienzeText
  {
    margin-right: 0;
    font-size: 8vw;
    margin-top: 25%;
  }
.EsperienzaDescript
{
  font-size: 4vw;
}
.EsperienzaDescript p{width: 70%;}
.Exptitle
{
  font-size: 6vw
}
.expIco
{
  width: 10vw;
}
.esperienzaDescription
{
  font-size: 5vw;
}
.comp
{
  font-size: 3.4vw ;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
.comp ul 
{
  padding: 0;
}
  .compHead{
    font-size: 4vw 

  }

  .line{display : none;}
.CompetenzeDescripto
{
  flex-direction: column;
}
.Content{height: 100%;}
}