@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=M+PLUS+Rounded+1c&family=Noto+Sans+Thai:wght@100..900&family=Sedan+SC&display=swap');


body {
    background-color: #D9D9D9;
    display: flex;
    justify-content: center;
    font-family: 'Kodchasan';
    margin: 0;
    padding: 0;
}

.flex{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.hide{
    display: none;
}

#startpage{
    width: 400px;
    height: 760px;
    background-image: url('img/IMG_2390.svg');
    background-position: bottom;  
    background-repeat: no-repeat;
}

#title{
    margin-top: 60px;
    height: 300px;
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Sedan SC';
}

#titlesq{
    background-color: #FFF9F9;
    width: 290px;
    height: 290px;
    border-radius: 50px;    
    position: relative;
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}

#titleimg1{
    position: absolute;
    top: 74px;
    left: 84px;
}

#titleimg2{
    position: absolute;
    top: 140px;
    left: 30px;
}

#titlew1{    
    height: 64px;
    margin-top: 48px;
    margin-left: 17px;
    margin-bottom: 0;
    font-size: 64px;
    color: #457B3A;
}

#titlew2{
    height: 35px;
    margin-top: 1px;
    margin-left: 45px;
    font-size: 36px;
    color: #184C1899;
    ;
}

#titlew3{
    margin-top: -46px;
    margin-left: 115px;
    font-size: 90px;
    color: #5D8254;
}

#askname{
    width: 300px;
    margin-top: 80px;
    display: flex;
    justify-content: space-around;
}

#name{
    width: 200px;
    height: 40px;
    margin-left: 20px;    
    background-color: transparent;
    border-radius: 150px;
    border: black solid 1px;
    font-size: 16px;    
    font-family: 'Kodchasan';   
}

#namebt{
    width: 50px;
    height: 40px;
    margin-left: 20px;
    border-radius: 100px;
    background-color: #FFF5F5;

    text-align: center;
    font-size: 15px;
    font-family: 'Kodchasan';
    padding: 10px;
    box-sizing: border-box;
}

#namebt:active {
  transform: scale(0.95); 
}

#startbt{
    margin-top: 40px; 
    width: 250px;
    height: 55px;
    border-radius: 100px; 
    border: 0;
    background-color: #FFF5F5;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

    color: black;
    font-size: 20px;
    font-family: 'Kodchasan';
    text-align: center;
    padding: 15px;
    box-sizing: border-box;
}

#startbt:disabled {
  background-color: #ccc;
  opacity: 0.5;
}

#startbt:active {
  transform: scale(0.95); 
}

#questionspage{
    width: 100%;
}

.header{
    height: 70px;
    background-color: #557961;  
    color: white;
    font-family: 'Sedan SC';
    font-size: 24px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#menu{
    width: 100%;
    margin-top: 10px;
    background-color: #B9C4C0;
    display: grid;
    grid-template-columns: repeat(5, 40px);
    justify-content: center;  
    gap: 15px;
    padding-bottom: 20px;
    padding-top: 20px;
    
}

.num{
    justify-self: center;
    width: 40px;
    height: 40px;
    border: black solid 1px;
    border-radius: 20px ;
    background-color: #D9D9D9;

    text-align: center;
    padding: 8px;
    box-sizing: border-box;
    font-family: 'Kodchasan';
    font-size: 17px;
}

.choosenum{
    background-color: #899F91;
    color: white;
}

.question{
    margin-top: 35px;
}

.q{
    height: 150px;
    width: 300px;    
    margin-bottom: 40px;
    background-color: #EBEAEA;
    border: black solid 1px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Kodchasan';
    font-size: 18px;
    padding: 20px;    
    box-sizing: border-box;
}


.choice{
    background-color: #EFECEC;
    height: 40px;
    width: 300px;
    margin-bottom: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;

    font-family: 'Kodchasan';
    font-size: 16px;
    padding: 6px;
    box-sizing: border-box;
}

.choicenum{
    width: 30px;
    height: 30px; 
    margin-right: 10px;
    background-color: #D9D9D9;
    border-radius: 15px ;

    text-align: center;
    font-size: 16px;
    padding: 5px;
    box-sizing: border-box;
}

.anschoice{
    border: 3px #9DBCC3 solid;
}

.anscnum{
    background-color: #9DBCC3 ;
}

.wrans{
    border: 3px #CC6262 solid;
}

.wransnum{
    background-color: #CC6262 ;
}

.crans{
    border: 3px #678672 solid;
}

.cransnum{
    background-color: #899F91;
}

.wrnum{
    border: #CC6262 solid 2px;
}

.crnum{
    border: #557961 solid 2px;
}

#button{
    margin-top:15px;
    margin-bottom: 20px;
    width: 300px;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
}

#previous{
    width: 115px;
    height: 50px;
    background-color: #FFFFFF;
    border-radius: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    
    text-align: center;
    padding: 13px;
    box-sizing: border-box;
}

#previous:active {
  transform: scale(0.95); 
}

#next{
    width: 115px;
    height: 50px;
    background-color: #FFFFFF;
    border-radius: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    
    text-align: center;
    padding: 13px;
    box-sizing: border-box;
}

#next:active {
  transform: scale(0.95); 
}

#submit{
    width: 115px;
    height: 50px;
    background-color: #FFFFFF;
    border-radius: 40px;
    border: 0;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    
    color: black;
    font-size: 18px;
    font-family: 'Kodchasan';
    text-align: center;
}

#submit:disabled {
  background-color: #ccc;
  opacity: 0.9;
}

#submit:active {
  transform: scale(0.95); 
}

#scorepage{
    width: 100%;
}

#sctitle{
    margin-top: 75px;
    color: #45653E;
    text-align: center;
    font-size: 32px;
}

#scmenu{
    width: 300px;
    height: 335px;
    margin-top: 35px;
    border-radius: 30px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    background-color: #FFFFFF;

    display: grid;
    grid-template-columns: repeat(5, 40px);
    grid-template-rows: repeat(2,40px);
    justify-content: center;  
    gap: 50px 15px;
    padding-top: 45px;
    box-sizing: border-box;
}

.scnum{
    width: 40px;
    height: 40px;
    border: black solid 1px;
    border-radius: 20px ;
    
    text-align: center;
    font-family: 'Kodchasan';
    font-size: 23px;
    padding: 3px;
    box-sizing: border-box;
}

.crscnum{
    background-color: #63905A;
}

.wrscnum{
    background-color: #CC6262;
}

#score{
    width: 220px;
    height: 70px;
    margin-left: 20px;

    text-align: center;
    font-size: 32px;
    padding: 15px;
    box-sizing: border-box;
}
.npass{
    border: #7D2020 solid 2px;
    background-color: #FDC1C1;
    color: #D72D2D;
}

.pass{
    color: #457B3A;
    border: #457B3A solid 2px;
    background-color: #ACD3A4;
}

#rebt{
    margin-top:50px ;
    width: 290px;
    height: 45px;
    background-color: #FFFFFF;
    border-radius: 30px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

    font-size: 20px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

#rebt:active {
    transform: scale(0.95); 
}

#note{
    margin-top: 50px;
    font-size: 20px;
    color:#D72D2D;
    text-align: center;
}

#thank{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    font-family: 'M PLUS Rounded 1c';
    text-align: center;
}

#downloadbt{
    margin-top:50px ;
    width: 290px;
    height: 45px;
    background-color: #FFFFFF;
    border-radius: 30px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

    font-size: 20px;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}