body {
  margin: 0;
  padding: 0;
  font-family: 'Yanone Kaffeesatz', sans-serif;  
  font-weight: 300;
  font-smooth:always;
  -webkit-font-smoothing: antialiased;
  background-color: #000;
  display: flex;
  min-height: 100vh;
  flex-direction: column; /* Añadido */
  background: rgb(17,17,17);
  background: linear-gradient(0deg, rgba(17,17,17,1) 0%, rgba(38,39,40,1) 100%);
}

header {
  margin-top: 5vh;
  text-align: center;
  color: white;
  font-size: clamp(16px, 7vw, 46px);
  z-index: 1;
}


.logo{
	-webkit-filter: drop-shadow(2px 2px 2px #141414);
	-moz-filter: drop-shadow(2px 2px 2px #141414);
	-ms-filter: drop-shadow(2px 2px 2px #141414);
	-o-filter: drop-shadow(2px 2px 2px #141414);
	filter: drop-shadow(2px 2px 2px #141414);	
}

.logo_small{
	font-size:75%;
}



#container3D {
  width: 100vw !important;
  height: 100vh !important;
  position: absolute;
  top: -5%;
  left: 0;
}



.container {
  margin: auto auto 0 auto;
  text-align: center;
  z-index: 1;
}

@media (orientation: landscape) {
  .container {
    padding: 10px 10px 5% 10px;
  }
}

@media (orientation: portrait) {
  .container {
    padding: 10px 10px 26% 10px;
  }
}


h1 {
  margin-bottom: 20px;
}

.instagram-buttons {
  display: flex;
  justify-content: space-between;
}

.instagram-button {
  display: inline-block;
  background-color: #405DE6;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  margin: 10px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.instagram-button:hover {
  background-color: #5773E6;
}

@media screen and (max-width: 380px) {
  .container {
    margin: 0 auto 16% auto !important;
    margin-top: auto !important;
  }

  .social-4 {
    margin: 2px 5px !important;
  }

  .instagram-buttons {
    flex-direction: column;
  }
}






/* social background colors */
.fb { background-color: #4561A8; }
.tw { background-color: #17ADEA; }
.gp { background-color: #BF3B28; }
.in { background-color: #1679B1; }
.pi { background-color: #D9303C; }
.su { background-color: #E84930; }

.ig { background: linear-gradient(45deg, #0026af, #172cd5, #4a41c0, #a235c1cf, #e13032d4, #fd1d1d7d); }


.social-4 {
    text-decoration: none;
    color: #ffffff;
    display: inline-flex;
    height: 40px;
    overflow: hidden;
    border-radius: 19px 0px;
    margin: 10px 5px;
}
.social-4 i {
    display:flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 40px;
    background-color: rgba(0,0,0,0.1);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.social-4 span {
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 0 5px;
}
.social-4:hover i {
    background-color: rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.fa-instagram:before {
    font-size: 25px;
}