@font-face { /* adds new font locally */
    font-family: ScienceGothic;
    src: url(ScienceGothic.ttf);
}

@font-face {
    font-family: Barlow;
    src: url(Barlow.ttf);
}

@font-face {
    font-family: Archivo;
    src: url(Archivo.ttf);
}

nav .navbar-brand { /* makes the bootstrap navbar un-interactable */
    pointer-events: none;
    cursor: default;
}

.navbar-brand { /* font and colour for the text in the header */
    font-family:ScienceGothic, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(0, 71, 171);
}

.small-is { /* used to make the "is" in the "SHisH" text in the header smaller than the rest of the text */
    font-size: 0.6em;
    vertical-align: middle;
}

.header-mid { /* black header text that is alligned in the middle */
    font-family:Archivo,'Times New Roman', Times, serif;
    color: rgb(0, 0, 0);
    font-weight: bold;
    text-align: center;
}

.header-mid-2 { /* white header text that is alligned in the middle */
    font-family:Archivo,'Times New Roman', Times, serif;
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-align: center;
}

.para-left{ /* white paragraph text that is alligned to the left */
    font-family: Barlow, Verdana, Tahoma, sans-serif;
    color: rgb(0, 0, 0);
    font-style: normal;
    text-align: left;
}

.para-mid{ /* black paragraph text that is alligned in the middle */
    font-family: Barlow, Verdana, Tahoma, sans-serif;
    color: rgb(0, 0, 0);
    font-style: normal;
    text-align: center;
}

.para-mid-2{ /* white paragraph text that is alligned in the middle */
    font-family: Barlow, Verdana, Tahoma, sans-serif;
    color: rgb(255, 255, 255);
    font-style: normal;
    text-align: center;
}

.image { /* universial image scaling */
    width: 75%;
}

.text-box { /* use to add a white box behind text */
    border: 25px black;
    padding: 20px;
    background: rgb(255, 255, 255);
    display: inline-block;
    margin-top: 20px;
}

.img-shadow { /* used to add shadow to images and textboxes  */
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.75);
}

body { /* the background with dynamic movement */
    position: relative;
    background-size: center;
    background-position: center;
    background-image: url(images/background.jpg);
}

body::before { /* the blue overlay and blur on the background */
    content:"";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 71, 171, 0.50);
    pointer-events: none;
    z-index: -1;
}