@font-face {
    font-family: cool;
    src: url("../fonts/coolvetica\ rg.ttf");
}
@font-face {
    font-family: cool_it;
    src: url("../fonts/coolvetica\ rg\ it.ttf");
}

body {
    margin: 0px;
 background-color: #242424;
}

#body-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
   
    align-items: center;
}

/*header*/

#header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #404040;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .3);
    margin: 1em;
    border-radius: 0.625rem;
    width: 95vw;
}
  
#heading-container {
    padding: 1.25rem;
    display: flex;
    align-items: baseline;
}

#heading {
    color: whitesmoke;
    font-size: 3.5em;
    font-family: cool_it;
}


#subHeading {
    padding-left: 0.5em;
    color: white;
    font-size: 1.5em;
    font-family: cool_it;
}

#reload_button {
    padding: 0.8rem;
    border: 1px solid #535252;
    border-radius: 0.625rem;
    box-shadow: 0px 0px 4px 0px #2a2a2a;
}

.fas.fa-retweet{
    color: #b0aeae;
    font-size: 1.3rem;
}

/*guess container*/

#guess-container-all {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    height: 100%;
}


.guessContainer {
    display: grid;
    grid-template-columns: 2fr  1fr;
    width: 95vw;
    gap: 0.3em;
    height: 100%;
}

.colorRow {
    background-color: #424242;
    border: 1px solid gray;
    display: flex;
    align-items: center;
    border-radius: 10px;
    justify-content: space-evenly;
    padding: 0.8rem;
}

.color_field > .fas.fa-circle {
    color: rgba(255, 255, 255, 0.363);
}

.resultContainer {
    display: flex;
    border: 1px solid whitesmoke;
    padding: 0.625rem;
    background-color: grey;
    border-radius: 0.625rem;
    justify-content: space-evenly;
    align-items: center;
}

.result_field > .fas.fa-circle {
    font-size: 2.8em !important;
    color: rgba(255, 255, 255, 0.363);
}

/*Choose Container*/

#chooseColors_container {
    display: grid;
    width: 95vw;
    margin: 1em;
}

#secretContainer{
    display: grid;
    width: 95vw;
    margin: 1em;
    margin-top: 0 !important;
}

#rowColor_inner {
    padding: 1.5rem;
    background-color: whitesmoke;
    border: 1px solid gray;
    display: flex;
    align-items: center;
    border-radius: 0.625rem;
    justify-content: space-evenly;
}

#secretColorRow{
    padding: 1.5rem;
    background-color: whitesmoke;
    border: 1px solid gray;
    display: flex;
    align-items: center;
    border-radius: 0.625rem;
    justify-content: space-evenly;
}

.guessCode_color_field {
    color: #242424;
}

.fas.fa-circle {
    font-size: 3.5em;
}


/* fhw changes  */

.round {
    width: 50%;
    height: 50%;
    max-width: 50px;
    max-height: 50px;
    background: blue;
    border-radius: 50%;
}


.rightColorPlace{
    color: black !important;
}

.rightColor{
    color: white !important;
}

.mask{
    position: absolute;
    top: 0;
    width: 95vw;
    height: 80%;
    top: 20%;
    background: transparent;
}

.hidden {
    display: none !important;
}

.disabled{
    color:rgb(175, 175, 175) !important;

}


/*PopUP Category*/

#pop-outer{
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    justify-content: center;
    align-items: center;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.795);
}

#pop-container{
    height: fit-content;
    position: absolute;
    display: grid;
    border-radius: 0.625rem;
    background-color: #404040;
    width: 95vw;
}

.current {
    background-color: #229e9e7c !important;
  }
  

#category-container, #category-container2 {
    width: 95vw;
    border-radius: 0.625rem;
    margin-bottom: 2rem;
    background-color: #404040;
}

#pop-inner{
    display: grid;
    row-gap: 1.5rem;
    justify-content: center;
    padding: 0.5rem;
}

  
#inner-container1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.5rem;
    text-align: center;
    gap: 1rem;
    height: 8vh; 

}

#inner-container2{
    display: grid;
   
    padding: 0.5rem;
    text-align: center;
    justify-content: center;
    gap: 1.5rem;

}

#container-inner-category {
    display: flex;
    height: 15vh;
    justify-content: space-between;
    flex-direction: column;
}

#container-inner-category2 {
    display: none;
    justify-content: space-between;
    flex-direction: column;
    height: fit-content;
}

.category {
    color: white;
    font-size: 1.5rem;
    background-color: #6868687c;
    padding: 0.5rem;
    border-radius: 0.625rem;
    font-family: cool_it;
    align-items: center;
    display: flex;
    justify-content: center;
}

#icon_category2, #icon_category3{
    color: white;
    font-size: 1.5rem;
    background-color: #6868687c;
    padding: 0.5rem;
    border-radius: 0.625rem;
    font-family: cool_it;
   align-items: center;
   justify-content: space-evenly;
    display: flex;
  
    width: 60vw;
}

.b {
    background-color: #6868687c !important;
    width: 4rem;
}

.fas.fa-check {
    font-size: 2rem;
}

.fas.fa-times {
    font-size: 2rem;
}

.buttonArea {
    display: flex;
    padding: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

#text_cate {
    font-size: 1.5em;
    color: white;
    font-family: cool_it;
}

#code {
    font-size: 1.5em;
    color: white;
    font-family: cool_it;
}

.submitButton{

    color: white;
    box-shadow: 4px 4px 10px #292929;
    border:none;
    text-shadow: 1px 1px 2px #0a0a0a;
    
    border-radius: 0.625rem;
    font-family: cool_it;
}

.closingButton{

    box-shadow: 4px 4px 10px #292929;
    visibility: hidden;
    text-shadow: 1px 1px 2px #0a0a0a;
    color: white;
    border-radius: 0.625rem;
    border:none;

    font-family: cool_it;
}
  
.versusField{
    font-size: 1rem !important;
    color: rgb(175, 175, 175);
}



.colorOptions{
    font-size: 1rem !important;
}

.open{
    display: flex !important;
}

.notChoosenByConfirmed{
    display: none !important;
}

.button_disabled{
    display: none !important;
}