/* Developed by Dinuth Shamen */
/* mobile view */
@media only screen and (max-width: 768px) {

    .login-box {
        background-image: url('../assets/background-1000x563.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 90vh;
        width: 100%;
        max-width: 400px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        border-style: solid;
        border-width: 5px;
        border-color: rgb(255, 255, 255);
    }

    .loading-box {
        background-image: url('../assets/loading_screen.webp');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 90vh;
        width: 100%;
        max-width: 400px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-style: solid;
        border-width: 5px;
        border-color: rgb(255, 255, 255);
    }

    /* For mobile phones: */
    .body-box {
        background-image: url('../assets/background-1000x563.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 90vh;
        width: 100%;
        max-width: 400px;
        text-align: center;
        margin-left: none;
        margin-right: none;
        overflow: hidden;
        /* right: 20%;
        left: 20%; */
        /* border-radius: 25%; */
        border-style: solid;
        border-width: 5px;
        border-color: rgb(255, 255, 255);
    }

    .post {
        position: relative;
        top: 100px;
        width: auto;
        height: auto;
        user-select: none;
    }

    .flag {
        position: relative;
        /* top: 50px; */
        bottom: 560px;
        left: 115px;
        width: 60px;
        height: 60px;
        user-select: none;
    }

    .score {
        bottom: 500px;
        left: 230px;
    }

    .upbtn {
        display: none;
    }

    #tapicon {
        bottom: 0;
        top: 200px;
        left: 214px;
    }

    #scoreboard {
        position: fixed;
        bottom: 70px;
        left: 76%;
        transform: translateX(-50%);
        width: 140px;
        height: 140px;
        background-image: url("../assets/scoreBoardButton.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
    }

}

@media only screen and (max-width: 375px) {

    #scoreboard {
        position: fixed;
        bottom: 32px;
        left: 76%;
        transform: translateX(-50%);
        width: 140px;
        height: 140px;
        background-image: url("../assets/scoreBoardButton.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
    }
}

/* desktop view */
@media only screen and (min-width: 768px) {


    .post {
        position: relative;
        top: 100px;
        width: auto;
        height: auto;
        margin-top: 10px;
        user-select: none;
    }

    .login-box {
        background-image: url('../assets/background-1000x563.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 90vh;
        width: 100%;
        max-width: 400px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        border-style: solid;
        border-width: 5px;
        border-color: rgb(255, 255, 255);
    }

    .loading-box {
        background-image: url('../assets/loading_screen.webp');
        background-size: 100% 100%;
        height: 90vh;
        width: 100%;
        max-width: 400px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        display: flex;
        justify-content: center;
        /* Centers the image horizontally */
        align-items: center;
        /* Centers the image vertically */
        border-style: solid;
        border-width: -10px;
        border-color: rgb(255, 255, 255);
    }

    .body-box {
        background-image: url('../assets/background-1000x563.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 90vh;
        width: 100%;
        max-width: 400px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        border-style: solid;
        border-width: -10px;
        border-color: rgb(255, 255, 255);
    }

    .upbtn {
        display: block;
    }


    .score {
        bottom: 500px;
        left: 230px;
    }

    #tapicon {
        position: fixed;
        bottom: 336px;
        right: 308px;
        height: 150px;
        width: 162px;
        overflow: hidden;
        display: none;
        background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
    }

    #scoreboard {
        position:absolute;
        bottom: 62px;
        left: 63%;
        transform: translateX(-50%);
        width: 140px;
        height: 140px;
        background-image: url("../assets/scoreBoardButton.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-color: transparent;
        border: none;
        outline: none;
        cursor: pointer;
    }

}

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    background-image: url('../assets/game_back.webp');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    cursor: pointer;
    margin: 2px;
}


.post {
    position: relative;
    top: 50px;
    height: 1000;
    width: 110px;
    margin-top: 10px;
    user-select: none;
}

.flag {
    position: relative;
    /* top: 50px; */
    bottom: 560px;
    left: 115px;
    width: 60px;
    height: 60px;
    user-select: none;
}

.man {
    position: relative;
    right: 130px;
    /* top: 300px; */
    width: 100px;
    user-select: none;
    transition: top 0.3s ease;
}

.upbtn {
    position: relative;
    width: 150px;
    height: 50px;
    bottom: 50px;
    left: 100px;
    right: 100px;
    background-image: url("../assets/up.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;

}

.start {
    position: relative;
    bottom: 727px;
    width: 150px;
    height: 50px;
    left: 100px;
    background-image: url("../assets/startbtn.png");
    background-size: 100% 100%;
    /* Ensure the image covers the button */
    background-repeat: no-repeat;
    /* Prevent image repetition */
    background-color: transparent;
    border: none;
    /* Remove button border */
    outline: none;
    /* Remove button outline */
    cursor: pointer;
}

.start:active {
    transform: scale(0.8);
    /* Reduce the size to 0.5 times when button is active (clicked) */
}

.upbtn:active {
    transform: scale(0.8);
    /* Reduce the size to 0.5 times when button is active (clicked) */
}

.start:hover {
    box-shadow: 0 0 10px rgba(235, 252, 81, 0.677);
    background-color: transparent;
    /* Add shadow effect when hovered over */
}

.upbtn:hover {
    box-shadow: 0 0 10px rgba(235, 252, 81, 0.677);
    background-color: transparent;
    /* Add shadow effect when hovered over */
}

.start:disabled {
    opacity: 0.5;
    /* Reduced opacity for disabled state */
    cursor: not-allowed;
    /* Change cursor to not-allowed */
}


.upbtn:disabled {
    opacity: 0.5;
    /* Reduced opacity for disabled state */
    cursor: not-allowed;
    /* Change cursor to not-allowed */
}


.flagman {
    position: relative;
    right: 100px;
    width: 100px;
}

.congratsImg {
    display: none;
    position: relative;
    bottom: 300px;
    width: 350px;
    height: auto;
}

.score {
    position: relative;
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    background-image: url("../assets/score.png");
    background-size: 100% 100%;
    font-family: 'Courier New', Courier, monospace;
    font-weight: lighter;
    text-align: center;
    font-size: 20px;
    color: white;
    height: 80px;
    width: 150px;
    user-select: none;
}


.timing {
    position: relative;
    bottom: 500px;
    left: 100px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    font-size: 50px;
    color: white;
    height: 50px;
    user-select: none;
}



h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 40px;
    color: white;
    user-select: none;
}

.alert {
    position: inherit;
    justify-content: center;
    height: 400px;
    height: 200px;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
}

#timing_lbl {
    position: relative;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 20px;
    color: white;
    user-select: none;
    bottom: 480px;
    left: 100px;
}

