/* 
=========================================

   P H O N E

=========================================
*/

.desktop-layout {
    display: none;
}

.mobile-layout {
    display: block;
    
}


body{
    background-color: #424f36;
    background: no-repeat url(/images/Sfondo1.jpg);
    
    background-size: cover;
    background-position:fill;

}


.boxprincipale{
    background: #fff6de;

    
    width:80vw;
   
    height: 55vw;

    margin:auto;
    margin-bottom:5vw;
    margin-top:5vw;

    border-style: solid;
    border-color: #ffe192;
    border-width: 5vw;
    border-radius: 30vw 30vw 5vw 5vw;
    padding: 2px; 

    display: flex;
    flex-direction:column;

}

/* ESTER */

.boxester {

    position:relative;
    
    height:100%;

    margin:auto;

    z-index: 2;
    
}


#Ester1 {
    height: 125%;
}

/* LINKS */

.boxlink{
    
    
    
    width:80vw;
    height: 100vw;

    margin:auto;
    margin-bottom:3vw;
    margin-top:10vw;
    

    

    z-index:1;
    
    


}

.boxlinkshadow{
    position:absolute;
    background: #258bf0;

    
   
    
    margin-top: -5vw;
    margin-left:-5vw;

    width:80vw;
    height: 87vw;

   
    
    border-style: solid;
    border-color:  #258bf0;
    border-width: 5vw;
    border-radius:5vw;
    opacity:0.65;

    z-index: 0;


}


.boxlinkesterni{


    

    width:90%;
    height:20%;

    

    

    margin:15px;

    display:flex;
    justify-content: flex-start;
    align-items:center; 

    transition: all 0.5s ease;
    
    z-index:1;

}

.linkesterni{

    color:#fff6de;

    font-family:"Miltonian Tattoo", 'Times New Roman', Times, serif;
    font-size: 8vw;

    position:relative;
    
    margin-left:4vw;
    text-decoration:none;
    transition: color 0.5s ease; /*non serve*/

    z-index:1;

    

    
}

.miniboxlinkesterni{

    display: grid;
    place-items: center; /* Centers both axes */
    background: #fff6de;

    width:23.5%;
    height:85%;

    float: left;
    border-radius:3vw;

    margin:0.4vw;

    z-index:1;

}

.linkIcons{
    position:relative;
    
    width: 80%;
    
    z-index:1;


}


/* ENTER */

.Enter {
    position: absolute;
   
    height: 18vw;
    
    margin-top:19vw;
    margin-left: -1vw;

    transform:rotate(-15deg);

    
    z-index:3;
    
    
}

#Stellina{
    position:absolute;
    height:100%;
}

/* LIBRO */

.Libro{
    height: 30vw;
    
    position:absolute;
    margin-top:5vw;
    right:0;
    margin-right: 30vw;
    transform-origin: center;
    transform: rotateZ(5deg);

   
    transition: all 0.5s ease;
    opacity: 1; 
    z-index: 2;
    
    
}

#copertina{
    height: 100%;
    position:absolute;
}

.buyLibro {
    position:absolute;
    height: 40%;
    margin-left: -11vw;
    margin-top: 2vw;
    

    
}

#BuyMe {
    position:absolute;
    height:100%
}


/* ANIMATIONS */

#Instagram {
    animation: fadeCycle 4s infinite;
    
}

#Youtube {
    animation: fadeCycle 4s infinite;
    animation-delay: 1s;
}

#Tiktok {
    animation: fadeCycle 4s infinite;
    animation-delay: 2s;
}

#Pinterest {
    animation: fadeCycle 4s infinite;
    animation-delay: 3s;
}

@keyframes fadeCycle {
  
  /* Hidden */
  0% {
    opacity: 0.65;
  }

  /* Fade in (0.5s of 5.5s = 9.09%) */
  9.09% {
    opacity: 1;
  }

  /* Stay visible for 0.5s */
  18.18% {
    opacity: 1;
  }

  /* Fade out for 0.5s */
  27.27% {
    opacity: 0.65;
  }

  /* Stay hidden for 4s */
  100% {
    opacity: 0.65;
  }
}