*{
    user-select: none;
    font-family: 'undertale-font', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

body{
    margin: 0px;
    padding: 0px;
    background-color: #3c3c3c;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas{
    background-color: #000000;
}

@font-face {
  font-family: undertale-font;
  src: url(assets/fonts/PixelOperator-Bold.ttf);
}

.menu{
    position: absolute;
    top: 20vh;
    left: 15vw;
    width: 70vw;
    height: 60vh;
    display: grid;
    grid-template-rows: 0.8fr repeat(3, 1fr);
    grid-template-columns: 60%;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #222831;
}

.item{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.menu > div{
    color: #ffffff;
    padding: 5px 20px 5px 20px;
    align-self: center;
    justify-self: center;
    width: fit-content;
    gap: 10px;
}



.valueHolder{
    display: grid;
    grid-template-columns: repeat(2, min-content);
    align-items: center;
    justify-items: center;
    height: fit-content;
    height: fit-content;
}
.CheckBoxComponent input[type="checkbox"]:disabled {
  accent-color: red; /* Checkbox rengi burada belirleniyor */
  cursor: not-allowed;
}


.selected{
    letter-spacing: 0px;
    background-color: #ffffff;
    color: #000000 !important;
    transition: color 0.4s cubic-bezier(.04,.57,.2,.98) ;
    transition: background-color 2s cubic-bezier(0,.72,0,.92);
    transition: letter-spacing 2s cubic-bezier(0,.72,0,.92);
    transform: scale(1.05);
}

.menu-title{
    color: #8dc6c1;
    font-size: 2rem;
    letter-spacing: 0px;
    text-align: center;
}