/* General body styles */
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
    background-color: #DFDDDE;
    color: #333;
}

/* Header styles */
.header {
    background: linear-gradient(to left, #DFDDDE, #8ABC9C);
    background-color: #D9D6D6;
    color: #fff;
    text-align: center;
    padding: 1em 0;
    height: 6em
}

.header-bar-fly {
    height: 20px; /* Adjust the height as needed */
    background-color: #030504; /* Choose your desired color */
    width: 100%;
}

.header-bar-fall {
    height: 20px; /* Adjust the height as needed */
    background-color: #030504; /* Choose your desired color */
    width: 100%;
}

.logo {
    padding-left: 15%;
    margin-top: -5px;
}

.header-font-size {
    color: #FCFCFC;
    font-size: 75px; /* or any other size you prefer */
    width: 5em;
    padding-left: 10%;
    margin-bottom: -20px;
    margin-top: -25px;
    text-shadow: -4px 5px 4px rgba(0, 0, 0, 0.5); /* x-offset, y-offset, blur-radius, color */
}

/* Header Image */
img.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

input[type="text"] {
    width: 700px; /* Set the width of the text fields */
    height: 50px; /* Set the height of the text fields */
}
input[type="submit"], button {
    width: 100px; /* Set the width of the submit button and clear button */
    height: 30px; /* Set the height of the buttons */
}

textarea[type="text"] {
    width: 700px; /* Set the width of the text area */
    height: 130px; /* Set the height of the text area */
    resize: vertical; /* Allow the user to resize vertically */
    overflow: auto; /* Add scroll when the content overflows */
}

form {
    margin-top: 20px; /* Give some space at the top */
}

label {
    font-family: 'Montserrat', sans-serif;
    font-size: large;
    font-weight: 600;
}

#history {
    flex: 1; /* Allow history to fill the available space */
    overflow-y: auto; /* Add a scrollbar if necessary */
    padding: 10px; /* Add some padding around the text */
}

input[type="text"], input[type="submit"], button {
    margin-bottom: 10px; /* Adds some space below the fields and buttons */
}

.input-preset-container {
    display: flex;
    align-items: center; /* Align items vertically */
}

#preset-menu {
    cursor: pointer;
    list-style-type: none;
    padding-left: 20px; /* Add space between the input and the preset menu */
    font-weight: 300;
    font-size: 20px;
}

#preset-menu li:hover {
    font-weight: 700;
}

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
  
.clear-history-button {
    padding: 5px 10px;
    margin-left: -112em; /* Adjust as needed */
    cursor: pointer;
}  

.response-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adds space below the response for spacing */
    margin-top: -17px;
}

.response-title {
    font-weight: bold;
    margin-right: 5px; /* Adjust the spacing between title and text as needed */
    margin-top: -1px;
}

.response-container .response-text {
    margin-right: 10px; /* Adjust the spacing as needed */
}

.assist-button {
    margin-left: 10px; /* Adjust the spacing as needed */
    margin-bottom: 0px;
}

.hidden {
    display: none;
}

/* CHARCTER FIELD VISIBILITY IN HISTORY */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

/* Navigation menu styles */
nav {
    background: #444;
    color: #fff;
    text-align: center;
    padding: 0.5em 0;
}

nav a {
    color: #fff;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    text-decoration: underline;
}

.box {
    width: 200px; /* Width of the box */
    height: 200px; /* Height of the box */
    background-color: rgba(0, 0, 255, 0); /* Background color */
    margin: auto 10px;
    display: inline-block;
    border: 4px solid black; /* Border around the box */
    border-radius: 15%;
    text-align: center; /* Center text horizontally */
    line-height: 20px; /* Center text vertically */
    box-sizing: border-box;
}

.box hr {
    border: none;
    height: 4px;
    background-color: black; /* Line color */
    margin-top: 10px; /* Space between text and line */
    margin-bottom: 10px; /* Space between line and rest of the box */
}

.online {
    color: #8ABC9C; /* Green for online status */
    animation: none; /* Stops any animation */
}

.offline {
    animation: flashRed 1s infinite; /* Animation name, duration, and iteration count */
}

@keyframes flashRed {
    0%, 100% { color: #030504; } /* Default color */
    50% { color: red; } /* Flash color */
}

.box h2.online {
    color: #8ABC9C; /* Green for online status */
}

.box h2.offline {
    color: #ff0000; /* Red for offline status */
}

/* Main content styles */
main {
    padding: 20px;
}

/* Footer styles */
footer {
    background-color: #030504;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
}

/* Paragraph styles */
p {
    line-height: 1.5;
}

/* Heading 1 styles */
h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 2em; /* larger font size */
    color: #030504; /* dark color */
    margin-bottom: 0.5em;
}

/* Heading 2 styles */
h2 {
    font-size: 1.75em;
    color: #030504; /* slightly lighter color */
    margin-bottom: 0.5em;
}

.h2-online {
    color: green;
}

.h2-offline {
    color: red;
}

/* Heading 3 styles */
h3 {
    font-size: 1.5em;
    color: #777; /* even lighter color */
    margin-bottom: 0.5em;
}

/* Heading 4 styles */
h4 {
    font-size: 1.25em;
    color: #999; /* lighter color */
    margin-bottom: 0.5em;
}

/* Heading 5 styles */
h5 {
    font-size: 1em;
    color: #9e9e9e; /* much lighter color */
    margin-bottom: 0.5em;
}

/* Heading 6 styles */
h6 {
    font-size: 0.875em; /* smallest font size */
    color: #cacaca; /* lightest color */
    margin-bottom: 0.5em;
}