*{
    margin: 0px;
    padding: 0px;
    font-family: Helvetica, sans-serif;
}


#background{
    height: 60rem;
    width: auto;
    background-image:url(bg.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
}

#box1{
    position: absolute;
    height: 108vh;
    width: 70vw;
    border-radius:1rem;
    background-size: cover;
    margin-top: 4rem;
    background-image: url(img2.png);
    display: flex;
    justify-content: center;
    align-items: center;
}


/* #button{
    height:4rem;
    width: 20rem;
    margin-top: 48rem;
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:1rem;
    background-color: #55ae01;
} */

/* #button{
height:4rem;
width:  12rem;
margin: 10px;
position: absolute;
padding: 8px 104px;
text-align: center;
text-transform: uppercase;
background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA  51%, #1FA2FF  100%);
transition: 0.5s;
background-size: 200% auto;
color: white;            
box-shadow: 0 0 20px #eee;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
bottom:-10rem;
text-decoration: none;
font-weight: 700;
} */

#button {
    height:12vh;
    width:  90vw;
    margin: 10px;
    font-size:1.5rem;
    position: absolute;
    text-align: center;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom:-10rem;
    text-decoration: none;
    font-weight: 900;
    color: white;            
    box-shadow: 0 0 20px #eee;
    background: radial-gradient( 100% 100% at var(--g6-1-x-position) var(--g6-1-y-position), #fff700 -34%, transparent ), radial-gradient( 100% 100% at var(--g6-2-x-position) var(--g6-2-y-position), #f179e7 -28%, transparent ), radial-gradient(100% 100% at 52% 47%, #00fbff 13%, transparent), #ffffff;animation-name: g-6; animation-iteration-count: infinite; animation-duration: 4s; transition-timing-function: ease-in;}@property --g6-1-x-position { syntax: "<percentage>"; inherits: false; initial-value: 89.7265625%; } @property --g6-1-y-position { syntax: "<percentage>"; inherits: false; initial-value: 10.468750000000004%; }@property --g6-2-x-position { syntax: "<percentage>"; inherits: false; initial-value: 15.546875000000004%; }@property --g6-2-y-position { syntax: "<percentage>"; inherits: false; initial-value: 85.234375%; }:root {--g6-1-x-position: 89.7265625%;--g6-1-y-position: 10.468750000000004%;--g6-2-x-position: 15.546875000000004%;--g6-2-y-position: 85.234375%;}@keyframes g-6 { 50% { --g6-1-x-position: 16.718750000000004%; --g6-1-y-position: 83.1640625%; --g6-2-x-position: 86.2890625%; --g6-2-y-position: 14.882812499999998%; } }

#button:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}


@media (max-width:455px) {
    #box1{
    height: 47vh;
    width: 94vw;
    }
}