* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    max-width: 100%;
}

 .material-symbols-outlined {
     font-variation-settings:
             'FILL' 0,
             'wght' 400,
             'GRAD' 0,
             'opsz' 24
 }

body#homepage::before, body#viewrequestspage::before, body#makerequestpage::before, body#viewadditionaldetailsspage::before, body#addadditionaldetailspage::before, body#editrequestpage::before, body#viewresultspage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/homepage_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.03; /* Adjust opacity of the background image */
    z-index: -1; /* Make sure the background is behind the content */
}

body#homepage h1, body#viewrequestspage h1, body#makerequestpage h1, body#viewadditionaldetailsspage h1, body#addadditionaldetailspage h1, body#editrequestpage h1, body#viewresultspage h1 {
    margin-bottom: 35px;
    font-size: 30px;
    font-family: "Book Antiqua";
}

div.addNewPetRequestDiv {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.addNewPetRequestDiv a {
    color: black;
    margin-right: 5px;
}

div.addNewPetRequestDiv a:hover {
    color: blue;
}

div.addNewAdditionalDetailsDiv {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.addNewAdditionalDetailsDiv a {
    color: black;
    margin-right: 5px;
}

div.addNewAdditionalDetailsDiv a:hover {
    color: blue;
}

div.allRequestsDiv {
    width: 100%;
    max-width: 100%;
}

div.requestDiv {
    width: 50%;
    max-width: 50%;
    height: 210px;
    margin: 30px auto;
    border: 1px solid grey;
    border-radius: 9px;
    background-color: rgba(135, 206, 250, .05);
}

div.requestDivClone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    max-width: 50%;
    height: 210px;
    margin: 30px auto;
    border: 1px solid grey;
    border-radius: 9px;
    background-color: rgba(135, 206, 250, .05);
}

div.editAndDeleteSection {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

div.editAndDeleteSection div {
    text-decoration: none;
    padding: 12px;
}

div.editAndDeleteSection div a {
    color: black;
}

div.editAndDeleteSection div a:hover {
    color: blue;
}

div.additionalDetailsDiv {
    display: flex;
    align-items: center;
    justify-content: center;
}

div.additionalDetailsText {
    flex: 1;
}

div.additionalDetailsEditAndDeleteSection {
    flex: 1;
}

div.aboutSectionContainer {
    display: flex;
}

div.aboutPetImageSection {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

div.aboutPetSection {
    display: flex;
    align-items: center;
    justify-content: left;
    flex: 1;
}

div.aboutPetSection ul {
    list-style-type: none;
    margin-left: 20px;
}

div.aboutPetSection ul li {
    margin: 5px 0;
}

div.additionalDetailsLinkDiv {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
}

body#homepage form, body#makerequestpage form, body#addadditionaldetailspage form, body#editrequestpage form {
    width: 80%;
    max-width: 80%;
    border-radius: 9px;
    border: 1px dotted grey;
    padding: 10px 30px;
    margin: 0 auto;
    background-color: rgba(135, 206, 250, .05);
    box-shadow: 2px 2px 3px grey;
}

body#homepage div.homepageFormDiv, body#makerequestpage div.homepageFormDiv, body#addadditionaldetailspage div.homepageFormDiv, body#editrequestpage div.homepageFormDiv {
    width: 100%;
    max-width: 100%;
}

nav {
    border-bottom: 1px dotted grey;
    padding: 15px;
    margin-bottom: 40px;
    background-color: rgba(135, 206, 250, .05);
    text-align: center;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: black;
}

nav ul li a:hover {
    color: blue;
}

h1, h2 {
    text-align: center;
}

h2 {
    margin-bottom: 30px;
}

input[type='checkbox'] {
    display: block;
    margin: 0 auto;
}

input[type='text'] {

}

input[type='submit'] {
    padding: 7px;
}

div.allAnimalTypesDiv {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 30px 0;
}

div#ageInputs, div#ageInputs_2, div#weightInputs, div#weightInputs_2 {
    margin-top: 3px;
}

div.allAnimalAgesDiv, div.allAnimalWeightsDiv, div.allAnimalColorsDiv {
    margin: 30px 0;
}

div.animalPictureAndCheckboxDiv {
    display: inline-block;
    flex: 1;
    width: 100%;
    max-width: 100%;
}

div.animalPictureAndCheckboxDiv img {
    width: 90px;
    max-width: 90px;
}

div.animalPictureDiv {
    display: flex;
    justify-content: center;
    width: 50%;
    max-width: 50%;
    margin: 0 auto;
    margin-bottom: 7px;
}

div.animalCheckboxDiv {
    width: 50%;
    max-width: 50%;
    margin: 0 auto;
    text-align: center;
}

div.submitButtonDiv {
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 10px;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*="col-"] {
    float: left;
    padding: 1em;
    width: 100%;
}

/* Smartphones (portrait) */ /* xs */
@media only screen and (max-width: 558px) {

    .col-1-xs {width: 8.33%;}
    .col-2-xs {width: 16.66%;}
    .col-3-xs {width: 25%;}
    .col-4-xs {width: 33.33%;}
    .col-5-xs {width: 41.66%;}
    .col-6-xs {width: 50%;}
    .col-7-xs {width: 58.33%;}
    .col-8-xs {width: 66.66%;}
    .col-9-xs {width: 75%;}
    .col-10-xs {width: 83.33%;}
    .col-11-xs {width: 91.66%;}
    .col-12-xs {width: 100%;}

}

/* Tablets (portrait) */ /* sm */
@media only screen and (min-width: 558px) {

    .col-1-sm {width: 8.33%;}
    .col-2-sm {width: 16.66%;}
    .col-3-sm {width: 25%;}
    .col-4-sm {width: 33.33%;}
    .col-5-sm {width: 41.66%;}
    .col-6-sm {width: 50%;}
    .col-7-sm {width: 58.33%;}
    .col-8-sm {width: 66.66%;}
    .col-9-sm {width: 75%;}
    .col-10-sm {width: 83.33%;}
    .col-11-sm {width: 91.66%;}
    .col-12-sm {width: 100%;}

}

/* Desktops and laptops */ /* md */
@media only screen and (min-width: 992px) {

    .col-1-md {width: 8.33%;}
    .col-2-md {width: 16.66%;}
    .col-3-md {width: 25%;}
    .col-4-md {width: 33.33%;}
    .col-5-md {width: 41.66%;}
    .col-6-md {width: 50%;}
    .col-7-md {width: 58.33%;}
    .col-8-md {width: 66.66%;}
    .col-9-md {width: 75%;}
    .col-10-md {width: 83.33%;}
    .col-11-md {width: 91.66%;}
    .col-12-md {width: 100%;}

}