@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
	--bs-font-sans-serif: 'Open Sans', -apple-system, sans-serif;
	--font-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
	--font-heading: 'Montserrat', sans-serif;
	--font-fancy: 'Merienda', cursive;
	--color1: #530053;
	--color1-h: 300;
	--color1-s: 100%;
	--color1-l: 16%;
	--color2: #3A7CA5;
	--color2-h: 203;
	--color2-s: 48%;
	--color2-l: 44%;
	--color3: #DCD6F7;
	--color3-h: 251;
	--color3-s: 67%;
	--color3-l: 96%;
	--bs-offcanvas-width: 320px;
}

html {
   scroll-behavior: smooth;
}

body {
   font-weight: 400;
   font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
}

.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
   position: static;
}

.form-control::placeholder {
   color: rgba(var(--bs-body-color-rgb), .45);
   opacity: 1; /* Firefox */
}

.form-floating > label {
   color: rgba(var(--bs-body-color-rgb), .45);
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-heading);
   font-weight: 600;
}

.medium {
   font-size: .925rem;
}
.tiny {
   font-size: .75rem;
}

.clickable {
   cursor: pointer;
}

.plain, .plain:focus, .plain:active {
   text-decoration: none;
}
.plain:hover {
   text-decoration: underline;
}

.font-industrial {
   font-family: var(--font-industrial);
}
.font-heading {
   font-family: var(--font-heading);
}
.font-fancy {
   font-family: var(--font-fancy);
}

.text-1 {
   color: hsl(var(--color1-h), var(--color1-s), var(--color1-l));
}
.text-2 {
   color: hsl(var(--color2-h), var(--color2-s), var(--color2-l));
}

.bg-1 {
   background-color: hsl(var(--color1-h), var(--color1-s), var(--color1-l));
}
.bg-2 {
   background-color: hsl(var(--color2-h), var(--color2-s), var(--color2-l));
}
.bg-3 {
   background-color: hsl(var(--color3-h), var(--color3-s), var(--color3-l));
}
.text-bg-1 {
   background-color: hsl(var(--color1-h), var(--color1-s), var(--color1-l));
   color: white;
}
.text-bg-2 {
   background-color: hsl(var(--color2-h), var(--color2-s), var(--color2-l));
   color: white;
}
.text-bg-3 {
   background-color: hsl(var(--color3-h), var(--color3-s), var(--color3-l));
   color: var(--color1);
}

.border-org {
   border-color: hsl(var(--color1-h), var(--color1-s), var(--color1-l)) !important;
}

.border-thm {
   border-color: hsl(var(--color2-h), var(--color2-s), var(--color2-l)) !important;
}

.btn-xs {
	padding: .1rem .4rem;
	font-size: .75rem;
}

.btn-1, .btn-1-outline:hover {
   background-color: hsl(var(--color1-h), var(--color1-s), var(--color1-l)) !important;
   color: white !important;
   border-color: hsl(var(--color1-h), var(--color1-s), var(--color1-l)) !important;
   border-width: 2px;
}
	.btn-1:hover {
		--color1-l: 26%;
	}
.btn-1-outline {
	background-color: white;
	border-color: var(--color1);
	border-width: 1px;
}

.btn-2, .btn-2-outline:hover {
   background-color: hsl(var(--color2-h), var(--color2-s), var(--color2-l)) !important;
   color: white !important;
   border-color: hsl(var(--color2-h), var(--color2-s), var(--color2-l)) !important;
   border-width: 2px;
}
   .btn-2:hover {
      --color2-l: 52%;
   }
.btn-2-outline {
   background-color: white;
   border-color: hsl(var(--color2-h), var(--color2-s), var(--color2-l));
   border-width: 1px;
}


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

.box-xs {
   width: 2rem;
   height: 2rem;
}

.box-sm {
   width: 3rem;
   min-width: 3rem;
   height: 3rem;
}

.box-action {
   width: 20rem;
}

.box-info {
   width: 260px;
}