#login {
    position: relative;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    background-image: url("../assets/notifyBoard.png");
    background-size: 100% 100%;
    text-align: center;
    height: 300px;
    width: 100%;
    user-select: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 30px;
    color: rgb(79, 54, 3);
    padding-top: 200px;
}



#notify {
    position: relative;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    background-image: url("../assets/notifyBoard.png");
    background-size: 100% 100%;
    text-align: center;
    height: 300px;
    width: 100%;
    user-select: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 20px;
    color: white;
    padding-top: 200px;

}

.alertheading {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 20px;
    color: rgba(111, 68, 24, 0.729);
}

.loading-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    /* Adjust width as needed */
    height: 20px;
    /* Adjust height as needed */
    background-color: #ccc;
    /* Color of the loading bar */
}

.login-box>h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 40px;
    color: rgba(111, 68, 24, 0.729);
}

form {
    /* Add some margin for spacing */
    position: relative;
    padding-left: 60px;
    padding-right: 60px;
}


.input {
    display: block;
    /* Display input elements as block to stack vertically */
    width: 100%;
    /* Set the width to fill the container */
    padding: 10px;
    /* Add padding for spacing inside the input */
    margin-bottom: 10px;
    /* Add margin between inputs */
    border: 1px solid #ccc;
    /* Add a border */
    border-radius: 5px;
    /* Add border radius for rounded corners */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
}

