@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');

:root{
  --red:#ff3838;
}

*{
  font-family: 'Nunito', sans-serif;
  margin:0; padding:0;
  box-sizing: border-box;
  outline: none; border:none;
  text-decoration: none;
  text-transform: capitalize;
  transition:all .2s linear;
}

*::selection{
  background:var(--red);
  color:#fff;
}

html{
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body{
  background:#f7f7f7;
}

section{
  padding:2rem 9%;
}

.heading{
  text-align: center;
  font-size: 3.5rem;
  padding:1rem;
  color:#666;
}

.heading span{
  color:var(--red);
}


header{
    position: fixed;
    top:0; left: 0; right:0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:rgba(12, 129, 8, 0.829);
    padding:2rem 9%;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
  }
  
  header .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color:#666;
  }
  
  header .logo i{
    padding-right: .5rem;
    color:var(--red);
  }
  
  header .navbar a{
    font-size: 2rem;
    margin-left: 2rem;
    color:rgb(252, 249, 71);
  }
  
  header .navbar a:hover{
    color:white;
  }
  
  
#menu-bar{
    font-size: 3rem;
    cursor: pointer;
    color:#666;
    border:.1rem solid #666;
    border-radius: .3rem;
    padding:.5rem 1.5rem;
    display: none;
  }
  
  .home{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
    min-height: 100vh;
    align-items: center;
    background:url(ckt.jpg) no-repeat;
    background-size: cover;
    background-position: center;
  }
  
  .home .content{
    flex:1 1 40rem;
    padding-top: 6.5rem;
    margin-bottom: 27%;  
  }
  
  .home .content h3{
    font-size: 5rem;
    color:rgb(79, 230, 142);
  }
  
  .home .content p{
    font-size: 1.7rem;
    color:rgb(255, 208, 0);
    padding:1rem 0;
  }

  #scoresheet{

     height: 600px;
     width:500px;
     background-color: rgba(0, 102, 255, 0.726);
     border-radius: 5%;  
     position: absolute;
     left: 50%;
     top:50%;
     transform: translate(-50%,-50%);
     padding: 0.5%;
     border: 10px solid bisque;
  }

  #select{
      height: 20%;
      width:95%;
      margin-left: 2.5%;
      border-top-left-radius: 5%;
      border-top-right-radius: 5%;
      background-color: bisque;
      background: transparent;
      display: flex;
      justify-content: space-evenly;
      
  }

  #one {
      position: relative;
      
      height: 80%;
      margin-top: 2%;
      width: 18%;
      border-radius: 50%;
      background-color: rgb(223, 255, 196);
      color: rgb(0, 0, 0);
      text-align: center;
      font-size: 40px;
      

  }

  #one:hover{
      background-color: rgb(241, 0, 0);
      border: 2px solid white;
      color: white;
  }

  #bat{

      height: 25%;
      width:95%;
      margin-left: 2.5%;
      margin-top: 2%;
      border-top-left-radius: 5%;
      border-top-right-radius: 5%;
      background-color: bisque;
      background: transparent;
      text-align: center;
      padding: 3%;
  }

  #heady, #score ,#bowl, #totals {
    
    font-size: 30px;
  }


  
@media(max-width:550px){

    
  #scoresheet{
  
    width: 90%;

  }

}

 
@media(max-height:780px){

    
    #scoresheet{
        
        margin-top: 60px;
        height: 500px;
    }
  
    .home{
        background-repeat: repeat-y;
    }
  
    


#heady {

    font-size: 20px;
}

#one {

    font-size: 20px;


}
}
  


  @media(max-height:600px){

    .home{
        background-repeat: repeat-y;
    }

    
    #scoresheet{
        
        margin-top: 100px;
        height: 400px;
        font-size: larger;
        margin-top: 50px;

    }

    #heady {

        font-size: 20px;
    }

    #one {

        font-size: 20px;


    }
 

}