html {
    font-size: 17px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body {
    background-color: rgb(179, 212, 152);
}

.form-heading {
    font-size: 4.5rem;

    hr {
        margin-bottom: 3%;
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* CSS for form box */
.form-box {
    width: 95%;
    margin-left: auto;
    margin-right: auto;

    background-color: antiquewhite;
    padding: 2%;
}


/* CSS by Bhabin Chudal */

.burial-methods {
    margin-bottom: 10%;
}

.burial-methods .heading {
    font-size: 5rem;
}

.burial-methods .card {
    width: 35rem;
    height: 47rem;
    background-color: #f8cd7d;
}

/* Setting the height of each div inside card to achieve proper layout */
.burial-methods .card {
    .card-heading {
        height: fit-content;
        /* Occupies the exact amount of height required to fit heading */
        font-size: 5rem;
    }

    .card-image {
        height: 60%;
        /* Occupies 60% of the height of the card */
        flex-grow: 1;
        /* Occupy the remaining space if heading is short */
    }

    .card-select {
        height: 20%;
        /* Occupies 20% of the height of the card */
    }

    .card-description {
        font-size: 1.5rem;
    }
}

.burial-methods .card .card-image img {
    /* Making the image fit the card-image div */
    width: 100%;
    height: 100%;
}

/* Increasing the size of the icon and radio buttons in card-select div */
.burial-methods .card-select {
    button {
        width: 50%;
    }

    i {
        font-size: 100px;
    }
}

.burial-methods .card-select .input-radio {
    width: 50%;

    input[type="radio"] {
        width: 40%;
    }
}


/* CSS by Sadikshya Oli */

.marker-options {
    margin-bottom: 10%;
}

.marker-options .heading {
    font-size: 5rem;
}

.marker-options .card {
    width: 35rem;
    height: 50rem;
    background-color: #f8cd7d;
}

.marker-options .card {
    .card-image {
        height: 70%;
    }

    .card-text {
        height: 20%;
        font-size: 2.1rem;
    }

    .card-select {
        height: 10%;
    }
}

.marker-options .card .card-image img {
    width: 100%;
    height: 100%;
}

.marker-options .card-select {
    input[type="radio"] {
        height: 90%;
        width: 50%;
    }

    button {
        width: 50%;
        height: 100%;

        i {
            font-size: 60px;
        }
    }
}

/* CSS by Aarav Sen Mehta */

.grave-locations {
    margin-bottom: 10%;
}

.grave-locations .heading {
    font-size: 5rem;
}

.grave-locations .card {
    width: 100%;
    height: 45rem;
    background-color: #def2cc;
}

/* Setting the widths of each div inside card to achieve proper layout*/
.grave-locations .card {
    .card-image {
        width: 60%;
        /* Occupies 60% of the width of the card */
        height: 100%;
    }

    /* Card description further contains 3 sub-divs 
    so, we will set their heights to achieve the proper layout
    */
    .card-description {
        height: 100%;
        width: 40%;
        /* Occupies 40% of the width of the card */
        font-size: 3.4rem;
        /* Font size of everything inside description */

        .card-text-heading {
            height: auto;
            /* Occupies the exact amount of height required to fit the heading */
        }

        .card-text {
            height: 60%;
            /* Occupies 60% of the height of the card */
            flex-grow: 1;
            /*Occupy remaining space if heading is short */
        }

        .card-select {
            height: 20%;
            /*Occupies 20% of the height of the card*/
        }

    }
}

.grave-locations .card .card-image img {
    /* Making the image fit the card-image div */
    width: 100%;
    height: 100%;
}

/* Increasing the size of the icon and radio buttons in card-select div */
.grave-locations .card-description .card-select {
    input[type="radio"] {
        width: 20%;
    }

    button {
        display: flex;
        align-items: center;
    }

    i {
        font-size: 100px;
    }
}

/*
    CSS by Aakarshan Khosla
    This CSS defines the style for favourite quote/ inscription
*/

input {
    border: 2px solid blue;
    /* Visible border */
    border-radius: 4px;
}

.inscription {
    font-size: 4rem;

    margin: 8% 0;

    textarea {
        border: 2px solid black;
    }
}

.general-info {
    font-size: 4.5rem;
    margin-bottom: 10%;
}

.form-submit {
    font-size: 4.5rem;

    margin-top: 10%;

    input {
        padding: 0 2%;
    }
}