:root {
    --line-gradient: repeating-linear-gradient(45deg,#4facfe,#4facfe 40px,#0083fe 40px,#0083fe 80px);
}

html{
    scroll-behavior: smooth;
    overflow-y: hidden;
    height: 100vh;
    width: 100vw;
}

*{
    padding: 0;
    margin: 0;
    font-size: 40px;
    color: black;
    font-family: 'Arial', sans-serif;
}

body{
    min-height: 800px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-evenly;
    gap: 20px;
    flex-wrap: wrap;
    background-image: var(--line-gradient);
    background-size: 400%;
    animation: background-animation 250s linear infinite;
}

@keyframes background-animation {
    0% {background-position: left;}
    100% {background-position: right;}
}

.box1{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: skyblue;
    border: 5px solid black;
    border-radius: 25px;
    height: 100px;
    width: 200px;
    text-align: center;
}

.box2{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(30, 69, 85);
    border: 5px solid black;
    border-radius: 25px;
    height: 100px;
    width: 200px;
    text-align: center;
}

#box-button{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: skyblue;
    border: 5px solid black;
    border-radius: 25px;
    height: 100px;
    width: 200px;
    text-align: center;
}

#box-button:hover{
    background-color: rgb(56, 140, 173);
    color: white;
    cursor: pointer;
}