/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* ==========================================
   BODY
========================================== */

html,
body{

    width:100%;
    height:100%;

    overflow:hidden;

    font-family:Arial, Helvetica, sans-serif;

    background:#f2f2f2;

    color:#222;

}


/* ==========================================
   CONTAINER
========================================== */

.container{

    width:100vw;
    height:100vh;

    background:white;

    padding:15px;

}


/* ==========================================
   HALAMAN AWAL
========================================== */

#halaman-awal{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}


h1{

    font-size:34px;

    margin-bottom:20px;

}


p{

    font-size:18px;

    margin-bottom:20px;

}


input{

    width:350px;

    height:45px;

    padding:10px;

    font-size:18px;

    text-align:center;

    border:1px solid #ccc;

    border-radius:6px;

}


button{

    margin-top:15px;

    padding:12px 40px;

    font-size:18px;

    cursor:pointer;

    border:none;

    border-radius:6px;

    background:#1565c0;

    color:white;

}


button:hover{

    background:#0d47a1;

}


/* ==========================================
   HALAMAN SOAL
========================================== */

#halaman-soal{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

}


#judulSoal{

    margin:5px 0 15px;

    font-size:28px;

}


#gambarContainer{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    flex:1;

}


#gambarSoal{

    max-width:95vw;

    max-height:82vh;

    width:auto;

    height:auto;

    border:none;

    cursor:pointer;

    user-select:none;

    -webkit-user-drag:none;

}


/* ==========================================
   HALAMAN HASIL
========================================== */

#halamanHasil{

    width:100vw;

    height:100vh;

    overflow:auto;

    text-align:center;

    padding:20px;

}


table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}


th{

    background:#1565c0;

    color:white;

}


th,
td{

    border:1px solid #ccc;

    padding:10px;

}


tr:nth-child(even){

    background:#f8f8f8;

}


h3{

    margin-top:20px;

}

select{

    width:350px;

    height:45px;

    padding:10px;

    font-size:18px;

    text-align:center;

    border:1px solid #ccc;

    border-radius:6px;

    background:white;

}