/*===GOOGLE FONTS===*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;500;700&family=Poppins:wght@400;500;600&display=swap');


/*===VARIABLES CSS===*/
:root{
    /*COLORS*/
    --first-color: #FFFBFF;
    --first-color-alt: #F067EA ;
    --title-color: #63405b;
    --text-color: #615e5f;
    --text-color-light: #e4c3d8;
    --text-color-lighten: #e4d6e8;
    --body-color:#fff;
    --container-color: #B9946E;

    /*Font*/
    --body-font: 'Montserrat', sans-serif;
    --h2-font-size: 2rem;
    --h3-font-size: 1rem ;
    --title: 40px;
    --normal-font-size: .90rem;
    --small-font-size: .850rem;
    --smaller-font-size: .75rem;
}
/*===To All===*/

*{
    font-family: var(--body-font);
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(3.8px);
    background-image: url('./img/1bg.jpg');
    height: 100vh;
}


/*===Responsive Typography===*/
@media screen and (min-width: 968px) {
    :root{
        --h2-font-size: 2.2rem;
        --h3-font-size: 1.3rem;
        --normal-font-size: 1.20rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/*===CSS===*/

#principal{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    background: rgba(229, 225, 228, 0.751);
    box-shadow: 0 4px 30px rgb(0, 0, 0);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(3.8px);
    width: 70%;
    padding: 1rem;
}

.logoimg{
    width: 20%;
    height: 30%;
}

h1{
    font-size: var(--h2-font-size);
    margin-bottom: 0;
    text-align: center;
}

ul{
    list-style: none;
    text-align: center;
    font-weight: bold;
}

#desc{
    font-size: var(--h3-font-size);
}

button{
    cursor: pointer;
    font-size: var(--normal-font-size);
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    border: none;
    color: var(--body-color);
    background-color: var(--first-color-alt);
    transition: all;
}

.but1{
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    border: none;
    color: var(--body-color);
    background-color: var(--first-color-alt);
}

#btn{
    text-decoration: none;
    color: var(--first-color);
    transition: all ease;
}

button:hover{
    background-color: var(--body-color);
}

#btn:hover{
    background-color: var(--body-color);
    color: var(--first-color-alt);
}

#pad{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.redes{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

.redes a {
    text-decoration: none;
    color: var(--first-color);
    padding: 0.2em;
    font-size: 2em;
    transition: all 1s ease;
}

.redes a:hover{
    color: var(--first-color-alt);
}

.redes h1{
    font-size: var(--h3-font-size);
}

#rrss{
    margin-bottom: 1em;
}

#wsp-nav{
    background-color: #36c96c;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    position: absolute;
    bottom:3rem;
    right:7rem;
    width: auto;
    height: fit-content;
    font-size: 4rem;
    animation: move 2s infinite ease;
  }
  
  @keyframes move {
      0%{
          transform: translateY(-5px);
      }    
  
      75%{
          transform: translateY(5px);
      }
  
      100%{
          transform: translateY(-5px);
      }
  }

  @media screen  and (max-width:800px){
    #wsp-nav{
        bottom: 4%;
        right:1%;
      }
  }