body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        /* backdrop-filter: brightness(50%); */
        align-content: center;
        background-size: cover;
        background-color: black;
        background-repeat: no-repeat;
        background-image: url("images/space-pic.jpg"); 
        overflow: hidden;
}

h1 {
    font-weight: 600;
    font-family: 'Montez', 'Courier New', Courier, monospace;
    font-size: 2.5rem;
    line-height: 0.9rem;
    margin: 10px;
}
h2 {
    font-weight: 600;
    font-family: 'Montez', 'Courier New', Courier, monospace;
    font-size: 1.9rem;
    line-height: 0.7rem;
    margin: 5px;
}
h3 {
    font-weight: 600;
    font-family: 'Montez', 'Courier New', Courier, monospace;
    font-size: 1.3rem;
    line-height: 0.5rem;
    margin: 5px;
}
h4 {
    font-weight: 600;
    font-family: 'Montez', 'Courier New', Courier, monospace;
    font-size: 1.0rem;
    margin: 5px;
}

h1 img {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}

.decout {
  text-decoration:none;
}

.soc {
    list-style: none;
    margin: 5px;
    justify-content: center;
    vertical-align: middle;
    display: flex;
}

li {
    margin: 10px;
}

img.sociallink {
  width: 50px;
  margin: 30px;
}

.tw {
  width: 65px;
  margin: 0px;
}

.fb {
  width: 25px;
  margin: 0px 5px 25px 5px;
}

.contenedor {
  display: flex;
  width: 100%;
  height: 100px;
  /* background-color: gray; 
  border: 1px solid rgb(152,153,81);
  align-items: center;
  */
}

.socialbar {
  Width: 80%;
  height: 85px;
  border-radius: 8px;
  /* padding: auto;    background-color: #111; border: 1px solid rgb(152,153,81); */
  margin: auto;
}

/* */
/* */


/* style */

        .txtcentrado {
            align-content: center;
            text-align: center;
            font-size: 100%;
        }

        .gold-color {
            color: #bca15c;
        }
        
        .topm010 {
            margin-top: 0.5em;
        }

        .gradient010 {
            background: #b4960f;
            background: linear-gradient(to bottom right, #6d5315 20%, #f5bc02 70%);
            background-clip: text;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            -ms-background-clip: text;
            -o-background-clip: text;
            -webkit-text-fill-color: transparent;
            -moz-text-fill-color: transparent;
            -ms-text-fill-color: transparent;
            -o-text-fill-color: transparent;
        }
        
        
        .gold-color {
            color: #bca15c;
        }
        
        .topm010 {
            margin-top: 0.5em;
        }
        

/* style2.css */

    
    .tity {
        display: flex;
        align-items: center;
    }
    
    canvas {
        display: block;
    }
    
    #canvas_container {
        width: 100vw;
        height: 100vh;
    }
    
    /* Resizing buttons when the media is below 500 px */
    @media only screen and (max-width: 501px) {    
        .custom-btn {
            width: 150px;
            height: 46px;
        }
    .socialbar {
      Width: 80%;
      height: 65px;
      border-radius: 8px;
      /* padding: auto;    background-color: #111; border: 1px solid rgb(152,153,81); */
      margin: auto;
        }
    #conte {
        position: absolute;
        top: 65%;
        left: 1%;
        }
    }
    
    /*  Desktop or Screen Wide > 1400px */
    @media only screen and (min-width: 1401px) {
        #canvas_container2 {
            position: absolute;
            top: 15%;
            left: 1%;
            width: 100vw;
            height: 50vh;
            visibility: collapse;
            align-items: center;
            display: flex;
            flex-direction: column;

            /* margin: auto; display: flex; height: 100vh; */
        }
        #fullscr {
            position: absolute;
            bottom: 22%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #tweetus {
            position: absolute;
            bottom: 22%;
            left: 80%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #nfthere {
            position: absolute;
            bottom: 22%;
            left: 20%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #shop-token  {
            position: absolute;
            bottom: 22%;
            left: 65%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #digital-shop   {
            position: absolute;
            bottom: 22%;
            left: 35%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #digital-shop2   {
            position: absolute;
            bottom: 32%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #digital-shop3   {
            position: absolute;
            bottom: 82%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }

        #stg-token   {
            position: absolute;
            bottom: 72%;
            left: 33%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }

        #cocoa-token   {
            position: absolute;
            bottom: 72%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }

        #email-us   {
            position: absolute;
            bottom: 72%;
            left: 66%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }

        #conte {
            position: absolute;
            top: 40%;
            left: 1%;
        }

    /* min-width: 1401px */
    }
    
    @media only screen and (max-width: 1400px) {
        
        #canvas_container2 {
            position: absolute;
            top: 50%;
            left: 1%;
            width: 100%;
            height: 20vh;
            visibility: collapse;
            align-items: center;
            display: flex;
            flex-direction: column;
            
        }        

        /* T 3 9 18 27 36 45 54 63 72 81 86 */
        #fullscr {
            position: absolute;
            top:   3%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #digital-shop2 {
            position: absolute;
            top:   9%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }

        #digital-shop3   {
            position: absolute;
            top:  18%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #shop-token {
            position: absolute;
            top:  27%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #digital-shop {
            position: absolute;
            top:  36%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #stg-token   {
            position: absolute;
            top:  45%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }

        #cocoa-token   {
            position: absolute;
            top:  54%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #tweetus {
            position: absolute;
            top:  63%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #nfthere {
            position: absolute;
            top:  72%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        #email-us   {
            position: absolute;
            top:  81%;
            left: 50%;
            transform: translateX(-50%);
            border: 1px solid white;
            border-radius: 5px;
            font-size: 0.9rem;
            padding: 0.5rem 0.9em;
            background: #000000;
            color: white;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -ms-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;
        }
        
        
        #conte {
            position: absolute;
            top: 86%;
            left: 1%;
        }
        /* max-width: 1400px */
    
}


