body {
    background-size: cover;
}

.block{
    display: block;
    align-items: center;
    margin-right: 10px;
    margin-left: 50px; 
    margin-top: 20px;      
}

.center {

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    position: absolute;
    top: 25%;
    left: 6%;

    width: 90%;
    
    text-align: left;

    transition:  background-color 5s,clolor 10s;
  }

a {
    text-decoration: none;
  }
  h1{
    margin-left: 15%;
    font-size: 500%;
    background: linear-gradient(to right,  #e90000 0%, #750103 19%, #390077 42%, #004f86 62%, #009cfd 83%); /* Define the gradient colors */
    -webkit-background-clip: text; /* Ensure the background is clipped to the text */
    -webkit-text-fill-color: transparent; /* Make the text fill color transparent */
    

}
h2{
    margin-left: 35%;
    font-size: 200%;
    background: linear-gradient(to right,  #00182f 0%, #1d0037 26%, #4a0002 59%); /* Define the gradient colors */
    -webkit-background-clip: text; /* Ensure the background is clipped to the text */
    -webkit-text-fill-color: transparent; /* Make the text fill color transparent */


}

  
.clickme {
    text-align: center;
    align-items: right;
    color: rgb(97, 1, 1);

    position: absolute;
    top: 45%;
    left: 6%;

    padding-left: 8%;
    padding-right: 8%;
    padding-top: 8%;
    padding-bottom: 8%;

    border-radius: 10px;
    cursor: pointer;

    font-size: 60px;
    font-weight: bold;
    scroll-margin-block: 20px; 

    border-style: hidden;
    box-shadow: 25px 25px 5px hwb(123 0% 92% / 0.288);
    transition: background-color 0.5s, color 1s;

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Utilities/Bengoli1.png'); /* Adds a semi-transparent black overlay on top of the background image */
    background-size: cover; /* Adjusts the background image size to cover the element */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the background image from repeating */
}

.clickme:hover{

    position: absolute;
    top: 43%;
    left: 7%;

    padding-left: 9%;
    padding-right: 9%;
    padding-top: 10%;
    padding-bottom: 10%;
    
    background-color: hwb(128 0% 38% / 0.815);
    color: rgb(29, 1, 1);
    box-shadow: 10px 10px 5px hsla(0, 0%, 0%, 0.288);
}
.clickme:active{
    background-color: hsla(263, 98%, 48%, 0.349);
    color: rgb(29, 1, 1);
    box-shadow: 10px 10px 5px hsla(263, 98%, 48%, 0);
    box: 10px 10px 5px black;
}

.click{
    
    text-align: center;
    align-items: right;
    background-color: #d37f00;
    color: #003b7e;
    
    position: absolute;
    top: 45%;
    left: 65%;

    padding-left: 7%;
    padding-right: 7%;
    padding-top: 8%;
    padding-bottom: 8%;

    border-radius: 10px;
    cursor: pointer;

    font-size: 60px;
    font-weight: bold;
    scroll-margin-block: 20px; 

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Utilities/bengoli.jpg'); /* Adds a semi-transparent black overlay on top of the background image */
    background-size: cover; /* Adjusts the background image size to cover the element */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the background image from repeating */

    border-style: hidden;
    box-shadow: 25px 25px 5px hwb(0 0% 100% / 0.288);
    transition:  background-color 0.5s,clolor 1s;
}
.click:hover{
    position: absolute;
    top: 42%;
    left: 60%;
    padding-left: 9%;
    padding-right: 9%;
    padding-top: 10%;
    padding-bottom: 10%;

    background-color: hwb(17 0% 18% / 0.815);
    color: #003b7e;
    box-shadow: 10px 10px 5px hsla(0, 0%, 0%, 0.288);
}
.click:active{
    background-color: hsla(263, 98%, 48%, 0.349);
    color: rgb(29, 1, 1);
    box-shadow: 10px 10px 5px hsla(263, 98%, 48%, 0);
    box: 10px 10px 5px black;
}