:root {
    --color1: #2596be;
    --color2: #be2596;
    --color3: #96be25;
    --base1: #ffd312;
}

@media (min-width: 992px) and (max-width: 1199px) {
    body {
        background-color: #ffd312;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .전체 {
        display: block;
        justify-content: center;
        width: auto;
        height: auto;
        margin: 1.5vh;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 0 1.5 #ccc;
    }
    .상단 {
        display: flex;
        height: 9vh;
        font-size: 2rem;
        justify-items: left;
        align-items: top;
    }
    .메인 {
        display: flex;
        height: 65vh;
        align-items: center;
        justify-content: center;
    }
    .하단 {
        display: flex;
        height: 9vh;
        justify-content: center;
        align-items: center;
    }
    button {
        font-family: "nanum-gothic";
        height: 2.8rem;
        width: 15rem;
        font-size: 1.2rem;
        border-radius: 10px;
        border: 1px solid #cccccc;
        background-color: #222222;
        color: #ccc;
        box-shadow: 0px 0px 10px #ccc;
    }
    button:hover {
        background-color: var(--base1);
        color: #000;
    }
    #icon {
        background-image: url("../images/icon.png");
        background-size: cover;
        width: 4rem;
        height: 4rem;
        margin-right: 1rem;
    }
    .title {
        font-family: "nanum-gothic";
        font-optical-sizing: auto;
        font-weight: 500;
        font-size: 1.5rem;
        color: #000000;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 1rem;
        margin-top: 2.5rem;
    }
    .content {
        display: grid;
        grid-template-columns: repeat(15, 1fr);
        grid-gap: 1px;
        width: 90vw;
        margin: 1rem;
        padding: 1rem;
        align-items: center;
        border: solid 1px #cccccc;
        border-radius: 0.5rem;
        ;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px #ccc;
    }
    .content div {
        background-color: #ffffff;
        width: 2rem;
        height: 2.7rem;
        font-size: 1.8rem;
        padding: 1rem;
        font-family: "Noto Serif KR", serif;
        font-weight: 600;
    }
    .content div:hover {
        background-color: bisque;
    }
    .aligns-r {
        text-align: right;
    }
    .aligns-l {
        text-align: left;
    }
    .incorrect {
        position: relative;
        color: red;
    }
    .copyright {
        font-family: "nanum-gothic";
        font-weight: 400;
        font-size: 0.8rem;
        color: #000000;
    }
    .information {
        display: flex;
        width: 300px;
        height: auto;
        padding: 0.4rem;
        margin: 1rem;
        border-radius: 1rem;
        background-color: rgb(187, 186, 185);
        justify-content: center;
        box-shadow: 0px 0px 10px #ccc;
    }
    .information div {
        display: flex;
        background-color: #333333;
        margin: 0 0 0 0.5rem;
        width: 50px;
        padding: 5px 20px 5px 20px;
        border-radius: 0.5rem;
        font-family: "nanum-gothic";
        color: white;
        font-size: 15px;
        justify-content: center;
    }
    .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .button-container {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }
}

@media (min-width: 1200px) {
    body {
        background-color: #ffd312;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .전체 {
        display: block;
        justify-content: center;
        width: 95vw;
        height: auto;
        margin: 1.5vh;
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 0 1.8 #6c6c6c;
    }
    .상단 {
        display: flex;
        justify-content: space-between;
        height: 11vh;
        font-size: 2rem;
        align-items: top;
    }
    .메인 {
        display: flex;
        height: 65vh;
        align-items: center;
        justify-content: center;
    }
    .하단 {
        display: flex;
        height: 15vh;
        justify-content: center;
        align-items: center;
    }
    button {
        font-family: "nanum-gothic";
        height: 3rem;
        width: 15rem;
        font-size: 1.2rem;
        letter-spacing: 1px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        background-color: #222222;
        color: #ccc;
        box-shadow: 0px 0px 10px #ccc;
    }
    button:hover {
        background-color: var(--base1);
        color: #000;
    }
    #icon {
        background-image: url("../images/icon.png");
        background-size: cover;
        width: 4rem;
        height: 4rem;
        margin-right: 1rem;
    }
    .title {
        font-family: "nanum-gothic";
        font-optical-sizing: auto;
        font-weight: 500;
        font-size: 1.5rem;
        color: #000000;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 1rem;
        margin-top: 2.5rem;
    }
    .content {
        display: grid;
        grid-template-columns: repeat(15, 1fr);
        width: 90%;
        margin: 2rem;
        padding: 2rem;
        align-items: center;
        border: solid 1px #cccccc;
        border-radius: 0.5rem;
        ;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px #ccc;
    }
    .content div {
        background-color: #ffffff;
        width: calc(screenWidth/18);
        height: 70px;
        font-size: 40px;
        padding: 14px;
        margin: 1px;
        font-family: "Noto Serif KR", serif;
        font-weight: 600;
    }
    .content div:hover {
        background-color: bisque;
    }
    .aligns-r {
        text-align: right;
    }
    .aligns-l {
        text-align: left;
    }
    .incorrect {
        position: relative;
        color: red;
    }
    .copyright {
        font-family: "nanum-gothic";
        font-weight: 400;
        font-size: 0.8rem;
        color: #000000;
    }
    .information {
        display: flex;
        width: 400px;
        height: auto;
        padding: 0.4rem;
        margin: 1rem;
        border-radius: 1rem;
        background-color: white;
        justify-content: center;
        box-shadow: 0px 0px 5px #999;
    }
    .information div {
        display: flex;
        background-color: var(--color3);
        margin: 0 0 0 0.5rem;
        width: 50px;
        padding: 5px 20px 5px 20px;
        border-radius: 0.5rem;
        font-family: "nanum-gothic";
        color: black;
        font-size: 15px;
        justify-content: center;
        box-shadow: 0px 0px 2px #999;
    }
    .choiceUser {
        display: flex;
        position: absolute;
        transform: translate(100%, -50%);
        bottom: -18px;
        right: 70px;
        width: auto;
        background-color: #7fb87a;
        padding: 5px;
        border-radius: 5px;
        transition: 1s linear;
    }
    .choiceUser:hover {
        transform: translate(2%, -50%);
    }
    .choiceUser div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        margin: 3px;
        border-radius: 5px;
        background-color: white;
        padding: 5px;
    }
    .choiceUser div:hover {
        background-color: #ffd312;
    }
    .hidden {
        display: none;
    }
    .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .button-container {
        display: flex;
        justify-content: center;
        column-gap: 20px;
        margin-top: 20%;
    }
    .button-container button {
        background-color: var(--color1);
        height: 2rem;
        width: 4rem;
        font-size: 1rem;
    }
}