*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body { 
    display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background:  linear-gradient(90deg, #74b6ff 0%, #1bdcfd 50%, #45d9fc 100%);
}


h2 {
    background: #1dbcfd;
    color: #fff;
    letter-spacing: 0.1rem;
    padding: 1rem;
    cursor: default;
}

.wrapper {
    width: 60vh;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 0px 2.2px rgba(0, 0, 0, 0.028), 0 0px 5.3px rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.05);
}

.wrapper p{
    color: #062c33;
    display: block;
    margin: 1rem 0 1rem 0;
}

.wrapper table {
    padding-top: 10px;
    background: #f8f8f8;
    border-radius: 5px;
}


.wrapper table tr td {
    padding: 0.5rem;
    border-radius: 10px;
}

.wrapper table tr td img{
    cursor: pointer;
    width: 100%;
    align-items: center;
    justify-content: center;

}

.wrapper table tr td img:hover{
    transition: all 0,2s ease-in-out;
    transform: scale(1.1);
}

.sebelumnya {
    background: red;
    color: #fff;
    font-weight: bold;
    margin-top: 1rem ;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.sebelumnya:hover {
    background: rgba(173, 216, 230, 1);
    color: black;
}


/*Respond*/

@media screen and (min-width: 456px){
    .wrapper {
    width: 70%;
    }}

@media screen and (min-width: 768px){
    .wrapper {
    width: 65%;
}}

@media screen and (min-width: 992px){
    .wrapper {
    width: 55%;
}}

@media screen and (min-width: 1200px){
    .wrapper {
    width: 45%;
}}

@media screen and (min-width: 1500px){
    .wrapper {
    width: 35%;
}}