body, html{
    background-color: black;
    height: 100%;
    width: 100%;
    margin: 0;
    display: block;
}
h3 {
    color: black;
    text-shadow: 0 0 30px black;
    line-height: 1;
    font-family: system-ui;
}
h1{
    color: #fa0000;
    text-shadow: 0 0 30px white;
    text-align: center;
}
.hello{
    width: 600px;
    margin-left: auto; 
    margin-right: auto;
}
.rules {
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid gray;
    background-color: #ffffff8a;
    border-radius: 15px;
    padding: 15px;
}
h2:hover{
    text-shadow: 0 0 5px #fa0000, 0 0 5px #faab00; 
}
h1:hover{
    text-shadow: 0 0 5px #00e9fa, 0 0 5px #00e9fa; 
}

.body2{
    background:url('Resourse/ruls .image.jpg');
    background-color: black;
    background-size: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    height: 1200px;
}
p{
    color: white;
    text-align: center;
    font-size: 30px;
}
/*Ready button*/
.readybutton {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: right;
    width: 200px;
    padding: 10px;
    font-size: 25px;
    font-family: poppins;
    border: 5px solid #15f4ee;
    text-transform: uppercase;
    letter-spacing: 15px;
    cursor: pointer;
    border-radius: 100px;
    transition: 1.5s;
    background-color: rgb(0, 0, 0);
    color: #15F4EE;
}
  
.readybutton:hover{
    box-shadow: 0 4px 30px 0 #15f4ee inset, 0 4px 30px 0 #15f4ee,
                0 4px 30px 0 #15f4ee inset, 0 4px 30px 0 #15f4ee ;
    text-shadow: 0 0 5px #15f4ee, 0 0 5px #15f4ee;
}

p:hover{
    text-shadow: 0 0 5px #f415b1, 0 0 5px #f415b1; 
    border-color: #f415b1;
}
p{
    color:bisque;
    -webkit-text-stroke: 0.5px #f415b1;   
}

@media only screen and (max-width: 600px) {
    .hello{
        width: 300px;
        margin-left: auto; 
        margin-right: auto;
    
    }
    .h1vip{
        font-size: 20px!important;
    }
    .rules {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid gray;
        background-color: #ffffff8a;
        border-radius: 15px;
        padding: 15px;
    }
    .body2{
        background:url('Resourse/ruls .image.jpg');
        background-color: black;
        background-size: 600px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-repeat: no-repeat;
        background-position-x: center;
        height: 1200px;
    }
    p{
        color: white;
        text-align: center;
        font-size: 30px;
    }
    /*Ready button*/
    .readybutton {
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: right;
        width: 200px;
        padding: 10px;
        font-size: 25px;
        font-family: poppins;
        border: 5px solid #15f4ee;
        text-transform: uppercase;
        letter-spacing: 15px;
        cursor: pointer;
        border-radius: 100px;
        transition: 1.5s;
        background-color: rgb(0, 0, 0);
        color: #15F4EE;
    }
}