*{
  padding: 0%;
  margin: 0%;
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color:#212529;
  position: fixed;
}

.foot-p{
   color: wheat;
   margin-top: 10px;
}

body, html{
  background-color: black;
  height: 100vh;
  height: 100%;
  margin: 0;
}

#first_div{
  background-color: rgba(255, 255, 255, 0.521) ;
  height: auto;
  margin: auto;
  line-height: 0%;
  border-radius: 20%;
  border-left: 30px black solid;
  border-right: 30px black solid;
}

@media screen and (max-width: 800px) {
  #first_div {
    height: auto;
  }
}


#second_div{
  background-color: black;
  height: 35px;
  border-bottom: solid white 2.5px;
  text-align: center;
}

#third_div{
  background: black;
  padding-top: 0%;
  padding: 10px;
  margin: auto; 
  border-left: solid rgba(255, 255, 255, 0.521)  10px;
  border-right: solid rgba(255, 255, 255, 0.521) 10px;
}

#ct{
  text-align: center;
  margin: 0 auto;
  width: auto;
  border-left: solid rgba(255, 255, 255, 0.521)  10px;
  border-right: solid rgba(255, 255, 255, 0.521) 10px;
}

.squa{
  border-left: solid rgb(247, 202, 114) 5px;
  border-right:solid rgb(247, 202, 114) 5px;
}


.square{
  width: 140px;
  height: 140px;
  background-color: rgba(255, 255, 0, 0.384);
  margin: 10px;
  display: inline-block;
  margin-top: 20px;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 40px;
  transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
}



@media screen and (max-width: 800px) {
  .square {
    width: 30%; 
    height:70px;
    display: inline-block;
    margin: auto;
    padding: auto;
  }
}



.squa, h6{
text-align: center;
color: white;
}

#ft{
  line-height: 0;
}

.social{
  width: 20px;
  height: 15px;
}


#foot #myLink{
  color: orange;
}

#foot #myLink:hover{
  color: white;
  background-color:    orange;
  text-decoration: none;
}


.tryagain{
  display: inline-block;
  width: 25%;
  color: white;
}

.selected{
  color: white;
  background-color: rgba(255, 255, 255, 0.521);
  outline: none;
}

button{
  border: none;
  background-color: none;
  height: 97%;
  font-weight: 700;
  color: rgb(247, 202, 114);
  letter-spacing: 1px;
  background-color: black;
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  outline: none;
}

button:hover{
color: white;
background-color: rgba(255, 255, 255, 0.521);

}


.clickedColor{
  text-align: center;
  font-size: 65px;
  color: white;
  font-weight: 800;
}



.great{
  text-align: center;
  font-size: x-large;
  color: white;
}


.game{
  text-align: center;
  font-size: medium;
  color: white;
  font-weight: 400;
}

@media screen and (max-width: 800px) {
  .game {
    display: none;
  }
}


.circ, .hardcirc{
  height: 30px;
  width: 30px;
  border-radius: 50px;
  background-color: white;
  display: none;
}


@media screen and (max-width: 800px) {
  .circ {
    height: 10px;
    width: 5%; 
  }
  
}



.hardcirc{
  height: 30px;
  width: 50px;
  border-radius: 50px;
  /* border: white 1px solid; */
  background-color: white;
  display: none;
}


h5{
  color: white;
}
#title{
  text-align: center;
  color:rgba(255, 255, 255, 0.521)  ;
  font-weight: 700;
  text-shadow: 5px 0px orange;
  background-color: rgba(36, 35, 35, 0.521) ;
  border-left: solid rgba(255, 255, 255, 0.521)  10px;
  border-right: solid rgba(255, 255, 255, 0.521) 10px;
  border-top: solid rgba(255, 255, 255, 0.521) 10px;
  /* color: rgb(73, 49, 4); */
  /* background-color: rgb(241, 208, 146) ; */
}

@media screen and (max-width: 800px) {
  #title {
    font-size: large;
    color: rgb(241, 208, 146);
    text-shadow: none;
  }
}


.sq{
  display: none;
}


ul li{
  display: inline-block; 
  height: 0px;
  list-style: none;
}


footer{
  background-color: rgba(255, 255, 255, 0.521) ;
  height: 15px;
  margin: auto;
}

.hardc{
  text-align: center;
}


#inp{
text-align: center;
line-height: 0%;
height: auto;
}



