*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    
}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgb(0,0,0);
   
}

header#heading{
    background-color: #003566;
    color: white;
    text-align: center;
    line-height: 3em;
    padding-top: 20px;
    padding-bottom: 30px;
    height: 250px;


 }
 h1{
    font-size: 50px;
     margin-bottom:20px ;
 }
 span{
     font-size: 90px;
 }

#random{
    font-size: 80px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.color{
    font-size: 50px;
    margin-bottom: 20px;
}

.container{
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    color:rgb(0,0,0);
    height: 30px;
    padding: 0px 30% 0px 30%;
    align-content: center;
    justify-content: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.type{
    display: flex;
  
}
.type p{
    margin-right: 10px;
}
a{
    margin-right: 10px;
    text-decoration: none;
    color: rgb(0,0,0);
}
#hard{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 22px;
}
#hard:hover{
    background-color: #fdc500;
    cursor: pointer;
}
#easy{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 22px;
}
#easy:hover{
    background-color: #fdc500;
    cursor: pointer;
}
#game{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 22px;
}
#game:hover{
    border:  0;
  
    background-color: #fdc500;
    cursor: pointer;
}
#correct{
    font-weight: bolder;
    color: #710000;
    font-size: 20px;
}

    

#align{
    display: grid;
			grid-template-columns: repeat(11, 1fr);
            row-gap: 20px;
			grid-auto-rows: minmax(100px, auto);
            justify-items: center;
			margin: 0 auto;
            position:relative;    
}

#one{
    grid-column: 5/6;
    grid-row:1/2;    
    width: 150px;
    height: 150px;
    color: rgb(27, 115, 192);
    background-color: aliceblue;
    border-radius: 15px;
}
#one:hover{
    background-color: aqua;
}
#two{
    grid-column:6/7;
    grid-row:1/2;  
    margin-left: 10px;
    margin-right: 10px;
    width: 150px;
    height: 150px;
    color: aliceblue;
    background-color: rgb(9, 134, 243);
    border-radius: 15px;
}
#two:hover{
    background-color: aqua;
}
#three{
    grid-column: 7/8;
    grid-row:1/2;  
    width: 150px;
    height: 150px;
    color: aliceblue;
    background-color: rgb(7, 245, 78);
    border-radius: 15px;
}
#three:hover{
    background-color: aqua;
}
#four{
    grid-column: 5/6;
    grid-row: 2/3;    
    width: 150px;
    height: 150px;
    color: rgb(27, 115, 192);
    background-color: rgb(18, 180, 113);
    border-radius: 15px;   
}
#four:hover{
    background-color: aqua;
}
#five{
    grid-column: 6/7;
    grid-row: 2/3;    
    width: 150px;
    height: 150px;
    color: rgb(27, 115, 192);
    background-color: rgb(199, 241, 8);
    border-radius: 15px; 
}
#five:hover{
    background-color: aqua;
}
#six{
    grid-column: 7/8;
    grid-row: 2/3;    
    width: 150px;
    height: 150px;
    color: rgb(27, 115, 192);
    background-color: rgb(233, 83, 83);
    border-radius: 15px; 
}
#six:hover{
    background-color: aqua;
}
@media(max-width:970px)
{
    #game{
        font-size: 17px;
    }
    #correct{
        font-size: 15px;
    }
    #hard{
        font-size: 15px;
    }
    #easy{
        font-size: 15px;
    }

}
@media(max-width:720px)
{
    #game{
        font-size: 12px;
    }
    #correct{
        font-size: 9px;
    }
    #hard{
        font-size: 12px;
    }
    #easy{
        font-size: 12px;
    }
}
@media(max-width:740px)
{
    header h1{
        font-size: 40px;
    }
    header span{
        font-size: 40px;
    }
    #random{
        font-size: 40px;
    }
    .color{
        font-size: 40px;
    }
    #align{
        display: flex;
        flex-wrap: wrap;
    }
    #one{
        margin-left: 10px;
        margin-right: 10px;
    }
    #two{
        margin-left: 10px;
        margin-right: 10px;
    }
    #three{
        margin-left: 10px;
        margin-right: 10px;
    }
    #four{
        margin-left: 10px;
        margin-right: 10px;
    }
    #five{
        margin-left: 10px;
        margin-right: 10px;
    }
    #six{
        margin-left: 10px;
        margin-right: 10px;
    }
    
}
@media(max-width:1800px){
    #align{
        row-gap: 10px;
    }

}
@media(max-width:320px){
    header h1{
        font-size: 30px;
    }
    header span{
        font-size: 30px;
    }
    #random{
        font-size: 30px;
    }
    .color{
        font-size: 30px;
    }
}
@media(max-width:180px){
    header h1{
        font-size: 20px;
    }
    header span{
        font-size: 20px;
    }
    #random{
        font-size: 20px;
    }
    .color{
        font-size: 20px;
    }
}