/* 돈 변수 이미지 */
#money-image-variable {
    width: 125px; height: 70px;
}

/* 돈 변수 */
#p-money-variable {
    font-size: 200%; /* 폰트 크기 설정 */
    margin: auto;
    margin-top: 10px;
    margin-left: 10px;
}

#money-input {
    font-size: 18px; /* 폰트 크기 설정 */
    border-radius: 5px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
    outline: none;
    width: 300px; height: 50px;
    background-color: white; /* Element 배경 색상 설정 */
}

.num-btns {
    width: 100px; height: 100px;
    font-size: 25px; /* 폰트 크기 설정 */
    background-color: white; /* Element 배경 색상 설정 */
    border: none;
}

.num-btns:hover {
    font-size: 30px; /* 폰트 크기 설정 */
}

#num-btns-clear-all {
    width: 100px; height: 100px;
    font-size: 15px; /* 폰트 크기 설정 */
    background-color: white; /* Element 배경 색상 설정 */
    border: none;
}

#num-btns-clear-all:hover {
    font-size: 16.6799993515014px; /* 폰트 크기 설정 */
}

#betting-amount-p {
    display: flex; margin: auto;
    font-size: 36px; /* 폰트 크기 설정 */
}

#continue-button, #stop-button, #retry-button {
    width: 100px; height: 50px; /* 버튼 크기 설정 */
    font-size: 20px; /* 폰트 크기 설정 */
}

#game-result-p {
    font-size: 25px; /* 폰트 크기 설정 */
}

.start-button {
    width: 100%;
    font-size: 24px; /* 폰트 크기 설정 */
    background-color: #4CAF50; /* Element 배경 색상 설정 */
    border: none;
    color: white; /* 폰트 색상 설정 */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s, transform 0.3s;
  }

  .start-button:hover {
    background-color: #45a049; /* Element 배경 색상 설정 */
  }

  .start-button:active {
    transform: scale(0.95);
  }

.bankrupt-start-button {
    width: 100%;
    font-size: 24px; /* 폰트 크기 설정 */
    background-color: #FF0000; /* Element 배경 색상 설정 */
    border: none;
    color: white; /* 폰트 색상 설정 */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s, transform 0.3s;
}

.bankrupt-start-button:hover {
    background-color: #e30606; /* Element 배경 색상 설정 */
}

.bankrupt-start-button:active {
    transform: scale(0.95);
}

#continue-stop-buttons-div {
    display: flex; margin: auto;
}

/* SDBCASB = Space div between continue and stop buttons */
#SDBCASB {
    width: 32px;
}

.CLS-continue-stop-buttons {
    width: 100%;
    font-size: 19px; /* 폰트 크기 설정 */
    border: none;
    color: white; /* 폰트 색상 설정 */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s, transform 0.3s;
}

#continue-button {
    background-color: #4CAF50; /* Element 배경 색상 설정 */
}

#continue-button:hover {
    background-color: #45a049; /* Element 배경 색상 설정 */
}

#stop-button {
    background-color: #FE2E2E; /* Element 배경 색상 설정 */
}

#stop-button:hover {
    background-color: #FF1A1A; /* Element 배경 색상 설정 */
}

#retry-button {
    background-color: #33b5e5; /* Element 배경 색상 설정 */
}

#retry-button:hover {
    background-color: #2ba6d3; /* Element 배경 색상 설정 */
}

/* 비활성화된 그만하기 버튼의 클래스와 그 클래스의 hover 코드 */
.disabled-stop-button,
.disabled-stop-button:hover {
    background-color: #BDBDBD !important; /* Element 배경 색상 설정 */
}

#challenge-img {
    width: 125px; height: 125px; /* 버튼 크기 설정 */
}

.challenge-img-all-achieve-effect {
    border-radius: 75px;
    animation: rainbow-effect-background-color 2.5s linear; /* keyframes 적용 */
	animation-iteration-count: infinite; /* keyframes 무제한 */
}

/* 무지개 배경 색상 효과 */
@keyframes rainbow-effect-background-color {
    100%,0%{
        background-color: rgb(255,0,0);
    }
    8%{
        background-color: rgb(255,127,0);
    }
    16%{
        background-color: rgb(255,255,0);
    }
    25%{
        background-color: rgb(127,255,0);
    }
    33%{
        background-color: rgb(0,255,0);
    }
    41%{
        background-color: rgb(0,255,127);
    }
    50%{
        background-color: rgb(0,255,255);
    }
    58%{
        background-color: rgb(0,127,255);
    }
    66%{
        background-color: rgb(0,0,255);
    }
    75%{
        background-color: rgb(127,0,255);
    }
    83%{
        background-color: rgb(255,0,255);
    }
    91%{
        background-color: rgb(255,0,127);
    }
}

.not-achieve-challenge-Item-Box,
.achieve-challenge-Item-Box {
    border: none;
    border-radius: 12.5px;
    padding: 2.5px;
}

.not-achieve-challenge-Item-Box {
    background-color: #FF5555; /* Element 배경 색상 설정 */
    color: black;
}

/* 도전 과제 항목의 박스 클래스 */
.achieve-challenge-Item-Box {
    background-color: #4CAF50; /* Element 배경 색상 설정 */
    color: #FFBF00;
}

/* 도전 과제 항목의 조건 p 태그 */
.challenge-Item-p {
    font-size: 18px; /* 폰트 크기 설정 */
    color: black !important;
}

/* Challenge 화면을 나가는 Btn */
#close-challenge-btn {
    width: 100px; height: 100px; /* 버튼 크기 설정 */
}

/* 도전 과제 항목 사이 공백 div */
.Space-div-Between-Challenge-Items {
    height: 10px; /* 공백 높이 설정 */
}

#div-game-information {
    display: none;
}

/* 확률: 50% 텍스트 p 태그의 div */
#div-chance {
    margin: auto;
}

/* 확률: 50% 텍스트 p 태그 */
#p-chance {
    font-size: 24px; /* 확률 폰트 크기 설정 */
}

#div-saving-game {
    margin: auto;
}

#div-p-saving-game {
    display: flex; margin: auto;
}

#p-saving-game {
    display: flex; margin: auto;
    font-size: 22px; /* 폰트 크기 설정 */
}

#div-saving-game-btns {
    margin: auto;
}

.CLS-btn-saving-game {
    width: 100%;
    font-size: 19px; /* 폰트 크기 설정 */
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s, transform 0.3s;
}

#ending-div {
    display: none;
}

#ending-msg-2,
#ending-msg-1 {
    font-size: 24px;
    margin: auto;
}

#ending-msg-1 {
    animation: rainbow-effect-font-color 2.5s linear; /* keyframes 적용 */
	animation-iteration-count: infinite; /* keyframes 무제한 */
}

/* 텍스트 무지개 색상 효과 */
@keyframes rainbow-effect-font-color{
    100%,0%{
        color: rgb(255,0,0);
    }
    8%{
        color: rgb(255,127,0);
    }
    16%{
        color: rgb(255,255,0);
    }
    25%{
        color: rgb(127,255,0);
    }
    33%{
        color: rgb(0,255,0);
    }
    41%{
        color: rgb(0,255,127);
    }
    50%{
        color: rgb(0,255,255);
    }
    58%{
        color: rgb(0,127,255);
    }
    66%{
        color: rgb(0,0,255);
    }
    75%{
        color: rgb(127,0,255);
    }
    83%{
        color: rgb(255,0,255);
    }
    91%{
        color: rgb(255,0,127);
    }
}