@media screen and (min-width: 601px) {
 .clickedColor, .game {
    font-size: 25px;
  }
}


@media screen and (max-width: 600px) {
  .clickedColor, .game {
    font-size: 25px;
  }
}


@media screen and (max-width: 800px) {
  .hardcirc {
    height: 10px;
    width: 5%; 
  }
}

@media screen and (max-width: 800px) {
  #inputDisp {
font-size: small;
  }
}

@media screen and (max-width: 800px) {
  input {
font-size: auto;
width: 35px;
  }
}

@media screen and (max-width: 800px) {
  .hard, .newColors, .easy{
    font-size: xx-small;
  }

  h6{
    font-size: xx-small;
  }
}

#playingValue{
  color: white;
}



/* ========================== Preface sec============================ */
#mainGame{
  display: none;
}

#preface{
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  height: auto;
  width: auto;
}

h4, p{
  color: white;
}

h4{
  font-weight: 800; 
  font-size: xx-large;
  cursor: pointer;
}

.writing{
  margin: 0;
  padding: 0;
}

.wrt2{
  margin-bottom: 15px;
}

#cpg{
  font-weight: 800;
  font-size: larger;
  color: rgb(241, 208, 146);
}

.prefaceButton{
  background-color: none;
  height: 97%;
  font-weight: 700;
  color: rgb(73, 49, 4);
  letter-spacing: 1px;
  background-color: rgb(241, 208, 146) ;
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  outline: white;
  border-radius: 5px;
  margin-bottom: 8px;
  margin-right: 20px;
  margin-left: 20px;

}

.prefaceButton:hover, #site:hover{
  color: white;
  background-color:    orange;
  text-decoration: none;
}

#site:hover{
  color: blue;
  background-color:    orange;
  text-decoration: none;
}

.footPreface{
  margin-top: 50px;
  border-radius: 5px;
}


#arrowBack{
float: left;
margin-left: 3px;
color: rgb(241, 208, 146);
border-right:solid 1px rgba(255, 255, 255, 0.521);
}

#arrowBack:hover{
  color: white;
  background-color:    orange;
  text-decoration: none;
}

#howTo_div{
  text-align: left;
  padding: 20px;
  border-radius: 5px;
  border-right:solid 2px rgba(255, 255, 255, 0.521);
  border-left:solid 2px rgba(255, 255, 255, 0.521);
  margin: 0 auto;
  width: auto;
  box-shadow: 4px 0px 5px rgb(241, 208, 146);
  display: none;
 /* position: absolute;
  top:0;
  justify-content: center;
  display: none; */
}

.playGuide{
display: flex;
}

#howTo_div_close, #about_pd_div_close{
  /* float:right; */
  color: rgb(241, 208, 146);
  cursor: pointer;
  text-align: center;
  text-shadow: 3px 0px 3px rgb(241, 208, 146) ;
}


strong{
  color: rgb(241, 208, 146);
  margin-top: 20px;
}

#easyPlay .mg, #hardPlay .mg{
  margin-bottom: 20px;
}

#easyPlay p, #hardPlay p, #mgg p{
padding: 0%;
margin: 0%;
}

.bgC {
  background-color: rgba(110, 106, 106, 0.521);
  border-radius: 10px;
}

#about_pd_div{
    padding: 20px;
    border-radius: 5px;
    border-right:solid 2px rgba(255, 255, 255, 0.521);
    border-left:solid 2px rgba(255, 255, 255, 0.521);
    margin: 0 auto;
    width: auto;
    box-shadow: 4px 0px 5px rgb(241, 208, 146);
    display: none;
}


@media screen and (max-width: 800px) {
  .responsive{
   font-size: 4vw;
  }
}

#red {
  color: rgb(255, 0, 0);
  font-weight: 600;
}
#green {
  color: rgb(0, 255, 0);
  font-weight: 600;
}
#blue {
  color: rgb(0, 0, 255);
  font-weight: 600;
}
#white{
  color: white;
  font-weight: 600;
}
#black{
  color: black;
  font-weight: 900;
}
#yellow{
  color: yellow;
  font-weight: 900;
}
#cyan{
  color: cyan;
  font-weight: 900;
}
#purple{
  color: purple;
  font-weight: 900;
}

.pd_logo{
  /* box-shadow: 0px 0px 3px rgb(241, 208, 146); */
  cursor: pointer;
}