body {
    text-align: center;
    background: radial-gradient(#e66465, #9198e5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: 360px;
    height: 50%;
    margin: 40px auto;
    border: 1px solid black;
}

#grid div {
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#number {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: 360px;
    height: 50%;
    margin: 40px auto;
    /* border: 1px solid black; */
    /* border: 2px solid black; */
}
#number div{
    border: 1px solid black;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
   
}


.horz{
    border-bottom: 3px solid rgb(247, 8, 8) !important;
}
.vert{
    border-right:3px solid rgb(245, 3, 3) !important ;
}
.teal{
    background-color: aquamarine;
}
.grey{
    background-color: grey;
}
span{
    font-size: xx-large;
    color: rgb(25, 28, 30);
}
h1{
    font-size: 100px;
    color: darkorange;
}
#popup{
    display: none;
    
}
#main{
    padding: 100px;
  
    height: 100vh;
    width: 100vw;
}
#main img{
    width: 500px;
    height: 330px;
    cursor: pointer;
}
@media only screen and (min-width:600px){
    body{
        background-color: aqua;
    }
    #main h1{
        font-size: 80px;
    }
    #main img {
        width: 370px;
        height: 300px;
        cursor: pointer;
    }
}
/* @media (max-width:680px) {
 #main {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(#e66465, #9198e5);
 }
 #main img h1{
    width: 400px;
    height: 230px;
}
}
 @media (max-width:565px) {
 
    #main {
        height: 600px;
        width: 513px;
    
        background: radial-gradient(#e66465, #9198e5);
     }
     #main img h1{
       font-size:50px;
       padding-left: 20px;
       
    }
}
@media only screen and(max-width:570px){
    body{
        background: radial-gradient(#594c4c, #9198e5);
    }
    #main  h1{
        font-size:70px ;
    }
}
@media (max-width:476px) {
 #main{
    height: 117vh;
    width: 105vw;
    background-size: cover;
 }
    
} */
/* @media (max-width:346px) {
 
    
}  */