@charset "UTF-8";

html {
	font-size: 100%; /* Defaults to 16px if browser default is 16px */
/* 	font-size: calc(1em + 1vw); */
}
/* body { */
/*     background-image: url('../image/IMG_0010.jpeg'); Specify your image path */
/*     background-position: center; Center the image */
/*     background-repeat: no-repeat; Prevents the image from repeating */
/*     background-size: cover; Scales the image to cover the entire container (the viewport) */
/*     background-attachment: fixed; Optional: Fixes the background image position so content scrolls over it */
/* }     */
.fs-7 {
	font-size: 0.9rem;
}
.fs-8 {
	font-size: 0.8rem;
}
.fs-9 {
	font-size: 0.7rem;
}
.fs-10 {
	font-size: 0.6rem;
}

a:hover {
  cursor: pointer;
}
/* fieldset { */
/* 	padding-top: 0; Or a smaller value */
/* } */

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}

div, b, span {
	line-height: 1;
}

label {
	font-size: 0.8rem; /* Or use pixels like 12px */
	color: graytext;
	line-height: 1;
}

.color-red {
	color: red;
}

.no-space-lines span {
    display: block; /* If needed for block-level behavior */
    margin: 0;
    padding: 0;
    line-height: 1;
    }
    
.highlight-background {
	background-color: lightblue;
}

.rounded-box {
  border: 2px solid red; /* Sets a visible border */
  border-radius: 15px;  /* Rounds all four corners by 15 pixels */
  padding: 10px;
}

.scroll-container {
    display: flex; /* Aligns images in a row */
    overflow-x: auto; /* Adds a horizontal scrollbar when content overflows */
    white-space: nowrap; /* Prevents images from wrapping to the next line */
    gap: 10px; /* Optional: Adds space between images */
    padding: 10px; /* Optional: Adds padding around the container */
}

.scroll-container img {
    /* Optional: Ensure images maintain their aspect ratio and size correctly */
    height: 400px; /* Set a fixed height */
    width: auto;
    flex-shrink: 0; /* Prevents images from shrinking */
}