@font-face {
    font-family: "abold";
    src: url("../font/Agdasima-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "areg";
    src: url("../font/Agdasima-Regular.ttf") format("truetype");
}


* {
    margin: 0;
    padding: 0; 
    box-sizing: border-box; 
    user-select: none;
}

html,
body {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background: url(../assets/bgtest.jpg);
    background-size: cover;
}

.main {
    display: flex;
    flex-direction: column;
    margin-left: 1%;
    width: 24vw;
    height: 42vw;
    display: none;
    animation: main 1s ease-in-out;

    .header {
        display: flex;
        align-items: center;
        width: 90%;
        height: 9%;
        background: linear-gradient(
            180deg,
            rgba(17, 19, 23, 0.4) 0%,
            rgba(17, 19, 23, 0.8) 100%
        );

        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.5vw;
            height: 2.5vw;
            margin-left: 3%;

            img {
                width: 100%;
                height: 100%;
            }
        }
        
        .headerText {
            display: flex;
            align-items: center;
            justify-content: end;
            margin-right: 3.5%;
            margin-left: 3%;
            width: 82.3%;
            height: 100%;
            font-family: abold;
            color: white;
            font-weight: 700;
            font-size: 2vw;
        }
    }

    .selectJob {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 60%;
        margin-top: 2%;
        background: linear-gradient(
            180deg,
            rgba(17, 19, 23, 0.4) 0%,
            rgba(17, 19, 23, .8) 100%
        );

        .job {
            display: flex;
            flex-direction: column;
            width: 95%;
            height: 47.5%;
            background: linear-gradient(
                180deg,
                rgba(17, 19, 23, 0.4) 0%,
                rgba(17, 19, 23, .8) 100%
            );
            margin-left: 2.5%;
            margin-top: 1%;

            .img {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 95%;
                height: 50%;
                margin-left: 2.5%;
                margin-top: 1%;
                position: relative;
                img {
                    filter: brightness(70%);
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                p {
                    position: absolute;
                    color: rgba(255, 255, 255, 0.63);
                    font-family: areg;
                    font-size: 1.3vw;
                    font-weight: 700;
                }
            }

            .text {
                width: 95%;
                height: 15%;
                margin-top: 2%;
                color: rgba(255, 255, 255, 0.63);
                font-family: areg;
                font-size: 0.8vw;
                margin-left: 2.5%;
            }

            .contain {
                display: flex;
                width: 95%;
                height: 13%;
                margin-left: 2.5%;
                margin-top: 5%;

                .price, .max, .start {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: greenyellow;
                    font-family: areg;
                    font-size: 0.8vw;
                    border-radius: 0.2vw;
                    width: 4vw;
                    height: 100%;
                    background: rgba(172, 255, 47, 0.178);
                }

                .max {
                    color: red;
                    width: 4vw;
                    height: 100%;
                    background: rgb(255, 0, 0, .178);
                    margin-left: 3%;
                }

                .start {
                    cursor: pointer;
                    width: 10.5vw;
                    margin-left: 2%;
                }
            }
        }

        #garden {
            margin-top: 2.5%;
        }

        .footer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: areg;
            color: #222222;
            font-size: 0.7vw;
            font-weight: 600;
            width: 100%;
            height: 4%;
            margin-top: 3%;
            background-color: rgb(129, 129, 129);
        }
    }

    .level {
        display: flex;
        flex-direction: column;
        width: 90%;
        height: 15%;
        background: linear-gradient(
            180deg,
            rgba(17, 19, 23, 0.7) 0%,
            rgba(17, 19, 23, 1) 100%
        ), url(../assets/header.png);
        background-size: cover;
        margin-top: 1%;



        .textArea {
            width: 90%;
            height: 3vw;
            color: rgba(255, 255, 255, 0.747);
            font-family: areg;
            font-weight: 500;
            font-size: 0.7vw;
            margin-left: 5%;
            margin-top: 2%;
        }

        .showLevel {
            display: flex;
            justify-content: space-between;
            width: 90%;
            margin-left: 5%;
            margin-top: 3%;

            .levelText {
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: abold;
                font-size: 0.7vw;
                color: white;
                width: 1.5vw;
                height: 1.5vw;
                border-radius: 50%;
                background: rgba(17, 19, 23, 0.4);
                border: 0.1vw solid rgb(135, 190, 5);
            }

            .playerName {
                font-family: abold;
                font-size: 0.7vw;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                width: 6.5vw;
                height: 1.5vw;
                background: rgba(17, 19, 23, 0.4);
            }

            .xp {
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: abold;
                font-size: 0.7vw;
                color: rgba(255, 255, 255, 0.747);
                width: 5vw;
                height: 1.5vw;
                background: rgba(17, 19, 23, 0.4);
                margin-left: 3%;
                border-radius: 0.2vw;
                border: 0.1vw solid rgb(17, 19, 23, 0.3);
            }
        }


    }
}

.levelUp {
    display: flex;
    align-items: center;
    width: 20vw;
    height: 3vw;
    background: rgb(0, 0, 0);
    border-radius: 0.3vw;
    margin-left: -0.5%;
    animation: promoted 1s ease-in-out;
    display: none;

    .levelText {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: abold;
        font-size: 0.7vw;
        color: white;
        width: 1.5vw;
        height: 1.5vw;
        border-radius: 50%;
        margin-left: 5%;
        background: rgba(17, 19, 23, 0.4);
        border: 0.1vw solid rgb(135, 190, 5);
    }

    .levelUpText {
        display: flex;
        align-items: center;
        font-family: abold;
        color: white;
        width: 13.5vw;
        height: 100%;
        margin-left: 3%;
        background: rgba(17, 19, 23, 0.4);
        font-size: 1vw;
    }
}

@keyframes main {
    0% {
        opacity: 0;
    }
}

@keyframes promoted {
    0% {
        margin-left: -20%;
    }
}