*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #F9E2B3;
    font-size: 4rem;
    color: #333;
}

#title{
    padding-top: 20%;
    text-align: center;
    font-size: 7rem;
}

.gamemode{

    position:absolute;
    display: flex;
    top: 30%;
    left: 10%;

    .radio {
        margin-left:40px;
    }
    
    .radio input {
        position: absolute;
        opacity: 0;
        /* cursor: pointer; */
    }
    
    .radio label {
        position: relative;
        padding-left: 70px;
        /* cursor: pointer; */
    }
    
    .radio label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border: 2px solid #333;
        border-radius: 50%;
        background-color: white;
    }
    
    .radio input:checked + label::before {
        background-color: #333;
    }
    
    .radio input:checked + label::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #333;
        /* Adjust dot position and appearance here */
    }
}

.names{

    position: absolute;
    top: 40%;
    height: 30%;
    width: 100%;
    
    input{
        font-size: 4rem;
        width: 50%;
    }

    input:focus{
        outline: none;
        border-color: #66afe9;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #p1name{
        position: absolute;
        left: 25%;
        background-color: #fdfd96;
    }

    #p2name{
        position: absolute;
        top: 50%;
        left: 25%;
        background-color: #ffb3ba;
    }

    #p3name{
        visibility: hidden;
        position: absolute;
        top: 60%;
        left: 25%;
        background-color: #b8e2b8;
    }

    #p4name{
        visibility: hidden;
        position: absolute;
        top: 90%;
        left: 25%;
        background-color: #a7c6ed;
    }
}

#start{

    background-color: #333;
    border-radius: 5%;
    width: 30%;
    height: 7%;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 65%;
    left: 35%;

    span{
        position: absolute;
        top: 20%;
        left: 30%;
    }
}