/*
font-family: 'Merienda', cursive;
font-family: 'Montserrat', sans-serif;
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: inherit;
}
body {
    background-color: #2E2E2E;
    font-family: 'Montserrat', sans-serif;
}


.logoContainer {
    --logoBlockSize: 65px;
    --animationDuration: 1s;
    --animationOutPos: 2%;
    --animationDefaultPos: 10%;
}

input[type=text] {
    width: 100%;
    padding: 10px 14px;
    margin: 4px 0;

    border: 2px solid #bbb;
    border-radius: 8px;
    outline: none;
    transition: border 0.4s;
}
input[type=text]:focus {
    border: 2px solid #555;
}

/*
////////////////////////////////////////////////////////////////////////////////
//////////                          Main
////////////////////////////////////////////////////////////////////////////////
*/

main {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100vh;
}

.main {
    background-color: #525464;    
    height: 80%;
    width: 80%;
}

.mainPageGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    height: 60%;
}

.main .title {
    font-family: 'Merienda', cursive;
    font-size: 100px;
    color: #EFEFEF;
}

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}
/*
////////////////////////////////////////////////////////////////////////////////
//////////                          Logo
////////////////////////////////////////////////////////////////////////////////
*/
.logoContainer {
    position: relative;
    height: 14rem;
    width: 14rem;
}

.logoBlockCommon {
    position: absolute;
    width: var(--logoBlockSize, 65px);
    height: var(--logoBlockSize, 65px);
    border-radius: 5px;
    transform: rotate(45deg);

    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-duration: var(--animationDuration, 5s);
}
.redLogo {
    background: #EF5555;
    left: calc(50% - var(--logoBlockSize, 65px) / 2);
    top: var(--animationDefaultPos);
    animation-name: animLogoRed;
}
.yellowLogo {
    background: #FFF50F;
    top: calc(50% - var(--logoBlockSize, 65px) / 2);
    right: var(--animationDefaultPos);
    animation-name: animLogoYellow;
}
.greenLogo {
    background: #00CC5E;
    left: calc(50% - var(--logoBlockSize, 65px) / 2);
    bottom: var(--animationDefaultPos);
    animation-name: animLogoGreen;

}
.blueLogo {
    background: #0066FF;
    top: calc(50% - var(--logoBlockSize, 65px) / 2);
    left: var(--animationDefaultPos);
    animation-name: animLogoBlue;
}

/*
////////////////////////////////////////////////////////////////////////////////
//////////                 Animations for Logo
////////////////////////////////////////////////////////////////////////////////
*/

@keyframes animLogoRed {
    0%   { top: var(--animationOutPos);     }
    25%  { top: var(--animationDefaultPos); }
    50%  { top: var(--animationDefaultPos); }
    75%  { top: var(--animationDefaultPos); }
    100% { top: var(--animationOutPos);     }
}
@keyframes animLogoYellow {
    0%   { right: var(--animationDefaultPos); }
    25%  { right: var(--animationOutPos);     }
    50%  { right: var(--animationDefaultPos); }
    75%  { right: var(--animationDefaultPos); }
    100% { right: var(--animationDefaultPos); }
}
@keyframes animLogoGreen {
    0%   { bottom: var(--animationDefaultPos); }
    25%  { bottom: var(--animationDefaultPos); }
    50%  { bottom: var(--animationOutPos);     }
    75%  { bottom: var(--animationDefaultPos); }
    100% { bottom: var(--animationDefaultPos); }
}
@keyframes animLogoBlue {
    0%   { left: var(--animationDefaultPos); }
    25%  { left: var(--animationDefaultPos); }
    50%  { left: var(--animationDefaultPos); }
    75%  { left: var(--animationOutPos);     }
    100% { left: var(--animationDefaultPos); }
} 

/*
////////////////////////////////////////////////////////////////////////////////
//////////                          Button
////////////////////////////////////////////////////////////////////////////////
*/

.buttonContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 6rem;
    width: 28rem;
}
.button p {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    color: #efefef;
    cursor: default;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem;

    background: #3282B8;
    border-radius: 30px;
    transition: background 0.15s;
}

.button:hover {
    background: #58A6DB;
}

/*
////////////////////////////////////////////////////////////////////////////////
//////////                    Join room style
////////////////////////////////////////////////////////////////////////////////
*/

.roomDialog {
    position: absolute;
    display: none;  /* None so that it is not rendered initially */

    flex-direction: column;
    align-items: center;
    /* justify-content: space-between; */

    left: 50%;
    /* bottom: 12%; */
    top: 60%;
    min-height: 23rem;
    min-width: 25rem;

    transform: translate(-50%, -50%);

    background: #1B262C;
    box-shadow: 0px 0px 5px 8px rgba(0, 0, 0, 0.25);

}