.input:focus {
    outline: none;
    /* Remove the default focus outline */
    border-color: #542e12e8;
    /* Change border color on focus */
    box-shadow: 0 0 5px rgba(122, 87, 17, 0.5);
    /* Add a shadow on focus */
}

.submit {
    width: 150px;
    height: 50px;
    background-image: url("../assets/submitbutton.png");
    background-size: 100% 100%;
    /* Ensure the image covers the button */
    background-repeat: no-repeat;
    /* Prevent image repetition */
    background-color: transparent;
    border: none;
    /* Remove button border */
    outline: none;
    /* Remove button outline */
    cursor: pointer;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 20px;
    color: white;
    transition: transform 0.3s;
    /* Add transition for smooth scaling */
}

.submit:active {
    transform: scale(0.9);
}

.avatar {
    position: relative;
    width: 60px;
    /* Adjust the width as needed */
    height: 60px;
    /* Adjust the height as needed */
    border-radius: 50%;
    /* Make the image circular */
    border: 2px solid #fff;
    /* Add a white border around the image */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    /* Add a shadow effect */
    object-fit: cover;
    /* Ensure the image covers the entire container */

}

.profile {
    position: relative;
    bottom: 630px;
    left: 230px;
    width: 40%;
    background-color: #fff;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
    padding-top: 5px;
    justify-content: center;
    border-style: solid;
    border-color: #c3782dce;
    border-width: 2px;
}

.profiletxt {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 15px;
    color: rgb(33, 33, 33);
    margin-left: 5px;
    text-align: center;
    margin-top: 10px;
}

#game_box {
    display: none;
}

#game_notifications {
    display: none;
}

#login_box {
    display: none;
}

.attempts {
    position: relative;
    object-fit: cover;
    width: 100px;
    height: 20px;
    background-color: rgb(255, 153, 0);
    border-radius: 4px;
    margin-bottom: 30px;
    text-align: center;
    padding: 3px;
    margin-left: 30px;
    color: white;
}

.place {
    position: relative;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 30px;
    bottom: 450px;
    color: rgba(255, 255, 255, 0.729);
}


.scoreboard {
    height: 100px;
    width: 100%;
    position: relative;
    background-image: url("../assets/scoreboardNew.png");
    background-size: 100% 100%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: lighter;
    text-align: center;
    font-size: 15px;
    color: rgba(32, 32, 32, 0.76);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

td>.place {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #7a4006;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    text-align: center;
    color: rgb(46, 46, 46);
    bottom: 0px;
    right: 0px;
    display: flex;
    background-color: rgba(255, 255, 255, 0.729);
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
}

td>.scoreTime {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 10px;
    margin-left: 30px;
}

table {
    width: 80%;
}

span {
    position: relative;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    color: red;
    height: 80px;
    width: 300px;
    border-radius: 20px;
    background-color: white;
    padding: 20px;
}

#audioStop {
    position: fixed;
    top: 20px;
    left: 20px;
    height: 50px;
    width: 50px;
    background-image: url("../assets/speaker.png");
    background-size: 100% 100%;
    overflow: hidden;

}

#tapicon {
    position: fixed;
    bottom: 336px;
    right: 308px;
    height: 150px;
    width: 162px;
    overflow: hidden;
    display: none;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
}


.backbutton {
    width: 140px;
    height: 90px;;
    background-image: url("../assets/backbutton.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.footer{
    position:fixed;
    bottom:0;
    text-align: center;
    background-color: black;
    color:#fff;
    font-family:'Courier New', Courier, monospace;
    height:20px;
    width:100%;
    left:0;
    right:0;
    padding:2px;
}

.instructions{
    font-family:'Courier New', Courier, monospace;
    font-size: 15px;
    max-width:400px;
    text-align: left;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    margin-left:40px;
    margin-right:40px;
    color:black;
}


a {
    color: #ff0000; /* Set the desired font color */
}