body {
    background-image: linear-gradient(100deg, rgba(248, 43, 43, 0.587), rgba(250, 179, 46, 0.682), rgba(250, 250, 51, 0.443), rgb(39, 251, 39), rgba(51, 51, 251, 0.451), rgb(166, 46, 251), rgba(250, 54, 250, 0.577));
    background-repeat: no-repeat;
    background-size: auto;
    height: 100vh;
}

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 10px;
}

h1 {
    text-align: center;
    font-weight: 800;
    color: white;
    font-size: 72px;
}

.main {
    /* border: 2px solid gray; */
    margin: 0 auto;
    width: 320px;
    padding: 20px;
    border-radius: 10px;
    background-color: antiquewhite;
    box-shadow: 4px 5px 4px rgb(80, 77, 77);
    margin-top: 30px;
}

.result {
    width: 97%;
    font-size: 20px;
    margin-top: 5px;
    font-weight: 800;
    border-radius: 10px;
}

.clear {
    width: 100%;
    font-size: 20px;
    color: wheat;
    font-weight: 800;
    background-image: linear-gradient(to right, rgb(196, 142, 142), rgb(181, 139, 178));
    margin-top: 10px;
    border-radius: 10px;
}

.clear:hover {
    background-image: linear-gradient(to right, rgb(231, 11, 11), rgb(229, 29, 216));
    transform: scale(0.9);
    transition: 0.5s ease-out;
}

.getNumber {
    width: 32.5%;
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin-top: 10px;
    background-image: linear-gradient(to right, rgb(196, 142, 142), rgb(181, 139, 178));
    border-radius: 10px;
}

.getNumber:hover {
    background-image: linear-gradient(to right, rgb(231, 11, 11), rgb(229, 29, 216));
    transform: scale(0.9);
    transition: 0.5s ease-out;
}

.getNumbers {
    width: 24%;
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin-top: 10px;
    background-image: linear-gradient(to right, rgb(196, 142, 142), rgb(181, 139, 178));
    border-radius: 10px;
}

.getNumbers:hover {
    background-image: linear-gradient(to right, rgb(231, 11, 11), rgb(229, 29, 216));
    transform: scale(0.9);
    transition: 0.5s ease-out;
}

.results {
    width: 100%;
    background-image: linear-gradient(to right, rgb(196, 142, 142), rgb(181, 139, 178));
    font-size: 22px;
    font-weight: 800;
    color: white;
    margin-top: 10px;
    border-radius: 10px;
}

.results:hover {
    background-image: linear-gradient(to right, rgb(231, 11, 11), rgb(229, 29, 216));
    transform: scale(0.9);
    transition: 0.5s ease-out;
}

@media (max-width:650px){
    h1{
        font-size: 48px;
    }
    .main {
        width: 260px;
    }
    .getNumber {
        width: 32%;
        font-size: 17px;
    }
    .getNumbers{
        width: 23.2%;
        font-size: 17px;
    }
}
@media (max-width:400px){
    html{
        font-size: 70%;
    }
}