@font-face {
    font-family: corpse;
    src: url("Corpse.ttf") format("truetype");
}

/* * {
    cursor: url(hb-mouse.gif), url(hb-mouse2.gif), auto !important;
} */

body {
    font-family: 'corpse';
    text-align: center;
    background: url('bg.png');
    background-size: cover;
    cursor: url(hb-mouse.gif), url(hb-mouse2.gif), auto !important;
}

a {
    text-decoration: none;
    color: black;
    /* box-shadow: 5px 5px 5px 5px white; */

}

a:hover {
    text-decoration: none;
    color: white;
    /* box-shadow: 5px 5px 5px 5px black; */
}

/* Large */
.container {
    padding: 5vh;
    display: flex;
/*    flex-direction: column;*/
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.item {
    padding: 2vmin;
    margin: 2vmin;
    flex: 2 1 initial;
    z-index: 1;
}

.item img { 
    width: 20vw;
    padding: 2vmin;
    border: 1px solid black;
    padding: 0;
}

.portal{
    width: 50vw;
    height: 80vh;
/*    order: 0;*/
}

.nav {
    background: rgb(255, 0, 0);
    z-index: 5;
    position: fixed;
    border: 1px solid;
}

/*
.nav:hover {
    text-decoration: rgb(255, 0, 0);
    cursor: cell;
}
*/

#head {
/*    order: 0;*/
/*    align-self: center;*/
    left: 0;
    top: 0;
    text-align: left;
}

#foot {
/*    order: 0;*/
/*    align-self: center;*/
    left: 0;
    bottom: 0;
    text-align: left;
}

#soundnav {
    right: 0;
    top: 0;
    text-align: right;
}

#visualnav {
    right: 0;
    bottom: 0;
    text-align: right;
}

/* #visualnav {
    top: 50vh;
    transform: translateY(-50%) ;
    right: 0;
    text-align: right;
} */

/* #writingnav {
    right: 0;
    bottom: 0;
    text-align: right;
} */

#writing, #visual, #sound, #contact, #recent {
/*    visibility: hidden;*/
    display: none;
}


/* Large Screens ?*/
@media all and (min-width: 801px) {
/*
    .container {
        flex-flow: row wrap;
    }
    .item img {
        width: 20vw;
    }
*/
}

/* Medium screens */
@media all and (max-width: 800px) {
/*
    .container {
        flex-flow: column wrap;
    }
*/
/*
    .item img {
        width: 30vw;
    }
*/
}

/* Small screens */
@media all and (max-width: 500px) {
/*
    .container {
        flex-flow: column wrap;
    }
*/
/*
    .item img {
        width: 30vw;
    }
*/
}