body, html {
    height: 100%;
}

/*Sets adobe fonts*/

h1 {
    font-family: apparat, sans-serif;
    font-weight: 800;
    font-style: normal;
    text-transform: capitalize;
    letter-spacing: 0.1em;
    font-size: 4em;
}

p, ul {
    font-family: rival-sans,sans-serif;
    font-weight: 400;
    font-style: normal;
}

.hero-sub-text {
    font-family: apparat,sans-serif;
    font-weight: 500;
    font-style: normal;
    background-color: brown;
}

h2, h5, h4, h3, .btn {
    font-family: rival-sans,sans-serif;
    font-weight: 500;
    font-style: normal;
}

/*Johan's Signature font*/
.signature {
    font-family: baka-too, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: x-large;
}

/*Compensates for navigation being fixed*/
.nav-spacer {
    height: 62px;
}

.nav-spacer2 {
    height: 55px;
}

/*Bold text for Admin Navigation*/
.admin-nav {
    font-weight: 700;
}

/*Styling of user status*/
.status-mobile {
    font-size: small;
}

.status-large-display{
    margin-bottom: 0;
}

#user-top-display {
    height: 30vh;
}

/*Enquiry List View*/

.col-display-width {
    min-width: 111px;
}

.pointer {
    cursor: pointer;
  }
.clickable-row:hover {
    background: lightblue;
  }

.submitted {
    background-color: lightyellow;
}

.check_email {
    background-color: lightgreen;
}

#active-delete {
    color: red;
}

/*General Website styling*/
.hero-image {
    max-height: 70vh;
}

.round-image {
    height: 200px;
    width: 200px;
}

.card-body {
    min-height: 30vh;
    padding-bottom: 50px;
}

.three-card-container {
    max-width: 500px;
}

.button-bottom {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.swedish-flag {
    width: auto;
    height: 20px;
    margin-right: 4px;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero {
    object-fit: cover;
    width: 100vw;
    height: 50vh;
}

.highlight_image {
    object-fit: cover;
    width: 100%;
    height: 40vh;
}

.highlight_image_about {
    object-fit: cover;
    width: 100%;
    height: 25vh;
}

/*adjusts margin on content when viewed via mobile*/
.text-margin {
    margin-bottom: 20px;
}

.enquiry-header {
    object-fit: cover;
    width: 100%;
    height: 25vh;
}

.account-header-image {
    object-fit: cover;
    width: 100%;
    height: 15vh;
}

.highlight-content-container {
    width: 95%;
}

.highlight-text-body {
    margin-bottom: 30px;
    margin-top: 30px;
}

.page-footer {
    margin-top: 5vh;
}

/*Pages with little content - sets a min height for better footer placement*/
.low-content {
    min-height: 50vh;
}

.single-card {
    width: 95%;
}

.side_image_about {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.text-header {
    padding-top: 25px;
    padding-bottom: 5px;
}

/*form template*/

.form-container-outer {
    padding-top: 3vh;
    padding-bottom: 3vh;
}

.form-container {
    width: 80%; 
}

.form-spacer {
    height: 3vh;
}

/*sign up form styling*/
.sign-up-error {
    color: red;
    font-size: smaller;
}

/*text sizing of user-feedback messages*/
#message {
    font-size: smaller;
}

/*Submit Form Comments Styling*/
.comments-width {
    max-width: 12rem;
}

@media (max-width: 768px) { 
    .hero-text {
        width: 80%;
    }

    h2 {
        font-size: 2rem;
    }

    tr, th, td, .btn {
        font-size: small;
    }

    .col-display-width {
        min-width: 101px;
    }

    /*Submit Form Comments Styling*/
    .comments-width {
        max-width: 6rem;
    }
}

@media (max-width: 576px) { 
    .form-container {
        width: 95%; 
    }

    .hero-text {
        text-align: center;
        position: relative;
        top: -200px;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        width: 80%;
    }

    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2rem;
    }

    p {
        font-size: smaller;
    }

    tr, th, td, .btn {
        font-size: smaller;
    }

    #list-view-delete-button {
        font-size: 15px;
    }

    .col-display-width {
        min-width: 51px;
    }
}