/*Well, here I am again, coding a whole seven hours after the last time I saw this code, and already I am
certain that I have no idea what the f*** I was doing before. I think I need professional help. Not with the code.*/


/* === Cormorant font setup === */
/* Cormorant — variable (weights 300–700), normal */
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant/Cormorant-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Cormorant — variable italic (weights 300–700), italic */
@font-face {
  font-family: 'Cormorant';
  src: url('fonts/Cormorant/Cormorant-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
/* Cormorant SC — static TTFs */
@font-face {
  font-family: 'Cormorant SC';
  src: url('fonts/CormorantSC/CormorantSC-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant SC';
  src: url('fonts/CormorantSC/CormorantSC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant SC';
  src: url('fonts/CormorantSC/CormorantSC-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant SC';
  src: url('fonts/CormorantSC/CormorantSC-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant SC';
  src: url('fonts/CormorantSC/CormorantSC-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* convenience variables */
:root {
  --CormorantSC: 'Cormorant SC', Arial;
  --Cormorant: 'Cormorant', serif;}
  


/* 1) Text selection highlight (drag-select text) */
::selection { background: #98001c; color: #fff; }
::-moz-selection { background: #98001c; color: #fff; } /* Firefox */

/* 2) iOS Safari tap highlight on links/buttons */
:root { -webkit-tap-highlight-color: rgba(152, 0, 28, .28); } /* or 'transparent' */

/* 3) Keyboard focus ring (instead of OS blue) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #98001c;
  outline-offset: 2px;
}

/* 4) Native form control accent (checkbox/radio/range/progress) */
:root { accent-color: #98001c; }





a{text-decoration:none;
color:#98001C}

a:hover{
color:#fa0228}

a:active{
color:#FF0405}

a:visited{
color:#4c000e}

img {
  max-width: 100%;
  height: auto;
} 

body{
background-color:#FFFFFF;
color:#000000;
font-family: var(--Cormorant);
font-size:16px;
line-height:1.6em;
margin:0;
}


h1{
color:#000000; 
  font-family: var(--CormorantSC);
  letter-spacing: .06em;
  font-weight: 600;
  margin-top: 1.2em;
  margin-bottom: .5em;}

h2{
color:#000000;
font-family: var(--CormorantSC);
letter-spacing: .06em;
font-weight: 500;
margin-top: 1.2em;
margin-bottom: .5em;
font-size:27px;}

h3{
color:#4c000e;
font-family: var(--CormorantSC);
letter-spacing: .06em;
font-weight: 500;
margin-top: 1.2em;
margin-bottom: .5em;
font-size:21px;}

h4{
color:#000000;
font-family: var(--CormorantSC);
letter-spacing: .06em;
font-weight: 500;
margin-top: 1.2em;
margin-bottom: .5em;
font-size:21px;}

h5{
color:#000000;
font-family: var(--CormorantSC);
letter-spacing: .06em;
font-weight: 500;
margin-top: 1.2em;
margin-bottom: .5em;
font-size:16px;}




.container{
overflow:hidden;
margin:.5% .5%;
}

.containerContent{
overflow:hidden;
margin: 30px 30px;
}



.spacer{
width:100%;
margin:auto;
min-height:3%;
overflow:hidden;
}


#navBar{
background-color:#4c000e;
color:#fff;
margin:0% 0%;}

#navBar ul{
padding:0;
color:#fff;
list-style:none;
}

#navBar li{
display:inline;
color:#fff;
}

#navBar a{
color:#fff;
text-decoration:none;
font-size:18px;
padding-right:15px;
font-family: var(--CormorantSC);

}

#navBar h1{
color:#fff;
font-family: var(--CormorantSC);
font-size:20px;
padding-right:0px;
padding-left:0px;
display:inline;
margin-left:0%;
text-align:left;
}




#showcase{
font-family: var(--CormorantSC);
letter-spacing: .06em;
font-weight: 700;
color: #000000;
background-position:center right;
margin:0%;
min-height:300px;
text-align:left;
}

#showcase h1{
font-family: var(--CormorantSC);
font-weight: 700;
letter-spacing: 0.06em;
color:#000000;
font-size:50px;
line-height:1.6em;
padding-top:30px;
}
#showcase::after{
  content:"";
  display:block;
  height: 21px;
  background: linear-gradient(90deg, #4C000E, #98001C 55%, #BF0023);
}
#main{
float:left;
width:70%;
padding:0 30px;
box-sizing:border-box;
}

#sideBar{
float:right;
width:30%;
padding:10px;
box-sizing:border-box;
background-color:#333;
color:#fff;
}

#mainFooter{
background:#4c000e;
color:#fff;
text-align:center;
padding:20px;
margin-top:40px;
}

@media(max-width:600px){
#main{
width:100%;
float:none;
}
#sideBar{
width:100%;
float:none;
}
}



/*--------------------------------------
Animation Block Start!
---------------------------------------*/

.layout-dark #particle-line {
    height: 540px;
}
#particles,
#particles-1,
#particle-line,
#particle-dot-line,
#particles-2,
#particle-bubble,
#bw-footer {
/*the width controls the width of the animation, it is left justified, height controls height from onset as defined by the div id particle
line in the html file */
    width: 100%;
    height: 420px;
    background-color: transparent;
    background-position: 50% 50%;
    z-index: 1;
    position: absolute;
}


/*--------------------------------------
Animation End!
---------------------------------------*/