body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #B0E2FF; /* Light blue background */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    position: relative ; /* Added for positioning confetti */
    justify-content: center; /* Centraliza verticalmente */
    background-color:#14B8FF8F;
    z-index: 2;
}

body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('confetti.png'); /* Replace with your confetti image or JS implementation */
            background-size:  contain;
            opacity: 0.6; /* Reduced opacity for a subtle effect */
            z-index: -1;
        }
        
        /* Circular profile picture */
        .profile-image {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            overflow: hidden;
            margin-top: 25px;
            margin-bottom: 10px;
            border:  #b5f6ff 8px double; /* Dark Blue border */
            box-shadow: 0px 0px 40px rgb(255, 255, 255); /* Dark Blue border */ 
        }

        .profile-image img {
            width: 100%;
            height: auto;
            border-radius: 50%;
            overflow: hidden;
            color: #fff;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
           

        }
        
        /* Username */
        .username {
            font-size: 12px;
            margin-bottom: 0px;
            color: #00D6FF; /* Dark Blue */background-color:#FBFEFFC2 ;
            font-weight: 600;
            padding-right :20px ;
            padding-left: 20px ;
            border-radius:25px ;
        }
        
        /* Description */
        .description {
            font-size: 14px;
            text-align: center;
            color: #016b9c; /* Dark Blue */
            margin-bottom: 15px;
            font-weight: 900;
            text-transform: uppercase;
            background-color: #ffffffc2;
            width: 100%;
            padding: 3px;
            max-width:95%;
            box-shadow: 0px 4px 10px #016b9c73; /* Dark Blue border */

        }

        /* Social media links */
        .social-media i{
                        flex-direction:linear;
            justify-content: center;
            margin-bottom: 10px;
            margin-left: 10px;
            font-size:30px;
         
            color: #00C4FF; /* Dark Blue */ 
            padding-left: 10px;
            padding-right: 10px;
            
            padding-top: 10px;
            padding-bottom: 10px;

            cursor: pointer;
            transition: background-color 0.3s;
         
                    }

                    .social-media .fa-facebook{
                        width: 20px;
                        justify-content: space-evenly;
                        align-items:center;
                    }

        .social-media i:hover {
            color: #00aeff; /* Light blue background */
            
        }




/* Specific button styles - using IDs for better targeting */
#button1 {
    background-image: url("bt1-azul.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#button1:hover {
    background-image: url("bt1-br.png");
}

#button2 {
    background-image: url("bt2-azul.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#button2:hover {
    background-image: url("bt2-br.png");
}

#button3 {
    background-image: url("bt3-azul.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#button3:hover {
    background-image: url("bt3-br.png");
}

#button4 {
    background-image: url("bt4-azul.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#button4:hover {
    background-image: url("bt4-br.png");
}



        

        /* Button styles */
        .button  {
            display: flex;
            align-items: center;
            background-color:  #D6F0FF; /* Light blue background */
            color: #016b9c; /* Dark Blue */
            border: 2px solid #0480b9; /* Dark Blue border */
            border-radius: 30px;
            margin-bottom: 30px;
            width: 50%;
            max-width: 300px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: outset 12px 2px 5px rgba(0, 0, 0, 0.753); /* Dark Blue border */
            box-shadow: inset 2px 2px 5px #0480b9; /* Dark Blue border */
            transition: background-color 0.3s;
            font-weight: 500;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

        .button:hover {
            background-color: #0480b9; /* Dark Blue */
            color: #ffffff; /* Light blue background */
        }

   

        .button1 {
            background-image: url("bt1-azul.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;            width: 60%;
            height: 60%;
            margin-bottom: 10px;
        }

        .button2 {
            background-image: url("bt2-azul.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;            width: 60%;
            height: 60%;
            margin-bottom: 10px;
        }

        .button1:hover {
            background-image: url("bt1-br.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;            width: 60%;
            height: 60%;
            transition: background-color 0.6s; 
                      border-radius: 30px;
                      margin-bottom: 10px;
            
        }

        .button2:hover {
            background-image: url("bt2-br.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;            width: 60%;
            height: 60%;
            transition: background-color 0.6s; 
                      border-radius: 30px;
        }

        .button3 {
            background-image: url("bt3-azul.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;            width: 60%;
            height: 60%;
            margin-bottom: 10px;
        }

        .button3:hover {
            background-image: url("bt3-br.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;
                        width: 60%;
            height: 60%;
            transition: background-color 0.6s; 
                      border-radius: 30px; 
                      margin-bottom: 10px;
        }

        .button4 {
            background-image: url("bt4-azul.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;
            width: 60%;
            height: 60%;
            margin-bottom: 10px;
        }
        

        .button4:hover {
            background-image: url("bt4-br.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 25px 25px;            width: 60%;
            height: 60%;
            transition: background-color 0.6s; 
                      border-radius: 30px;
                      margin-bottom: 45px;
        }

   footer {
    position:fixed ;
    width:100%;
    height: 65px;
    background-color:#FFFFFF ;
    bottom: 0;
    text-align : center;
    color:#08C8FF;
    font-weight: 600 ;
    font-size: 18px ;
    z-index:-3;
    
   }