*
{   font-family: 'Grandstander', cursive;
    margin:0;
}
html
{
    background: black;
    
}
.rgb
{
    font-size:100px;
}

.top
{
    background-color:cyan;
    color:rgb(255, 28, 122);
    margin:0px;
    font-size:25px;
    text-align:center;
    text-transform: uppercase;
    font-weight: lighter;
    width:100%;
    padding: 100px auto;
    transition: background 0.5s;

}
h1{
    padding-top:20px;
    padding-bottom:20px;
    font-weight:100;
}
.bor
{
    background-color:rgb(255, 255, 255);
    display:flex;
    list-style-type:none;
    justify-content: space-around;
    margin:0;
    padding-top:10px;
    padding-bottom:10px;
    border: 5px double rgb(255, 28, 122);
    
}
ul{
    list-style-type:none;
    display:flex;
}
button
{
    background-color: rgb(255, 255, 255);
    font-size: 30px;
    border:none;
    color:rgb(103, 247, 0);
}
button:hover
{
    background-color: hotpink;
    transition: background 0.5s;
}
.square

{
    width:30%;
    margin:1.66%;
    background-color:black;
    float:left;
    height:40%;
    border-radius:100px;
    padding-bottom:30%;
    transition: background 1s;
}
.container
{
    
    margin:20px auto;
    max-width: 600px;
}
p
{
    color:white;
    text-align: center;
   
    font-size: 34px;
}
.message
{
    font-weight: 900;
    padding-top: 8px;
    font-size:30px;
    color:blue;
}
.selected
{
    background-color: hotpink;
}
.non
{
    display: none;

}