@font-face {
    font-family: "bullgine";
    src: url(./media/fonts/Bullgine/Bullgine.otf);
}

@font-face {
    font-family: "grandice";
    src: url(./media/fonts/Grandice/Grandice.ttf);
}

@font-face {
    font-family: "killviners";
    src: url(./media/fonts/Killviners/Killviners.ttf);
}

@font-face {
    font-family: "techno_race";
    src: url(./media/fonts/Techno-Race/Techno\ Race/TechnoRace-Regular.ttf);
}

@font-face {
    font-family: "spectral_bold";
    src: url(./media/fonts/Spectral-Bold.ttf);
}

@font-face {
    font-family: "spectral_regular";
    src: url(./media/fonts/Spectral-Regular.ttf);
}

@font-face {
    font-family: "spectral_light";
    src: url(./media/fonts/Spectral-Light.ttf);
}

@font-face {
    font-family: "prohibition";
    src: url(./media/fonts/Prohibition-Regular.ttf);
}

.portallogo {
    width: 100%; 
    height: auto; 
    object-fit: cover;
    object-position: 50% 50%; 
    max-height: 500px;
    max-width: 500px;
    transition: width 0.2s ease-in-out;
    -webkit-transition: width 0.2s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
}

.portallogo:hover {
    width: 70%;
    transition: width 0.5s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
}

.portaldiv {
    display:flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.infodiv {
    display:flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
}

.previewimg {
    width: 100%; 
    height: 125px; 
    object-fit: cover;
    object-position: 50% 50%; 
    border-radius: 20px;
    transition: 0.8s ease;
}
.previewimg:hover {
    object-fit: cover;
    object-position: 45% 45%; 
    border-radius: 20px;
    transition: 0.8s ease;
}

.previewimgsquare {
    width: 100%; 
    height: auto; 
    object-fit: cover;
    object-position: 50% 50%; 
    border-radius: 100px;
    max-height: 200px;
    max-width:200px;
}

#logobar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.headerText_darkFantasy {
    font-family: 'bullgine';
    color: rgb(109, 109, 109);
    background-color: none;
    text-decoration:none;
    font-size: 80px;
    margin-left: 50px;
    transition: 0.5s ease-out;
}

.body_darkFantasy {
    color: rgb(181, 181, 181);
    font-family: sans-serif;
}

h2.body_darkFantasy, h3.body_darkFantasy {
    color: rgb(225, 225, 225);
    font-family: 'killviners', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    letter-spacing: 3px;
    font-size: 50px;
    font-weight: lighter;
}

h5.body_darkFantasy, h6.body_darkFantasy {
    color: rgb(181, 181, 181);
    font-family: sans-serif;
    font-size: small;
    letter-spacing: 3px;
    font-weight: lighter;
}

.headerText-light {
    color: #fff;
    font-family: 'Trebuchet MS Bold', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration:none;
}

.headerText-dark {
    color: #000;
    font-family: 'Trebuchet MS Bold', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration:none;
}

.navlink-color-orange {
    color: #ff8800;
}

.nav-link {
    font-family: 'Trebuchet MS Bold', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.bodytext {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.headerText_darkFantasy:hover {
    color: #ffffff;
    text-shadow: 0px 0px 15px white;
    transition: 0.5s ease-out;
    /*
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    */
}

.mylogo {
    height: 100px;
    width: 100px;
    margin: auto;                
}

#coverSlide {
    display: fixed;
    position: absolute;
    z-index: 3;
    height: 500%;
    width: 100%;
    transition: height 1.0s ease;
}
#coverImage {
    display: block;
    margin: auto;
    height: 10%;
}