/*Modal styles*/

    /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  /*z-index: 1; */
  /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #f6dbe4;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modinp {
    height: 35px;
    border: 2px solid #7e2543;
    background: antiquewhite;
    padding: 1%;
}

/*modal styles end*/


.wordlehead {
    box-shadow: 4px 1px 8px 1px #7d7979;
    /* z-index: 999999; */
    position: relative; 
    /* background: #FFEB3B; */
    background-image: linear-gradient(45deg, #ffe6e65e, #ffe6e63d), url(https://png.pngtree.com/background/20210716/original/pngtree-baby-pink-background-red-pentagon-pattern-picture-image_1351597.jpg);
    background-size: contain;
}

.gamebox {
    box-shadow: 1px 0px 6px 0px dimgrey;
    border-radius: 32px;
    /* padding: 0px; */
    background: white;
}

.gamebox1 {
    box-shadow: 1px 0px 6px 0px dimgrey;
    border-radius: 32px;
    background: white;
}

.wordle-body {
    padding-top: 5%;
    padding-bottom: 5%;
    background: url("../images/confetti.jpg");
   
    /* background-image: linear-gradient(45deg, #ffe3f8, #d9abce78 100px), url(../images/back-bg.jpg); */
    /* background-size: cover; */
    /* background-image: linear-gradient(45deg, #ffe3f8, #d9abce91 100px), url(../images/tamil-letter.jpg); */
}
.wordle-menu {
    display: flex;font-size: 1.2rem;
    font-weight: bold;    color: rebeccapurple;    padding-top: 5%;    float: right;
}
.wordle-menu li {
    background: #6b2d5c;
    color: white;
    border-radius: 5px;
    padding: 2px;
    margin-right: 5px;
}
.wordle-menu a {
    color: white;
    text-decoration: none;
}
.title-bar {
    /* background: white; */
    padding:2% 0;
    border-bottom: 1px solid lightgray;
}
.title-bar-bot {
    /* background: white; */
    padding:2% 0;
    border-top: 1px solid lightgray;
}
.wordleh-two {
    text-align: center;
    font-size:1.4rem;
    font-weight: bold;
}
.play-btn {
    background: #5D2E46;
    color: white !important;
    text-decoration: none !important;
    padding: 1.3%;
    border-radius: 6px;
}
.wordle-center {
    place-items: center;
    display: grid;
    min-height: 10vh;
}

@media screen and (max-width: 750px) {
.mob-padd {
    margin:2% !important;
}
}

.game-plan {
    height: 401px;
    background: #ffe3f8 !important;
    overflow-y: scroll;
    padding: 3%;
    /* margin-left: 2%; */
}

.rules li {
    margin-bottom: 3%;
}

.wordle-footer {
    background: #5D2E46;
    /* margin: 64px 0 0; */
    position: relative;
}

.wordle-footer:before {
    background: #5D2E46;
    clip-path: polygon(0 100%, 30% 0, 36% 100%, 100% 0, 100% 100%);
    height: 26px;

    bottom: 100%;
    /* clip-path: polygon(0 100%, 50% 0, 60% 100%, 100% 0, 100% 100%); */
    content: "";
    /* height: 16px; */
    left: 0;
    margin-bottom: -1px;
    position: absolute;
    right: 0;
}

.gameboardcolor {
    font-size: 1rem;
    font-weight: 500;
    list-style-type: none;
}
.gameboard li {
    list-style-type: none;
    background-image: url(../images/bullet-icon.png);
    background-repeat: no-repeat;
    line-height: 30px;
    padding-left: 30px;
    font-size: 1rem;
    font-weight: 500;
}