@media(max-width:480px) {
    * {
        font-family: 'Gantari', sans-serif;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        border: none;
    }

    .main-container {
        width: 90vw;
        height: 100vw;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        border-radius: 15px;
    }

    .title {
        font-size: 7vw;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5vw;
    }

    .input {
        padding: 5vw;
    }

    #yearGrade {
        font-size: 5vw;
        font-weight: 600;
        width: 75vw;
        padding: 2vw;
        border-radius: 25px;
        text-align: center;
    }

    #submit {
        font-size: 4.5vw;
        padding: 2.3vw;
        border-radius: 25px;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
    }

    .results {
        font-size: 4.5vw;
        text-align: center;
        position: absolute;
        transform: translate(-50%, -75%);
        left: 50%;
        top: 75%;
    }
}