html{
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: #112A46;
}

span{
    display: inline-block;
    margin: 0px;
}

body { 
    margin: 0;   /* Remove body margins */
}

/* // <uniquifier>: Use a uniquifier for the class name
// <weight>: Use a value from 300 to 800 */

.open-sans-300 {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:"wdth" 100;
}

.walloftext{
    margin: auto;
    width: 80%;
    font-size:larger;
}


@media (min-width: 768px) {
    /* For desktop: */
    .walloftext {width: 45%}
  }
.flexcontainer0{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: auto;
    background-color: #F8C8DC;
}

.flexitem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100%;
}
.centered0 {
    position: relative;
    top: 50%;
    left: 50%;
    margin: auto;
/*     height: 100%;
    width: 100%; */
    transform: translate(-50%, -50%);
}

.centered1 {
    text-align: center;
}

.maxheightwidth {
    height: 100%;
    width: 100%;
}

.scriptitem {
    display: block;
    padding-inline: 0px;
    list-style-type: none;
}

#scriptitem0 {
    opacity: 0;
}

#scriptitem1 {
    opacity: 0;
}

#scriptitem2 {
    opacity: 0;
}

.titleanimation {
    animation-name: fadein;
    animation-delay: 0s;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
}

.subtitleanimation {
    opacity: 0;
    animation-name: fadein;
    animation-delay: 0.75s;
    animation-duration: 0.75;
    animation-fill-mode: forwards;
}

button{
    width: 130px;
    height: 40px;
    border-radius: 3px;
    color: white;
    /* border: 1px solid #036;
    background-color: #1b5583; */
    border: 1px solid #112A46;
    background-color: #112A46;
    box-shadow: none;
    /* border: 0.5px solid #036; */
    opacity: 0;
    animation: fadein 0.75s ease-in-out 1.5s forwards, slideinleft 0.75s ease-in-out 1.5s forwards;
    /* animation-name: fadein, slideinleft;
    animation-delay: 1.5s;
    animation-duration: 0.75s;
    animation-fill-mode: forwards; */
    transform: translateX(-60vw);
    transition: background-color 1s, color 1s;
}

button:hover {
    background-color: white;
    color: #112A46;
}

@keyframes fadein {
    0% {opacity: 0; filter: blur(5px);}
    /* 50% { opacity: 0.5; filter: blur(2.5px);} */
    100% {opacity: 1; filter: blur(0px);}
}

@keyframes slideinleft {
    0% {transform: translateX(-60vh);}
    100% {transform: translateX(0vh);}
}

.hiddenelement {
    opacity: 0;
}

.showelements {
    animation-name: fadein;
    animation-duration: 0.5;
    /* animation-fill-mode: forwards; */
}

#balaclaveggiamo{
    transform: translate(0px);
    font-weight:inherit;
}

#b0-letter{
    /* transform: translate(0px); */
    animation-name: bslide;
    animation-duration: 0.36s;
    animation-iteration-count: infinite;
    display:inline-block;
    animation-play-state: paused;
    
}
#o0-letter{
    animation-name: oslide;
    animation-duration: 0.36s;
    animation-delay: 0.18s;
    animation-iteration-count: infinite;
    display:inline-block;
    animation-play-state: paused;
}

#a0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-play-state: paused;
    animation-delay: calc(.1s*var(--i));
    --i:1;
    animation-play-state: paused;
}
#l0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:2;
    animation-play-state: paused;
}
#a1-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:3;
    animation-play-state: paused;
}
#c0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:4;
    animation-play-state: paused;
}
#l1-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:5;
    animation-play-state: paused;
}
#a2-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:6;
    animation-play-state: paused;
}
#v0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:7;
    animation-play-state: paused;
}-----
#e0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:8;
    animation-play-state: paused;
}
#g0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:9;
    animation-play-state: paused;
}
#g1-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:10;
    animation-play-state: paused;
}
#i0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:11;
    animation-play-state: paused;
}
#a3-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:12;
    animation-play-state: paused;
}
#m0-letter{
    animation: waveanimation 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--i));
    --i:13;
    animation-play-state: paused;
}




#bala {
    transform: translate(0px);
}

@keyframes bslide{
    0% {transform: translateX(0px);}
    50% {transform: translateX(-5px);}
    100% {transform: translateX(0px);}
}

@keyframes oslide{
    0% {transform: translateX(0px);}
    50% {transform: translateX(5px);}
    100% {transform: translateX(0px);}
}

@keyframes waveanimation {
    0% {
        transform: translateY(0px);
    }

    20% {
        transform: translateY(-20px);
    }

    40%,
    100% {
        transform: translateY(0px);
    }
}

.lighterfonts {
    font-weight: normal;
}