button {
  margin: 10px;
}

.custom-btn {
  width: 200px;
  height: 50px;
  color: #fff;
  border-radius: 5px;
  /* padding: 10px 25px; */
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

/* 9 */
.btn-9 {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   background-color: #110f0f;
background-image: linear-gradient(315deg, #e0a913 0%, #110f0f 74%);
  transition: all 0.7s ease;
}
.btn-9:hover {
  background: transparent;
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
  color: #fff;
}
.btn-9:hover:after {
  -webkit-transform: scale(2) rotate(280deg);
  -moz-transform: scale(2) rotate(280deg);
  -ms-transform: scale(2) rotate(280deg);
  -o-transform: scale(2) rotate(280deg);
  transform: scale(2) rotate(360deg);
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.5),
    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 11 */
.btn-11 {
  border: none;
  background: #faf;
    background: linear-gradient(0deg, #000 0%, #c39004 50%);
    color: #fff;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #f2bc30;
    animation: shiny-btn1 5s ease-in-out infinite;
}
.btn-11:hover{
  opacity: .8;
  color: rgb(255,245,2);
}
.btn-11:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 11a */
.btn-11a {
  border: none;
  background: #faf;
    background: linear-gradient(0deg, #000 0%, #c39004 50%);
    color: #fff;
    overflow: hidden;
}
.btn-11a:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11a:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #f2bc30;
    animation: shiny-btn2 9s ease-in-out infinite;
}
.btn-11a:hover{
  opacity: .8;
  color: rgb(255,245,2);
}
.btn-11a:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

@-webkit-keyframes shiny-btn2 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 11b */
.btn-11b {
  border: none;
  background: #faf;
    background: linear-gradient(0deg, #000 0%, #c39004 50%);
    color: #fff;
    overflow: hidden;
}
.btn-11b:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11b:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #f2bc30;
    animation: shiny-btn2 7s ease-in-out infinite;
}
.btn-11b:hover{
  opacity: .8;
  color: rgb(255,245,2);
}
.btn-11b:active{
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

@-webkit-keyframes shiny-btn2 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 13 */
.btn-13 {
  background-color: #c39004;
background-image: linear-gradient(15deg, #c39004 20%, #110f0f 44%);
  border: none;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #fff;
  background-image: linear-gradient(9deg, #110f0f 20%, #c39004 54%);
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}

.container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .1em solid orange;
  white-space: nowrap;
  animation: typing 3s forwards;
  width: 0;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

    .centrado {
        align-content: center;
        padding: 20px 10% 10% 20px;
        /*
        padding-top: 20px;
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 20px;
        */
    }
    
    nav {
        position: absolute;
        top: 5%;
        left: 15%;
        list-style: none;
        z-index: 10;
        display: flex;
        width: 5%;
        background-color: rgb(46, 42, 42);
    }
    
    
    .coming-soon {
        margin: 25px;
        display: block;
        bottom: auto;
        left: auto;
    }
    
    .styleT {
        color: aliceblue;
    }
    
    .hide-element {
        visibility: collapse;
    }
    
    .show-element {
        visibility: visible;
    }
    
a {
  text-decoration: none;
  color: #de28e9 ;
}


.decout {
  text-decoration:none;
}


img.sociallink {
  width: 50px;
  margin: 5px;
}

.soclink {
  box-shadow: 0px 6px 76px 16px rgba(229,237,117,0.69) inset;
  -webkit-box-shadow: 0px 6px 76px 16px rgba(229,237,117,0.69) inset;
  -moz-box-shadow: 0px 6px 76px 16px rgba(229,237,117,0.69) inset;
}

/* The slow way */
.make-it-slow {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease-in-out;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
  box-shadow: 0 5px 15px rgba(1,2,3,0.3);
}