html, body {
    background-image: url(/images/digitalArt/mainbackground.jpg);
    background-size:cover;
    position: relative;
    width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    color:ghostwhite;
}

* {
    box-sizing:border-box;
}

/* || Body */
body
{

}



/* || Header */

/* header design / grid layout */
header {
    display:grid;
    grid-template-columns:5em 10em auto;  
    grid-template-rows:2.5em 2.5em;
    max-width:100%;
    background-color:black;
    color: ghostwhite;
    max-height:5em;
    border:white solid 1px;
}

/* logo size */
#logo { 
    max-width: 5em;
    height: 5em;    
}

/* title: forest hag art settings */
#title {
    grid-column-start:2;
    grid-row-start:1;
    font-size: 22pt;
    white-space:nowrap;
    font-family: 'Silent Forest','French Script MT';
    margin: 0;
    padding: 0;
    position: relative;
}

.disable-menuButtons {
    background-color: #515f54;
    border-bottom:1px solid black;
    border-right:1px solid black;
    border-left:1px solid white;
    border-top:1px solid white;
    grid-column-start: 3;
    grid-row-start: 2;
}

/* page selector buttons */
.pageButtons:link, .pageButtons:visited {
    width:contain;
    height:2.5em;
    text-decoration:none; 
    font-family: 'Silent Forest','French Script MT';
    font-size:19pt;
    font-weight:900;
    color:lightgrey;            
}

.pageButtons:hover {
    text-decoration:none;
    color:black;
}

/* Style the navigation menu */
.topnav {
    grid-row-start:1;
    position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
    display: none;
}

/* Style navigation menu links */
.topnav a {
    color: ghostwhite;
    padding: 6px 14px;
    text-decoration: none;
    font-size: 23pt;
    display: block;
    background-color: grey;
    height: 1.5em;
    border: 1px solid black;
}

/* Style the hamburger menu */
.topnav a.icon {
    background: grey;
    display: block;
    position:relative;
    height: 1.5em;
    color: black;   
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
    background-color: grey;
    color: black;
}

/* || Main */
.indexMain {
   display:grid;
}

.speedVideoContainer {
    margin-left:auto;
    margin-right:auto;
    margin-top:2em;
    margin-bottom:2em;
    position:relative;  
}

#speedVideo {
    grid-row-start:2;
    border-radius:100%;
    width:50vw;
    box-shadow:black 1vw 1vw 1vw 1vw;
}

.indexContent {
    display: grid;
    grid-template-rows: 1fr auto;
    text-align: center;
    font-size: 22pt;
    font-family: Norse;
    line-height: 40px;
    margin-left:1em;
    margin-right:1em;
}

.imageLinksContainer {
    grid-row-start:3;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1em;
    justify-items:center;
    position:relative;
}

.imageLinks img {
    height: 45vw;
}

.textLinks a:link, .textLinks a:visited {
    width: contain;
    font-family:Norse;
    text-decoration: none;
    font-size: 20pt;
    font-weight: 900;
    color: ghostwhite;
}

/* || footer */
footer
{

}



/* || fonts */
/* alternate fonts */

.fontTest
{
    font-size:40pt;
    line-height:20pt;
}

@font-face 
{
    font-family: "The Witch";
    src: url(../../fonts/TheWitch-AL34L.ttf);
    src: url(../../fonts/TheWitch-AL34L.ttf) format('woff'), 
    url(../../fonts/TheWitch-AL34L.ttf)format('opentype'), 
    url(../../fonts/TheWitch-AL34L.ttf)format('svg');
}

@font-face 
{
    font-family: "Silent Forest";
    src: url(../../fonts/SilentForest-3zrnp.ttf);
    src: url(../../fonts/SilentForest-3zrnp.ttf) format('woff'), 
    url(../../fonts/SilentForest-3zrnp.ttf)format('opentype'),
    url(../../fonts/SilentForest-3zrnp.ttf)format('svg');
}

@font-face 
{
    font-family: "Norse";
    src: url(../../fonts/Norse-KaWl.otf);
    src: url(../../fonts/Norse-KaWl.otf) format('woff'), 
    url(../../fonts/Norse-KaWl.otf)format('opentype'), 
    url(../../fonts/Norse-KaWl.otf)format('svg');
}

@font-face 
{
    font-family: "Galling";
    src: url(../../fonts/BlessTheGalling-jEV3M.ttf);
    src: url(../../fonts/BlessTheGalling-jEV3M.ttf) format('woff'), 
    url(../../fonts/BlessTheGalling-jEV3M.ttf)format('opentype'),
    url(../../fonts/BlessTheGalling-jEV3M.ttf)format('svg');
}

@font-face
{
    font-family: "Night Forest";
    src: url(../../fonts/NightForest-eZnRg.otf);
    src: url(../../fonts/NightForest-eZnRg.otf) format('woff'), 
    url(../../fonts/NightForest-eZnRg.otf)format('opentype'),
    url(../../fonts/NightForest-eZnRg.otf)format('svg');
}

@font-face 
{
    font-family: "Auldmagick";
    src: url(../../fonts/Auldmagick-gvdp.ttf);
    src: url(../../fonts/Auldmagick-gvdp.ttf) format('woff'), 
    url(../../fonts/Auldmagick-gvdp.ttf)format('opentype'), 
    url(../../fonts/Auldmagick-gvdp.ttf)format('svg');
}

@font-face 
{
    font-family: "Autumn Flowers";
    src: url(../../fonts/AutumnFlowers-9YVZK.otf);
    src: url(../../fonts/AutumnFlowers-9YVZK.otf) format('woff'), 
    url(../../fonts/AutumnFlowers-9YVZK.otf)format('opentype'), 
    url(../../fonts/AutumnFlowers-9YVZK.otf)format('svg');
}

@font-face 
{
    font-family: "Chicanos";
    src: url(../../fonts/ChicanosPersonalUseRegular-qZDw5.ttf);
    src: url(../../fonts/ChicanosPersonalUseRegular-qZDw5.ttf) format('woff'), 
    url(../../fonts/ChicanosPersonalUseRegular-qZDw5.ttf)format('opentype'), 
    url(../../fonts/ChicanosPersonalUseRegular-qZDw5.ttf)format('svg');
}


/* styles for desktop devices */
@media only screen and (min-width: 992px) {
    .topnav {
        display:none;
    }
}

/* styles for tablet devices */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .disable-menuButtons {
        display:none;
    }
    .topnav {
        display: block;
    }
}

/* styles for mobile devices */
@media only screen and (max-width: 767px) {
    .disable-menuButtons {
        display: none;
    }
    .topnav {
        display: block;
    }
}