/* Establish all fonts */
@font-face {
    font-family: font_mawoot;
    src: url(./fonts/Mawoot.ttf);
}

@font-face {
    font-family: font_rollback;
    src: url(./fonts/rollback/Rollback.ttf);
}

/* Loading details */
.loading {
    text-align: center;
    color: red;
}

/* Some blackout stuff? */
#blackout {
    width:100%; 
    height:100%;  /* make sure you have set parents to a height of 100% too */
    position: absolute;
    left:0; top:0;
    z-index:10 /*just to make sure its on top*/
}

/* Body details */
.body-details {
    background-color:  rgb(102, 153, 153);
}

/* Section text */
.section-text {
    font-weight: bolder;
}

/* Text details for buffer title */
.results-title {
    font-weight: bolder;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Content of the results class */
.results-contents {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Title text, "Miles to Muppets" */
.title_text {
    text-align: center;
    /* font-family: title_font; */
    font-weight: bold;
    font-size: 400%;
}

/* The text below the title */
.sub_title_text {
    text-align: center;
}

/* input details */
.input-box {
    background-color: rgb(179, 204, 204);
    display: flex;
    width: 95%;
  }

/* Change input box upon focus */
.input-box:focus {
background-color: rgb(224, 235, 235);
}

/* Button details */
.button-details {
    background-color: rgb(50, 78, 78);
    color: white;
}

/* Change button color when you hover */
.button-details:hover {
    background-color: rgb(70, 109, 109); 
}

/* Visible divider lines */
/* https://www.w3schools.com/howto/howto_css_dividers.asp */
hr.solid {
    /* margin: 0.25vw; */
    border: 0.1vw solid black;
  }


/* Form container */
.data-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* margin-top: 50px; Adjust as needed */
}

/* Footer details */
.footer {
    text-align: center;
    color: black;
}