@media (max-width: 768px) {

    header { height: 45px; }
    header h1 { font-size: 20px; }

    a img {

       height: 25px;
       width: 25px;

    }

    main {

       flex: 0 0 auto;
       height: 470px;

    }

    main:has(#startSection:not(.visible)) {

       flex: 0 0 auto;
       height: 370px;

    }

    #startSection {

       flex-direction: column;
       gap: 30px;

    }

    #startSection p {

       font-size: 12.5px;
       width: 225px;

    }

    #startSection div {

       grid-template-columns: repeat(2, max-content);
       gap: 10px;

    }

    category-component button {

       width: 100px;
       height: 75px;
       font-size: 7.5px;
       line-height: 7.5px;
       gap: 5px;

    }

    category-component img {

       width: 35px;
       height: 35px;

    }

    #options { gap: 30px; }

    option-component button {

       width: 100px;
       height: 100px;
       border-radius: 20px;
       box-shadow: 0 2.5px 5px #000000;

    }

    option-component button img {

       width: 70px;
       height: 70px;

    }

    option-component h2 {

       width: 110px;
       font-size: 20px;
       line-height: 20px;

    }

    #optionHeader { font-size: 25px; }

    #loading { font-size: 17.5px; }

    #endMessage {

       left: 11%;
       font-size: 15px;

    }
 
    #errorMessage {

       left: 16.5%;
       font-size: 15px;

    }

    footer { flex-shrink: 0; }
    footer p { font-size: 8.5px; }

    option-component:hover { transform: none; }
    category-component:hover { transform: none; }
    #endMessage:hover, #endMessage:hover { transform: none; }

 }