/* Background for the body, Sunset style */
   
* {margin: 0;padding:0;box-sizing: border-box;}

a { text-decoration: none;
    height: 100%;
   

}

/* fix for mobile browsers */


.super-container{
    overflow-x:hidden;
    position: relative;
    width: 100%;

}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background:  rgba(119,36,85,1);
    background: -moz-linear-gradient(6deg, rgba(255,127,17,1) 4%,    23%, rgba(42,13,71,1) 69%, rgba(35,33,36,1) 100%) fixed;
    background: -webkit-linear-gradient(6deg, rgba(255,127,17,1) 4%, rgba(119,36,85,1) 23%, rgba(42,13,71,1) 69%, rgba(35,33,36,1) 100% ) fixed;
    background: linear-gradient(6deg, rgba(255,127,17,1) 4%, rgba(119,36,85,1) 23%, rgba(42,13,71,1) 69%, rgba(35,33,36,1) 100% ) fixed;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f11",endColorstr="#232124",GradientType=1); 
   
}

#canv {
    z-index: -10;
}

     .container{

        display: flex;
        align-items: center;
        padding-top: 10vh;
        flex-direction: column;
        height: 100vh;
        position: relative;

    }

    .sobremi-container{

        display: flex;
        align-items: center;
        padding-top: 20vh;
        flex-direction: column;
        height: 100vh;
        position: relative;

    }


 /*animation for text*/
@keyframes appeartext {
    0%   {color:#2A0D47}
    25%  {color: #533259}
    50%  {color: #7C576A}
    75%  {color: #A57B7C}
    100% {color: #F7C59F};
    ;

  }


.texto-explicativo {
    animation-duration: 4s;
    animation-name: appeartext;
    animation-timing-function: linear;
    color: #F7C59F;
    text-align: center;
    margin-top:10vh;
    padding: 30px;

}


/** responsive cellphones*/
@media (max-width: 412px) {
   
    body {
        background:rgba(42,13,71,1);
        overflow-x:hidden;
    }
  }


  @media (max-width: 428px) {
   

    body {
        background:rgba(42,13,71,1);
        overflow-x:hidden;

    }
  }


  @media (max-width: 375px) {
   
    body {
        background:rgba(42,13,71,1);
        overflow-x:hidden;

    }
  }


  @media (max-width: 360px) {
       body {
        background:rgba(42,13,71,1);
        overflow-x:hidden;

    }

    .btn_close__img {

    }
  }