@import url('https://fonts.googleapis.com/css2?family=Anton&family=Belanosima:wght@400;700&family=Bitter&family=Caprasimo&family=Konkhmer+Sleokchher&family=Montserrat:wght@400;900&family=Oswald:wght@500&family=Poppins:wght@500&family=REM:ital,wght@0,500;1,500&family=Roboto&family=Rubik+Pixels&display=swap');
/* font-family: 'Anton', sans-serif; */



* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: gilroy;
}

html body {
    width: 100%;
    height: 100%;
}

.main {
    height: 100vh;
    width: 100%;
    background-color: black;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(0, 255, 13);
   
}
.guidline{
    position: absolute;
    color: aliceblue;
    z-index: 999;
    top: 1%;
    font-size: 20px;
    font-family: 'Anton', sans-serif;
    letter-spacing: 3px;
    font-stretch: 300%;
}
.guidline span{
    color: orangered;
    font-size: 20px;
    font-family: 'Anton', sans-serif;
    letter-spacing: 3px;
    font-stretch: 300%;
}
.main-content {
    height: 90vh;
    width: 80%;
    /* background-color: red;s */
    border-radius: 10px;
    overflow: hidden;
    margin-top: 50px;
}

.ptop {
    height: 15vh;
    width: 100%;
    background: rgba(176,155,255,.15);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.ptop button {
    padding: 10px 30px;
    font-size: 30px;
    font-weight: 700;
    background-color: black;
    color: #ffff;
    border: 1px solid rgb(0, 255, 0);
}
.button1{
    padding: 5vw 10vw;
    background-color: black;
    color: #ffff;
    font-size: 40px;
    font-weight: 900;
    font-family: 'Anton', sans-serif;
    letter-spacing: 10px;
    text-transform: uppercase;
    position: absolute;
    border: 1px solid rgb(0, 255, 0);
}
.ptop button:hover ,.button1:hover{
    background-color: aliceblue;
    color: black;
    cursor: pointer;
}

.elem {
    height: 5vh;
    width: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.elem h2 {
    color: #ffff;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
}

.elem .score {
    height: 30px;
    width: 50px;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: aqua;
    border-radius: 5px;
}

.pbotm {
    width: 100%;
    height: 75vh;
    background-color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    font-size: 5vw;
    font-weight: 900;
    flex-wrap: wrap;
    gap: 1%;
    border: 2px solid white;
}

.bubble {
    height: 50px;
    width: 50px;
    background-color: gray;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 3px 3px;
    font-weight: 700;
    font-size: 20px;
    border: 1px solid white;
}

.bubble:hover {
    background-color: rgb(0, 0, 0);
    cursor: pointer;
}


@media only  screen and (max-width:900px ) and (min-width:550px) {
    
    .ptop .button2{
        font-size: 20px;
        padding: 5px 16px;
    }

    .elem {
        height: 3vh;
        width: 6vh;
        gap: 10px;
    }
    .elem h2{
      font-size: 10px;
    }
    .guidline{
       
        font-size: 15px;
        font-family: gilroy;
        margin: 0px 10px;
        letter-spacing: 1px;
    }
    .guidline span{
      
        font-size: 15px;
        font-family: gilroy;
       
    }
    
    
}


@media only  screen and (max-width:551px ) and (min-width:450px)  {

.ptop{
    position: relative;
}

    .ptop .button2{
        font-size: 20px;
        padding: 5px 16px;
        position: absolute;
        top: 2%;
    
        transform:translatex(-100%, 100%);
    }

    .elem {
        height: 3vh;
        width: 6vh;
        gap: 10px;
        margin-top:30px ;
        
    }
    .elem h2{
      font-size: 10px;
    }
   
    .guidline{
       
        font-size: 10px;
        font-family: gilroy;
        margin: 0px 10px;
        letter-spacing: 1px;
    }
    .guidline span{
      
        font-size: 10px;
        font-family: gilroy;
       
    }
    
  
}


@media only  screen and (max-width:451px ) {

    .ptop{
        position: relative;
        justify-content: space-between;
    }
    .ptop .elem{
        flex-direction: column;
        margin-top:30px ;
    }
    
        .ptop .button2{
            font-size: 20px;
            padding: 5px 16px;
            position: absolute;
            top: 2%;
            left: 40%;
            right: 60%;
        }
    
        .elem {
            height: 3vh;
            width: 6vh;
            gap: 10px;
        }
        .elem h2{
          font-size: 10px;
        }
       
        
        .elem .score {
            height: 25px;
            width: 40px;
            padding: 5px 20px;
            display: flex;
    
        }

        .bubble {
            height: 40px;
            width: 40px;
          
        }

        .guidline{
       
            font-size: 10px;
            font-family: gilroy;
            margin: 0px 10px;
            letter-spacing: 1px;
        }
        .guidline span{
          
            font-size: 10px;
            font-family: gilroy;
           
        }
}