body {
    background: #bdecff;
    background: linear-gradient(90deg, rgba(189, 236, 255, 1) 0%, rgba(78, 59, 247, 1) 50%, rgba(213, 128, 255, 1) 100%);
}

@font-face {
    font-family: "KakaoBigSans-ExtraBold";
    src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2503@1.0/KakaoBigSans-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}

.text {
    font-family: "KakaoBigSans-ExtraBold";
}

#wrap {
    margin: 0 auto;
    width: 90%;
}

#header {
    background: #8bffd880;
    border: 3px solid #ebebeb;
    border-radius: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
}

#header > h1 {
    margin-left: 24px;
    color: #ecf023;
    text-shadow: 0.2rem 0.2rem 0.25rem #867514;
}

#container {
    margin: 10px;
    height: 200px;
}

@media screen and (min-height: 580px) {
    #container {
        height: 430px;
    }
}

@media screen and (min-height: 810px) {
    #container {
        height: 655px;
    }
}

@media screen and (min-height: 1040px) {
    #container {
        height: 880px;
    }
}

@media screen and (min-height: 1270px) {
    #container {
        height: 1105px;
    }
}

#game-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 25px;
    padding: 15px;
    border-radius: 25px;
    border-style: solid;
    border-color: #c1b4ff;
    background-color: #e0ffc0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

@media screen and (min-width: 640px) {
    #game-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 960px) {
    #game-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1280px) {
    #game-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (min-width: 1600px) {
    #game-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (min-width: 1920px) {
    #game-list {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media screen and (min-width: 2240px) {
    #game-list {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media screen and (min-width: 2560px) {
    #game-list {
        grid-template-columns: repeat(8, 1fr);
    }
}

.game-site {
    margin: auto;
    border-radius: 5px;
    border-style: solid;
    border-color: #044417;
    background-color: #b4bcff;
    width: 200px;
    height: 200px;
    font-size: 1.6rem;
}

.link {
    margin: 5px;
    border-radius: 5px;
    padding: 15px 25px;
    text-decoration: none;
    text-align: center;
    color: #fff9e3;
}

.link:link, .link:visited {
    display: inline-block;
    background-color: #ffa970;
}

.link:hover, .link:active {
    background: #d39e78;
}

.division-line {
    margin: 60px 0px;
    border-top: 1px solid #444444;
}

#footer {
    margin: 60px auto;
}