.body{background-color:black;}
.card {
    border-radius: 20px;
    overflow: hidden;
    margin-top: 1rem !important;
}

.profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: -50% auto 15px auto;
    border: 6px solid white;
    box-shadow:0 4px 8px #000;
    animation: fadeIn 1s ease;
    animation: flotante 3s ease-in-out infinite;
}

.cover-image {
    height: 320px;
    width: 100%;
    object-fit: cover;
    mask-image: linear-gradient(white 50%, transparent);
}

#link {
    color: rgb(84, 84, 84);
    text-decoration: none;
}

#link:hover {
    color: blue;
    text-decoration: none;
}
@keyframes flotante {
     0%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
    100%{transform:translateY(0);}
}

@keyframes anmbtn1{
    from{opacity:0;transform:translateY(100px);}
      to{opacity:1;transform:translateY(0);}
}
@keyframes anmbtn01{
    from{opacity:0;transform:translateX(50%);}
      to{opacity:1;transform:translateX(0);}
}
@keyframes anmbtn02{
    from{opacity:0;transform:translateX(-50%);}
      to{opacity:1;transform:translateX(0);}
}


/* button 01 */
.btn01 {
  /*margin: 100px;*/
  /*padding: .5vh;
  padding-bottom: 1.5vh;
  width: 30vh;*/
  border:solid #f7931d 0px;
  outline: none;
  color: #662a9c;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn01 1s;
  font-weight:bold;
  font-size:12px;
  text-align:center;
}
/* button 02 */
.btn02 {
  /*margin: 100px;*/
  /*padding: .5vh;
  padding-bottom: 1.5vh;
  width: 30vh; */
  border:solid #f7931d 0px;
  outline: none;
  color: #662a9c;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn02 1s;
  font-weight:bold;
  font-size:12px;
  text-align:center;
}
/* button 03 */
.btn03 {
  /*margin: 100px;*/
  padding: .5vh;
   padding-bottom: 1.5vh;
    width: 30vh;
  border:solid #f7931d 0px;
  outline: none;
  color: #662a9c;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn01 1s;
  font-weight:bold;
  font-size:12px;
  text-align:center;
}

/* button 1 */
.btn1 {
  /*margin: 100px;*/
  padding: 5vh;
    width: 30vh;
  border:solid #f7931d 0px;
  outline: none;
  color: #000080;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn1 2s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  float:left;
}

/* button 2 */
.btn2 {
  /*margin: 100px;*/
  padding: 5vh;
    width: 30vh;
  border:solid #f7931d 0px;
  outline: none;
  color: red;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn1 4s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  float:left;
}

/* button 3 */
.btn3 {
  /*margin: 100px;*/
  padding: 5vh;
    width: 30vh;
  border:solid #f7931d 0px;
  outline: none;
  color: green;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn1 6s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  float:left;
}

/* button 4 */
.btn4 {
  /*margin: 100px;*/
  padding: 5vh;
    width: 30vh;
  border:solid #f7931d 0px;
  outline: none;
  color: #e30052;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn1 8s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  float:left;
}

/* button 5 */
.btn5 {
  /*margin: 100px;*/
  padding: 5vh;
    width: 30vh;
  border:solid #f7931d 0px;
  outline: none;
  color: black;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 12px;
  animation:anmbtn1 10s;
  font-weight:bold;
  font-size:16px;
  text-align:center;
  float:left;
}
.fa-tiktok {
  color: #111111;
  
  filter: drop-shadow(2px 0px 0px #FD3E3E) drop-shadow(-2px -2px 0px #4DE8F4);
}


a img{width:100%;}

@media (min-width: 768px) {
    a img{width:80%;}
  .profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: -30% auto 15px auto;
    border: 6px solid white;
    box-shadow:0 4px 8px #000;
    animation: fadeIn 1s ease;
    animation: flotante 3s ease-in-out infinite;
}

    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 750px;
}

}