@font-face {
    font-family: 'Supreme';
    font-style: normal;
    font-weight: 400;
    src: url('https://cyrustt.github.io/docs/assets/Fonts/Supreme/Supreme-Regular.otf');
}

@font-face {
    font-family: 'Supreme';
    font-style: normal;
    font-weight: 700;
    src: url('https://cyrustt.github.io/docs/assets/Fonts/Supreme/Supreme-Bold.otf');
}

@font-face {
    font-family: 'Supreme';
    font-style: normal;
    font-weight: 200;
    src: url('https://cyrustt.github.io/docs/assets/Fonts/Supreme/Supreme-Light.otf');
}

@font-face {
    font-family: 'Supreme';
    font-style: normal;
    font-weight: 100;
    src: url('https://cyrustt.github.io/docs/assets/Fonts/Supreme/Supreme-Thin.otf');
}

@font-face {
    font-family: 'Source-sans-pro';
    font-style: normal;
    font-weight: 500;
    src: url('https://cyrustt.github.io/docs/assets/Fonts/Source-sans-pro/SourceSansPro-Regular.otf');
}
*:root {

    margin: 0;
    padding: 0;

    /*Colors:*/
    --white: #FFFFFF;
    --black: #171717;
    --grey: #EDEDED;

    /*Font/text values*/
    --main-font: Supreme;
    --sub-font: Source-Sans-Pro;
    --font-style-normal: normal;
    --font-weight-medium: medium;
    --font-weight-normal: normal;
    --font-size-20: 20px;
    --font-size-28: 28px;
    --character-spacing-4: 4px;
    --character-spacing-5-6: 5.6px;
    --line-spacing-28: 28px;
    --line-spacing-40: 40px;
    --text-transform-uppercase: uppercase;

    /*Character Styles*/
    .sub-font {
    font-family: var(--sub-font);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-10);
    line-height: var(--line-spacing-28);
    letter-spacing: var(--character-spacing-4);
    color: var(--color-171717);
    text-transform: var(--text-transform-uppercase);
    }
    .main-font {
    font-family: var(--main-font);
    font-style: var(--font-style-normal);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-28);
    line-height: var(--line-spacing-40);
    letter-spacing: var(--character-spacing-5-6);
    color: var(--color-ffffff);
    text-transform: var(--text-transform-uppercase);
    }

}

.main-font {
    font-family: Supreme;
    font-weight: light;
    letter-spacing: 5px;
    font-size: 30px;
    color: black;
}

.sub-font {
    font-family: Source-sans-pro;
    font-size: 10px;
    color: black;
}

.nav-font {
    font-family: Supreme;
    letter-spacing: 3px;
    font-size: 13px;
}

.copyright {
    font-size: 10px;
    letter-spacing: 3px;
}

#centre-text {
    font-family: Supreme;
    font-weight: normal;
    font-size: 15px;
    color: white;
    letter-spacing: 6px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}

p {
    margin: 0;
}

a:link {
    color: black;
}

.image {
    width: 100vw;
    height: 100vh;
    margin: 0;
    max-width: 100%;
    background-image: url("docs/assets/Landing/DSC03262.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.frontNav {
    display: block;
    margin-top: 10px;
    margin-right: 30px;
    margin-left: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.first {
    font-weight: bold;
    font-size: 16px;
}

button:focus {
    outline:0;
}

.arrowButton {
    top: 95%;

}

#aboutpara {
    letter-spacing: 1px;
    font-size: 14px;
}

.hyperfont {
    font-family: Supreme;
    font-weight: light;
    font-size: 15px;
    letter-spacing: 3px;
}

#hyperlogo {
    transform: translate(-2px, -2px);
}

.tagfont {
    font-family: Supreme;
    font-weight: normal;
    font-size: 20px;
    letter-spacing: 4px;
}

.tagfont2 {
    font-family: Supreme;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 3px;
}

img {
    border-radius: 5px;
}

.alert-fixed {
    position:fixed;
    width: 100%;
    z-index:9999;
}