/*  All Elements defaults    
*/
:root {
    /*
        Color Scheme Variables
    */
    --background: rgba(223, 217, 217, 0.795); /*  Main body background color */
    --CORRECT: green;
    --WRONGSPOT: orange;
}
html {
    height:100%;
    margin:0 auto;
    display:flex;
}
body {
    background-color:var(--background);
    display:inline-flex;
    margin: 0 auto;
}
h1 {
    color: black;
}
img {
    width:40px;
    margin:0 40%;
    height:80%;
}
/* First Popup: ***************************************************
    First Screen styling: The options screen at the start
*/
.firstPopupVisibile{  
    display:normal;   
}
#outerBox {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-gap:1px;

    border:3px solid rgb(187, 184, 184); 
    border-radius: 15px; 
    box-shadow: 10px 10px;     

}
#playBut{
    height:50%;
    width:80%;
    margin:auto;
    display:block;
    background-image: linear-gradient(var(--CORRECT),var(--WRONGSPOT));

}
.popUpheading {
    padding:15px 15px;
    text-align: center;
    margin:auto;
}
#instructionsPic {
    display:block;
    width:100%;
    margin:0;
    height:100%;
}
.popupInstructions {
    margin:auto;
    height:100%;
    width:100%;
    padding: 25% 0;
}

/* Main Game Page stylings: *************************************************** 
    This is where the game board and user input takes place
*/
.mainPageInvisible{
    display:none
}
.mainPageVisible{
    width:100%;
    display:normal;
}
#bannerimg {
    width:100%;
    margin: 0 auto;
}
#pageheader {
    grid-column:1/4;
    animation: slide_up 1.4s ease; 
}
#mainPage {
    display:grid;
    grid-template-columns: 1fr 2fr 1fr;  
    margin:5px auto;
    grid-gap:2px;
}
/* Left hand side panel Chosen letters section */ 
#sidePanel {
    /*  Chosen letters highlighted */
    display:grid;
    grid-template-columns: repeat(4, 1fr);

    margin:auto;
    justify-items:center;
}
#alphaLetters {
    width:50%;
}
.alphaBet,.alphaBetCorrect {
    /* tHE OUTER BOX WRAPPER OF THE LETTER */
    width:30px;
    height:30px;
    border:1px solid black;
    border-radius: 20px;
    margin:5px 15px;
    text-align:center;
    align-items:center;
    background-color: var(--background);
}
.alphaBet,#playBut,.alphaBetCorrect:hover {
cursor: pointer;
}
.alphaBetCorrect {
    background-color: var(--CORRECT);
}
.letterchoices {
    text-align:center;
    margin:0;
    padding:0;
    font-size:26px;

}
#enterButton {
    margin:2px;
    height:100%;
    width:100%;
}
#backspaceButton {
    margin:2px;
    height:100%;
    width:100%;
}

/* The BOARD/GRID PROPERTIES */
#row{
    display:grid;
    grid-gap:0;
    grid-template-columns: 20% 20% 20% 20% 20%;
    margin:5px;
    border:2px solid var(--WRONGSPOT);
    padding:5px;
    justify-items: center;
}
.box {
    width:70px;
    height:70px;
    margin:0 15px 10px;
    border-radius: 9999px;
    box-shadow: 0.2em 0.2em 0.4em #a3a7bd, -0.2em -0.2em 0.4em #fff;
    transition-property: all;
    transition-duration: 1s;
    text-align:center;    
}
.unusedBox {
    background-color: var(--background);
}
.boxUsedLocation {
    background-color: grey;
}
.boxWrongLocation {
    background-color: var(--WRONGSPOT);
}
.boxRightLocation {
    background-color: var(--CORRECT);
}
.boxLetter {
    text-align:center;
    font-size:26px;
}


/* User input */
.userInputBox {
    display:none;
}
.userInputBoxVisible {
    visibility: 'visible';
    grid-column-start:2;
    width:40%;
    margin:15px auto; 
    text-align:center;
    border-radius: 35px;
    background-color: var(--background);
    font-size:30px;
}
#userControl {
    display:grid;
    grid-template-columns: 25% 25% 25%;
}
#userButton {
    margin:0 15px;
    border-radius: 25px;
    border:1px solid grey;
}
#userButtonVisible {
    margin:0 15px;
    border-radius: 25px;
    border:1px solid grey;   
}

/* right side panel */
.bitcoinImg {
    width:40px;
}
#bitcoinSection {
    margin:auto;
    padding:15px;

}
#bitcoinSection p{
    margin:0;
    text-align:center;
    font-size:12px;
    color: gold
    
}
.rightSidePanel {
    margin:auto;
}
#wordleHelperButton {
    display:block;
    margin:auto;
    text-align:center;
}

#statistics {
    display:grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    border:1px solid gold;
    margin:0 0 15px;
}

#resetstatsBut {
    grid-column: 1/3;
    width:80%;
    margin:0 0 5px;
}
#facebookShareIcon {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
iframe {
    grid-column:2;
    margin:15px 0 15px;
}
/*

*/
#notValidWord {
    width:10%;
    height: 10px;
    position:fixed;
    background-color: red;
    border:2px solid grey;
    background-color: blue;
    top:30%;
    left:25%;
    margin:auto;
}
.notValidWordInvisible {
display:none;
}
.notValidWordVisible {
display:normal;
}
/* Animations */
@keyframes slide_up{
    0% {
        transform:translateY(200px);
    }
    100% {
        transform:translateX(0);
    }
}
.backg {
    background:white;
    animation: slide_up 1.4s ease;
}