/* Colours */

:root {
    --base: black;
    --dark: #0f0f0f;
    --mid: #464866;
    --primary: #00bfff;
    --secondary: #33ccff;
    --tertiary: #ffffff;
    --quaternary:#999999;
    --hover: #C5C6C7;
    --active: gold;
    --alert: aqua;
}

/* Responsive */

@media screen and (max-width: 480px) {
    .date {max-width: 100%;}
}
  
@media screen and (min-width: 480px) and (max-width: 1480px) {
}
  
@media screen and (min-width: 1480px) {
}

/* Main */

html{
height: 100%;
overflow: scroll;
}

body {
font-family: 'Raleway', sans-serif;
font-weight: 400;
background:var(--base);
color: var(--tertiary);
}

p {
font-family: 'Raleway', sans-serif;
font-size:18;
color:var(--tertiary);
}

hr {
border-top: 5px solid rgba(255, 255, 255, 0.1);
}

.img_enlarge {
transition:transform 0.25s ease;
position:relative;
}

.img_enlarge:hover {
-webkit-transform:scale(2);
transform:scale(2);
z-index:1;
}

.center iframe {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: var(--primary);
}

/* Decoration */

strong {font-weight:700;}

.title {
font-family: "sail";
/* font-family: sail, sans-serif; */
font-size: 100;
color: var(--dark);
text-shadow: 0 0 15px var(--tertiary), 0 0 15px var(--tertiary), 0 0 15px var(--tertiary), 0 0 15px var(--tertiary);
}
  
.hs1 {
font-family: 'Fredericka the Great';
font-size: 32;
border-radius: 25px;
padding: 20px;
margin-bottom: 20;
color: var(--dark);
font-weight: bold;
background-image: url("../images/banner 2.jpg");
background-size: cover;
text-shadow: 0 0 15px var(--tertiary), 0 0 15px var(--tertiary), 0 0 15px var(--tertiary), 0 0 15px var(--tertiary);
}

.hs2 {
font-family:'Fredericka the Great';
font-size: 26;
margin-bottom: 20;
color: var(--secondary);
}

.hs3 {
font-family: 'Satisfy';
font-size: 20;
margin-bottom: 20;
color: var(--secondary);
}

.ps1 {
font-family: 'Raleway', sans-serif;
font-size:14;
color:var(--tertiary);
}

/* for in-text cursive */
.ps2 {
font-family: 'Cedarville Cursive';
font-size: 20;
}

/* Highlight classes for text */

.hl1 {
color:var(--secondary);
font-style: italic;
}

.date {
    background-color: var(--mid);
    font-family:'Lucida Sans', sans-serif;
}

/* Components */

.footer-icon {
width: 32;
height: 32;
fill: currentColor;
}

.footer-2 {
padding: 20;
background-color: var(--dark);
}

.card {
background-color: var(--base);
}

.jumbotron {
background-color: var(--base);
margin-top: 0;
}

.jumbotron-title {
    width:100%;
    height:auto;
    background-image: url("../images/banner.jpg");
    background-size: cover;
    padding: 60px;
    margin: 0px;
    opacity: 1.0;
    text-align: center;
}

a {
color: var(--primary);
text-decoration: none;
-webkit-transition: color 0.2s ease;
-moz-transition: color 0.2s ease;
transition: color 0.2s ease;
}

a:hover{
text-decoration:none;
}

.btn-primary {
color: var(--tertiary);
background-color: var(--primary);
}

.navbar-custom { 
background-color: var(--base); 
}

.thumbnail {
    width: 100%;
}