/* root */
:root {
    --background: rgb(255, 255, 255);
    --background-2: rgb(255, 171, 118);
    --background-3: rgb(189, 87, 87);
    /* text */
    --text: rgb(65, 65, 65);
    --text-2: rgb(187, 99, 99);
    --text-info: rgb(173, 94, 94);
    --text-3: rgb(47, 69, 194);
}

/* other */
body {
    background: var(--background);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    color: var(--text);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

hr.underline {
    width: 35%;
    border-top: 6px solid #252525;
    border-bottom: none;
    border-left: none;
    border-right: none;
    /* margin-left: 15%; */
    opacity: 100%;
    border-radius: 5px;
}

.swal-overlay {
    background-color: rgba(43, 92, 165, 0.45);
}

#pembatas h3 {
    background: rgb(90, 90, 90);
    color: #fff;
    box-shadow: 5px 5px 5px rgb(168, 168, 168);
}

/* img {
    border-radius: 5px;
} */

/* header */

#header {
    background: linear-gradient(to bottom, #faa9a9, #facdcd, rgb(216, 216, 216));
    padding: 10%;
    box-shadow: 0px 5px 5px  rgb(185, 185, 185);
}

#header h1 {
    font-size: 50px;
    margin-bottom: 2%;
}

/* game 1 */
#game1 {
    margin-top: 5%;
}

#game1 h2 {
    margin-left: 4%;
}

#game1 h5 {
    margin-left: 4%;
    transition: 0.5s;
    
}

#game1 h5:hover {
    margin-left: 7%;
    color: var(--text-3);
}

#game1 img {
    width: 450px;
    margin-right: 5%;
}

#game1 .game-1 p {
    margin-left: 4%;
}   

#game1 a {
    margin-left: 4%;
    text-decoration: none;
    transition: 0.5s;
    color: var(--text);
    font-size: 20px;
}

#game1 a:hover {
    margin-left: 7%;
    color: var(--text-info);
}

/* game 2 */
#game2 {
    margin-top: 5%;
    margin-left: 5%;
}

#game2 h2 {
    margin-right: 5%;
}

#game2 h5 {
    margin-right: 5%;
    transition: 0.5s;
}

#game2 h5:hover {
    margin-right: 7%;
    color: var(--text-3);
}

#game2 img {
    width: 450px;
    margin-left: 2%;
}

#game2 .game-2 p {
    margin-right: 5%;
}   

#game2 a {
    margin-right: 5%;
    text-decoration: none;
    transition: 0.5s;
    color: var(--text);
    font-size: 20px;
}

#game2 a:hover {
    margin-right: 7%;
    color: var(--text-info);
}

/* footer */
footer {
    background: rgb(175, 91, 91);
}

footer  {
    color: #fff;
}

footer a:hover {
    color: rgb(144, 67, 207);  
}