/*February 24, 2022 */

body{
    width: 100%;
  }
    
    section{
      margin-left: 50px;
    }
  
    main{
      display: flex;
    }
    
    
    .grid {
      margin:0;
    
      /* width: 550px; */
      margin-left: 50px;
      margin-top: 100px;
      display: grid;
      grid-template-columns: repeat(6, 4rem);
      border-radius: 0.5rem;
      width: 24rem;
      height:24rem;
    }
  
  
    
    .grid2 {
      margin:0;
    
     
      margin-left: 50px;
      margin-top: 100px;
      display: grid;
      grid-template-columns: repeat(6, 4rem);
  
      border-radius: 0.5rem;
      width: 24rem;
      height:24rem;
    }
    
    
    .cell {
      display:inline-block;
      width:4rem;
      height: 4rem;
      background-color: hsl(0, 0%, 90%);
      outline-color: black;
      outline-style: solid;
    
     
    }
    
    .cell.color1{
      background-color:yellowgreen;
    }
    
    .cell.color2{
      background-color: yellowgreen
    }
    #setup{
      font-size: 30px;
      border-radius: 10%
      
    }
      
    
    
    #clear{
      margin-left: 20px;;
      font-size: 30px;
      border-radius: 10%
      
    }
    
    #clearTwo{
      margin-left: 20px;;
      font-size: 30px;
      border-radius: 10%
      
    }
    
  
    
    #move{
      margin-left: 20px;;
      font-size: 30px;
      border-radius: 10%
      
    }
  
    .colorbutton{
      font-size: 25px;
      margin-bottom: 20px;
      margin-left: 5px;
  
    }
    #bred{
     background-color:red;
    }
    
    #baqua{
      background-color: aqua
     }
  
     #byellow{
      background-color: yellow;
     }
  
     #bgreen{
      background-color:greenyellow;
     }
     
     
     #bwhite{
      background-color: white;
     }
     
     
     
  
    #displayPieces{
    
      margin-left: 20px;;
      font-size: 30px;
      border-radius: 10%
      
    }
    /* 
    p{
      width: 600px;
      height: 50px;
      font-size: 30px;
      background-color:blanchedalmond;
      
      outline-color: black;
      outline-style: solid;
    }
      */
    
    .pone{
      width: 100px;
      height: 50px;
      font-size: 30px;
      background-color:blanchedalmond;
      /* border-radius: 10%; */
      outline-color: black;
      outline-style: solid;
      padding-left: 5px;
    }
      
    .ptwo{
      width: 600px;
      height: 50px;
      font-size: 30px;
      background-color:blanchedalmond;
      /* border-radius: 10%; */
      outline-color: black;
      outline-style: solid;
      padding-left: 5px;
    }
    
    .pthree{
      width: 100px;
      height: 50px;
      font-size: 30px;
      background-color:blanchedalmond;
      /* border-radius: 10%; */
      outline-color: black;
      outline-style: solid;
      padding-left: 5px;
    }
      
      
    
    
    
    
    nav{
      display: flex;
      width:99%;
      height: 80px;
      background-color: yellowgreen;
      font-family:'Times New Roman', Times, serif;
      outline-color: black;
      outline-style: solid;
      margin-bottom: 50px;
      margin-right: 100px;
      color:white;
      justify-content: space-between;
      /* border-radius: 51%; */
      padding-bottom: 10px;
      
    }
  
   .section2{
      display:flex;
      align-items: center;
      /* align-content: flex-end; */
      width:100%;
      height: 80px;
      /* padding-top: 30px; */
      background-color: red;
      outline-color: black;
      outline-style: solid;
      /* margin-bottom: 50px; */
      /* margin-right: 100px; */
      color:black;
    /* justify-content: space-between; */
      /* border-radius: 51%; */
      padding-bottom: 10px;
      
    }
    
    
    a{border: 2px solid white;
      margin-top:20px;
      margin-left: 10px;
      margin-right: 10px;
      padding: 11px 25px;
      font-family: 'Playfair Display', serif;
      font-size:25px;
      align-items: flex-end;
    display: inline-block;
      position: relative;
      color: white;
      text-decoration: none;
      border-radius: 25%;
    }
    
    
    
    .dropdown {
      display: none;
      position: absolute;
      z-index: 1;
      padding-top: 20px;
      /* padding-right: 20px; */
      text-align: center;
      /* width:200px; */
      /* border-radius: 25%; */
      
    }
    
    
    .navbutton:hover .dropdown {
      align-content: space-around;
    }
    
    
    
    .dropdown .navbutton {
      border-radius: 50%;
      width: 200px;
      background-color: black;
      padding-bottom: 20px;
      font-size: 3px;
    }
    
    #firstUrlPickedId{
      font-size: 30PX;
    }
  
    #firstCellPickedId{
      font-size: 30PX;
    }
  
    
    
    
    #secondUrlPickedId{
      font-size: 30PX;
      color: blue;
    }
  
    #secondCellPickedId{
      font-size: 30PX;
      color: blue;
    }
  
  
    #boththesame{
      font-size: 30PX;
      color: green;
  
    }
  
    
  
    #navitems{
     padding-left: 30px;
      
    }
  
  .score{
    margin-top: 40px;
    font-size: 40px;
    width: 500px;
  }
  
  
  .try{
    margin-top: 40px;
    font-size: 40px;
    width: 500px;
  }
  
  .theTitle{
    width: 500px;
    font-size: 40px;
    font-weight: 700;
    
   margin-left: 350px;
  }