body {
            font-family: Arial, sans-serif;
            margin: 20px;
            text-align: center;
            background-color:rgb(216, 216, 215);
        }
        h1 {
            font-size: clamp(2rem, 7vw, 2.5rem);
            margin: 0;
            padding: 5px;
            border-radius: 10px;
            background-color: #020e62;
            color: white;
            box-shadow: 0 0 1px 3px lightblue inset;
        }
        #quiz-container {
            border: 4px solid #feb032;
            border-radius: 10px;
            padding: 20px;
            background-color: rgb(231, 224, 224, 0.6);
            height: 50%;
            justify-content: center;
        }
        #question-image {
            background-color: beige;
            border-radius: 10px;
            max-height: 200px;
            max-width: 100%;
            display:flex;
            justify-content: center;
            flex-wrap: nowrap;
        }
        #question-image img{
            flex: 0 0 auto;
            object-fit: contain;
            max-height: 160px;
            min-height: 0;
            max-width: 100%;
            min-width: 0;
        }
        @media (max-width: 450px){
            #question-image img{
                flex: 1;
                max-height:100px;
            }
        }
        #explanation {
            margin: 5px;
            background-color: rgb(224, 224, 224);
            border: 1px solid black;
            border-style: dashed;
            border-radius: 10px;
            font-size: clamp(1rem, 1vw, 2rem);
            padding: 0 10px;
            display: inline-block;
        }
        #result-container {
            padding: 10px;
            border-radius: 10px;
        }
        #question {
            font-size: 1.2em;
            margin-bottom: 15px;
        }
        #answer-input {
            font-size: clamp(0.8rem, 1vw, 2rem);
            padding: 5px;
            width: 83%;
            max-width: 300px;
            margin-right: 10px;
            border: 1px solid black;
            border-radius: 3px;
        }
        #check-button, #next-button{
            padding: 3px 20px;
            cursor: pointer;
            background: linear-gradient(to bottom, #FF9CE0, #de35af );
            color: white;
            border: 1px solid black;
            border-radius: 5px;
            font-size: 1.9rem;
            box-shadow: black 0 5px 1px;
        }
        #dont-know {
            padding: 3px 2px;
            cursor: pointer;
            background: linear-gradient(to bottom, white, rgb(182, 182, 182));
            color: black;
            border: 1px solid black;
            border-radius: 5px;
            font-size: 1.4rem;
            box-shadow: black 0 5px 1px;
        }
        #objection-button {
            padding: 8px 12px;
            cursor: pointer;
            background-color: #f67499;
            color: black;
            border: none;
            border-radius: 5px;
        }
        #check-button:hover, #next-button:hover, #objection-button:hover {
            opacity: 0.9;
        }
        #result {
            margin: 1px;
            margin-top: 10px;
            font-size: clamp(1rem, 4.1vw, 2rem);
            height: 30px;
        }
        .correct {
            color: rgb(255, 255, 172);
            background-color: rgb(255, 120, 143);
            display: inline;
        }
        .incorrect {
            color: rgb(255, 236, 128);
            background-color: rgb(35, 35, 165);
            display: inline;
        }
        #point {
            margin: 1px;
            padding-top: 0;
            font-family: Helvetica;
            font-size: clamp(1.4rem,2vw,2vw);
            font-weight: 800;
            color: white;
            text-decoration: underline dotted gray;
            text-underline-offset: 6px;
            -webkit-text-stroke: 1px black;
            background-color: rgb(231, 231, 231);
            display: inline;
            flex-wrap: nowrap;
        }
        #great {
            -webkit-text-stroke: 2px #f32955;
        }
        #miss {
            -webkit-text-stroke: 2px #3d8203;
        }
        footer {
            
            bottom: 0;
            font-size: 0.8em;
        }

        #ketsu {
            font-size: 3em;
            color:#f67499;
            margin: 0;
            padding: 0
        }
        #caution {
            font-size: 0.8em;
        }
        ul {
            left: 0px;
            display:absolute;
        }
        li::marker {
            content: none;
        }

        .blink-slow {
            animation : blink-slow 2s 1;
        }
        @keyframes blink-slow {
            0% {
                opacity: 0;
                }
           100% {
                opacity: 1;
                }
            }
        .bg-polka{
            background-color: #cacaca;
            background-image: radial-gradient(rgb(68, 76, 247, 0.3) 1.7000000000000002px, #cacaca 1.7000000000000002px);
            background-size: 34px 34px;
            }
        #history-list {
            display: grid;
            max-width: 100%;
            grid-template-columns: auto auto;
            text-align: left;
            background-color: rgb(231, 231, 231, 0.8);
        }
        .unit-name {
            font-size: clamp(0.8rem,2vw,1.4rem);
            align-content: center;
            flex-wrap: nowrap;
            padding-right: 2px;
            max-width: 100%;
            outline: 1px solid lightgray;
        }
        .unit-image {
            max-height: 50px;
            max-width: 100%;
            min-width: 0;
            min-height: 0;
            display:flex;
            object-fit: cover;
            outline: 1px solid lightgray;
        }
        .unit-image img {
            max-height: 100%;
            min-width: 0;
            min-height: 0;
        }