/* Default styles for base html types */
/* -------------------------------------------------------------------------- */
html
{
  font-size: 16pt; /* Base unit for rem scaling */
}

body
{
  color: var(--color-text-normal);
  background-color: var(--color-background);
  margin-left: .5rem;
  margin-right: .5rem;
  --border-radius: .5rem;
}

h2
{
  font-size: 1.7rem;
  color: var(--color-text-highlight);
  font-family: tangerine;
  font-weight: bold;
}

h3
{
  color: var(--color-text-highlight);
  margin: .5rem;
  font-size: 1.5rem;
  font-family: tangerine;
  font-weight: bold;
}

.bad
{
	color:red;
}

#content > div
{
  font-family:courgette;
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  padding: var(--border-radius);
  line-height: 1.4rem;
}

/* Text Styling */

/* Indented Text */
.main-paragraphs p,
.secondary-paragraphs p
{
  text-indent: 2rem;
}
.c2-text > p:first-of-type,
.main-paragraphs p:first-of-type
{
  padding-top: .5rem;
}

.c2-text > p:first-of-type::first-letter,
.main-paragraphs > p:first-of-type::first-letter
{
  letter-spacing: 0.2rem;
  font-family: lavishlyyours;
  color: var(--color-highlight);
  font-style: italic;
  font-size: 200%;
}

.c3-text p:first-of-type,
.secondary-paragraphs p:first-of-type
{
  padding-top: .5rem;
}

.c3-text > p:first-of-type::first-letter,
.secondary-paragraphs > p:first-of-type::first-letter
{
  letter-spacing: 0.2rem;
  font-family: lavishlyyours;
  color: var(--color-highlight);
  font-style: italic;
  font-size: 150%;
}

/* Link Styling */

a:link {
  color:var(--color-decoration);
}

a:visited {
  color:var(--color-text-highlight);
}

a:hover{
  color:var(--color-highlight);
}

a:active{
  color:var(--color-highlight);
}

/* Styles for the website banner */

#banner{
  color: var(--color-text-highlight);
  margin: 0px;
  font-size: 3rem;
  font-family: tangerine;
  font-weight: bold;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
}

#breadcrumbs{
  font-family: sans-serif;
  font-size: .6rem;
  background-color: var(--color-work-area);
  margin-top:2px;
  margin-bottom:2px;
  margin-left: .3rem;
  padding-bottom: .1rem;
}

#content{
  background-color: var(--color-border);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  padding: var(--border-radius);
  padding-top: 0;
}

/* Header and Content Boxes */
/* -------------------------------------------------------------------------- */

/* Rounded Corners*/
.h2-box,
.h3-box,
.c2-box,
.c3-box,
.section-box,
.article-box,
.icon-box
{
  border-radius: var(--border-radius);
}

/* General use classes */
/* -------------------------------------------------------------------------- */
.h2-box
{
  min-height: 35px;
  margin-top: var(--border-radius);
  padding-top: 25px;
  padding-bottom: 2px;
  padding-left: 35px;
  overflow: visible;
  border: 1px solid var(--color-secondary4);
  background-image: url(/_resources/themes/starlight/images/shooting-stars.png), linear-gradient(var(--color-border), var(--color-background));
  background-repeat: no-repeat;
  clear: both;
}

.h2-box:first-child
{
  margin-top:0;
}

.h2-box p
{
  text-indent: 0;
}

.h3-box{
  background-image: linear-gradient(178deg, var(--color-background), var(--color-border));
  border: 1px solid var(--color-secondary2);
  padding: .3rem 1rem;
  margin-top: .5rem;
  clear: both;
}

.h3-box h3{
  margin:0;
}

.h3-box p{
  font-size: .7rem;
  font-family: alegreya;
  color: var(--color-text-dimmed);
  line-height: 1rem;
  margin-left: 1rem;
  text-indent: 0;
}

.c2-box
{
  margin-top: .5rem;
  padding: .5rem;
  border: 3px solid var(--color-border);
}

.c3-box
{
  margin-top: .5rem;
  padding: .5rem;
  border: 1px solid var(--color-border);
}

.card-container
{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.5rem;
}

.linked-card
{
	text-decoration:none;
}

.linked-card .card-box:hover
{
	border-color:var(--color-decoration-dark);
}

.clickable-card:hover
{
	border-color: var(--color-decoration-dark);
	color: var(--color-decoration);
}

.card-box
{
  width: 300px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius);
  padding: var(--border-radius);
}

.card-box.active
{
	background: var(--color-primary2);
}

.card-box.active .icon-box
{
	border-color: var(--color-decoration);
	border-width: 2px;
}

.card-header
{
  display: flex;
  align-items: center;
}

.card-content
{
	display:flex;
	flex-direction:column;
	gap:.5rem;
}

.card-content > div:first-child
{
  margin-top: .5rem;
}

.card-title
{
flex:1;
text-align:center;
margin-left: .5rem;
font-size: .8rem;
}

.icon-box
{
  height:50px;
  width:50px;
  overflow:hidden;
  border:1px solid;
	
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;	
}

.icon-box img
{
  display:block;
  width:auto;
  height:100%;
}


/* Styles for the website notices or warnings */

.notice {
  font-size: .8rem;
  font-style: italic;
  line-height: 1rem;
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  border: 2px solid var(--color-decoration);
  margin-left: .6rem;
  margin-right: .6rem;
  padding: .6rem;
  width: auto;
}

.notice > p{
margin: 0;
}

/* Styles for rounded tabs */

.toptab
{
  border-style: solid solid none solid;
  border-width: 2px;
  border-color: transparent;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

.toptab:hover
{
  border-color: unset;
}

.dropdown{
  display: inline-block;
  position: relative;
}
.dropdown-content
{
  background-color: var(--color-border);
  position: absolute;
  display: none;
  padding: .6rem;
  z-index: 11;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.formfield.field {
  margin-top: .25rem;
  margin-bottom: 1rem;
}

.formfield input,
.form-container input
{
  font-family: 'courgette';
  font-size: 1rem;
  color: var(--color-text-highlight);
  border: 1px solid var(--color-decoration-dark);
  border-radius: 4px;
  padding: .25rem;
  box-sizing: border-box;
  background: var(--color-primary2);
}

input[type="text"],
input[type="url"]
{
    font-family: 'courgette';
    font-size: 1rem;
    color: var(--color-text-highlight);
    border: 1px solid var(--color-decoration-dark);
    border-radius: 4px;
    padding: .25rem;
    box-sizing: border-box;
    background: var(--color-primary2);

}
.formfield label {
	font-family: 'tangerine';
	font-size: 2rem;
}

.btn-toolbar {
	display: flex;
	justify-content: center;
	align-items:center;
	gap:2rem;
}

button,
input[type="submit"],
.button
{
	color: var(--color-text-normal);
	border-color: var(--color-decoration);
	border-radius: .5rem;
	border-style: solid;
	border-width: 1px;
	background-color: var(--color-primary3);
	font-family: 'courgette';
	font-size: 1rem;
	margin:.5rem .25rem;
	margin:.5rem .25rem;
	padding: .2rem .4rem;
	text-decoration:none;
	vertical-align: middle;
}

input[type="checkbox"]
{
	vertical-align:middle;
}

/* Dialog Box Styling */
dialog
{
	background-color: var(--color-background);
	padding: .5rem;
	border-radius: var(--border-radius);
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4);
	border-width: 1px;
    border-color: var(--color-secondary2);
    border-style: solid;
	color: var(--color-text-normal);
}
dialog::backdrop
{
	background-color: rgba(0,0,0,0.6);
}