/*
////////////////////////////////
//////////  Header
////////////////////////////////
*/
.roomDialog .roomHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.0rem;

    width: 100%;
    min-height: 3rem;
    background: #082D46;
    box-shadow: 0px 4px 3px 1px rgba(0, 0, 0, 0.25);
}

.roomDialog .roomHeader p {
    font-size: 25px;
    padding: 0rem 1rem;
    color: #efefef;
}

.roomDialog .roomHeader .roomCloseButton {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;

    background: #D31C1C;
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.25);
    margin: 0 0.5rem;
    transition: background 0.15s
}
.roomDialog .roomHeader .roomCloseButton:hover {
    background: #FFAAAA;
}
/*
////////////////////////////////
//////////  Players
////////////////////////////////
*/

.playersContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    height: 100%;
    width: 100%;
}

.roomDialogPlayer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45%; /* Note: this could be 100% as well so that it occupies the entire screen*/
    background: #0F4C75;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 0.6rem 15%;
    margin: 0px 10px;
    margin-bottom: 10px;
}

.playersRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.playersContainer .roomDialogPlayer p {
    font-size: 20px;
    text-align: center;
    color: #efefef;
}

.roomDialogPlayer .roomDialogKickPlayerBtn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 20px;
    height: 6px;

    transform: translateY(-50%);
    cursor: default;

    font-size: 60px;
    background: #D31C1C;
    transition: background 0.15s;
}
.roomDialogPlayer .roomDialogKickPlayerBtn:hover {
    background: #FFAAAA;
}

/*
////////////////////////////////
//////////  Start game
////////////////////////////////
*/

.roomStartGameButton {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    bottom: 0.5rem;
    padding: 1rem 1rem;

    background: #3282B8;
    border-radius: 30px;
    min-width: 10rem;

    transition: background 0.15s;
}

.roomStartGameButton p {
    padding: 0rem 0.5rem;
    font-size: 22px;
    cursor: default;
    color: #efefef;
}

.roomStartGameButton:hover {
    background: #58A6DB;
}

/*
////////////////////////////////////////////////////////////////////////////////
//////////                    Enter name dlg
////////////////////////////////////////////////////////////////////////////////
*/

.enterNameDlg {
    position: absolute;
    display: none;  /* Set this to none initially so the dlg doesnt show up*/
    flex-direction: column;

    align-items: center;
    /* justify-content: space-between; */

    left: 50%;
    top: 55%;
    min-height: 7rem;
    min-width: 15rem;
    transform: translateX(-50%);

    background: #1B262C;
    box-shadow: 0px 0px 5px 8px rgba(0, 0, 0, 0.25);
}

.enterName_errorMsg {
    display: none;
    font-size: 18px;
    color: #FF7070;
    text-align: left;

    padding: 0.7rem 0;

    max-width: 25vw;    /* Prevent the error message from getting too too large*/
}
/*
////////////////////////////////
//////////  Close button
////////////////////////////////
*/
.enterName_CloseBtnContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.4rem 0rem;
    background: #0F4C75;
    margin-bottom: 0.5rem;
}

.enterName_CloseBtnContainer p {
    padding-left: 0.8rem;
    font-size: 20px;
    font-weight: bold;
    color: #efefef;
}

.enterName_CloseButton {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    
    background: #D31C1C;
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.25);
    margin: 0 0.5rem;
    transition: background 0.15s;
}

.enterName_CloseButton:hover {
    background: #FFAAAA;
}

/*
////////////////////////////////
////////// Input fields
////////////////////////////////
*/

.enterName_InputContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0rem 1rem;

    height: 80%;
    width: 100%;
}

.enterName_InputContainer form {
    width: 100%;
}

.enterName_InputContainer label {
    font-size: 20px;
    color: #efefef;
}

.enterName_InputContainer input {
    background: #3F3F3F;
    border-color: #555;
    color: #efefef;
}

.enterName_InputContainer input:focus {
    border-color: #999;
}

.enterName_Name, .enterName_Code{
    display: flex;
    flex-direction: column;
    margin-bottom: 0.7rem;
}



/*
////////////////////////////////
//////////  Enter button
////////////////////////////////
*/

.enterName_enterBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;

    background: #3282B8;
    border-radius: 20px;

    margin-bottom: 0.7rem;
    transition: background 0.15s;
}
.enterName_enterBtn p {
    font-size: 20px;
    color: #efefef;
    cursor: default;
}

.enterName_enterBtn:hover {
    background-color: #58A6DB;
}