@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree: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&display=swap');


* {
    box-sizing: border-box;
}

body {
    background-color: #000000;
    background-image: linear-gradient(315deg, #19191919 50%, #19191919 100%);
    font-family: "Bai Jamjuree", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}


.quiz-container {
    background-image: url("is/01.jpg");
	background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 20px;
    box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
    width: 100%;
    height: 100%;
    overflow: hidden;

  animation-name: fadeInOut;
  animation-duration: 20s; 
  animation-iteration-count: infinite; 


}

@keyframes fadeInOut {
  0% { background-image: url("is/01.jpg"); }
  12.5% { background-image: url("is/02.jpg"); }
  25% { background-image: url("is/03.jpg"); }
  45.5% { background-image: url("is/04.jpg"); }
  65.5% { background-image: url("is/05.jpg"); }
  85% { background-image: url("is/06.jpg"); }
  92.5% { background-image: url("is/07.jpg"); }
  100% { background-image: url("is/08.jpg"); }
}

.quiz-container2 {
    background-image: url("is/boxfree.png");
	background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 20px;
    box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
    width: 100%;
    height: 100%;
    overflow: hidden;
	justify-content: center;
	display: flex;
	
}

.item01 {

	position: absolute;
	background-image: url("is/infome_text.png");
	background-repeat: no-repeat;
    background-size: 100%;
	z-index: 1;

	margin-top: -25vw;
	width: 100%;
    height: 120%;
    overflow: hidden;
	display: revert-layer;


	}


ul {
	position: absolute;
	padding-top: 25vw;
    list-style-type: none;
    padding: center;
	z-index: 3;
}


ul li label {
    cursor: pointer;
}

button {

    background-image: url("is/Button.png");
	background-repeat: no-repeat;
    background-size: 24vh;
	border: none;
    color: #1f1d1e;
    display: block;
	width: 23.8vh;
    height: 6vh;
    cursor: pointer;
	border-radius: 15px;
	box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
	
}