@font-face {
  font-family: Futura;
  src: url(fonts/FuturaBoldItalicfont.ttf);
}

@font-face {
  font-family: Bodoni;
  src: url(fonts/BodoniFLF-BoldItalic.ttf);
}


a:link, a:visited, a:active
{
    text-decoration: none;
    color: lightseagreen;
}
a:hover
{
    text-decoration: underline;
}

body
{
    margin: auto;
}

/*
.furniture
{
    display: none;
}
*/

/*  ------------- TEXT THINGS -------------------------*/
h1
{
    font-family: "bodoni", serif;
    font-size: 60pt;
    margin-top: 0;
    text-align: center;
    width: auto;
    color: black;
}

h2
{
    font-family: "Futura", cursive;
    font-size: 22pt;
    color: black;
}

h3
{
    font-family: "Futura", cursive;
    font-size: 22pt;
    margin-top: 0px;
    color: black;
}

p
{
    font-family: "Futura", cursive;
    color: black;
}


/*------------------------ REPEATABLE HEADER CONTAINER ------------------------*/

#containerHEADER
{
    display: grid;
    grid-template-columns: 5% 40% 20% 20% 10% 5%;
    grid-template-rows: 5vh 5vh 5vh 5vh;
    height: auto;
    background-color: white;
}

.header
{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-left: 0px;
    
}

#moon
{
    grid-column: 5 / 6;
    grid-row: 2 / 4;
    width: 60px;
    display: inherit;
    margin: auto;
}

#sun
{
    grid-column: 5 / 6;
    grid-row: 2 / 4;
    width: 60px;
    display: none;
    margin: auto;
}


.NAVIGATION
{
    display:flex;
    grid-column: 4 / 5;
    grid-row: 2 / 4;
    margin-right: 0px;
}


/* ------------------- NAV BAR ----------------------------------------------- */
    


#NAVIGATION2
{
    display:flex;
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    background-color: lightseagreen;
    position: sticky;
    top: 0;
}

.nav
{
    font-size: 25pt;
}

.navItem
{
    font-family: "Futura";
    font-size: 18pt;
    margin: auto;
}

#home
{
    width: 50px;
    margin: auto;
}

.winnersNAV p, .newsNAV p, .creditNAV p, .myhubNAV p
{
    color: white;
}

.navItem:hover
{
    text-decoration: underline;
/*    color: white;*/
}

#explainer
{
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 5vh 15vh;
    margin: auto;
}

#explainText
{
    margin: auto;
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 20pt;
    border-style: dashed;
    padding: 20px;
}

#footer
{
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 3vh 15vh;
    margin: auto;
    background-color: white;
}

#footerText
{
    margin: auto;
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 20pt;
    border-color: black;
    border-style: dashed;
    padding: 20px;
}

/* ------------------- MAIN PAGE ----------------------------------------------- */


.object
{
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 5vh 10vh 3vh auto 10vh;
    height: auto;
    margin: auto;
}

.object2
{
    display: grid;
    grid-template-columns: 10% 37.5% 5% 37.5% 10%;
    grid-template-rows: 5vh 10vh 3vh 200vh 10vh;
    height: auto;
    margin: auto;
}

.object3
{
    display: grid;
    grid-template-columns: 10% 37.5% 5% 37.5% 10%;
    grid-template-rows: 5vh 10vh 5vh auto 10vh;
    height: auto;
    margin: auto;
}


.objectTitle
{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: auto;
    font-size:  35pt;
    text-align: center;
}

.image
{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.objectTitle2
{
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    margin: auto;
    font-size:  35pt;
    text-align: center;
}

.image2
{
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.objectTitle3
{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: auto;
    font-size:  35pt;
    text-align: center;
}

.image3
{
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: auto;
}

.divider
{
    grid-column: 1 / 6;
    grid-row: 7 / 8;
    margin: auto;
}

#fashion, #drie, #graphics, #contact, #about
{
    display: none;
}

/* ------------------- ABOUT PAGE ----------------------------------------------- */

#aboutText
{
    margin: auto;
    text-align: center;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 20pt;
    border-style: dashed;
    padding: 20px;
}



#explainer1
{
    display: grid;
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 3vh 25vh;
    margin: auto;
}

#CV
{
    display: grid;
    grid-template-columns: 24% 56% 20%;
    grid-template-rows:auto;
    height: auto;
    margin: auto;
}

/* ------------------------- MEDIA QUERY --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


@media (max-width: 1500px) {
    #explainer1
    {
        grid-template-columns: 10% 80% 10%;
    }
    #explainer
    {
        grid-template-columns: 10% 80% 10%;
    }
    h1
    {
        font-size: 50pt;
        margin: auto;
    }
}

@media (max-width: 1320px) {
    
    
    #containerHEADER
    {
        grid-template-columns: 5% 40% 10% 30% 10% 5%;
    }
    
}

@media (max-width: 1250px) {
    
    
    h1
    {
        font-size: 40pt;
    }
    
}

@media (max-width: 1080px) {
    
    #home
    {
        width: 35px;
    }
    
}


@media (max-width: 800px) {
    #moon
    {
        width: 60px;
    }
    
    #sun
    {
        width: 60px;
    }
}



/* Mobile devices */


/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
    h1 {
        font-size: 45pt;
    }

    h2, h3 {
        font-size: 20pt;
    }

    .nav {
        font-size: 22pt;
    }

    .navItem {
        font-size: 16pt;
    }

    #containerHEADER {
        grid-template-columns: 15% 70% 15%;
    }

    .NAVIGATION
    {
        display:flex;
        grid-column: 2 / 3;
        grid-row: 3 / 5;
        margin: auto;
        width: 50%;
    }

    #explainer, #footer, .object, .object2{
        grid-template-columns: 10% 80% 10%;
    }

    .objectTitle, .objectTitle3 {
        font-size: 30pt;
    }

    #explainText, #footerText, #aboutText {
        font-size: 16pt;
    }
    .object3
    {
        grid-template-columns: 10% 80% 10%;
        grid-template-rows: 5vh 10vh 5vh auto 10vh 5vh 10vh 5vh auto 10vh;
    }
    
    .image2
    {
        grid-column: 2 / 3;
        grid-row: 9 / 10;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .objectTitle2
    {
        grid-column: 2 / 3;
        grid-row: 7 / 8;
        font-size: 30pt;
    }
    
    #moon, #sun
    {
        grid-column: 3 / 4;
        grid-row: 2 / 4;
        width: 50px;
    }
}

@media (max-width: 660px) {
    h1
    {
        font-size: 40pt;
    }
    #aboutText
    {
        font-size: 14pt;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 30pt;
    }

    h2, h3 {
        font-size: 16pt;
    }

    .nav {
        font-size: 18pt;
    }

    .navItem {
        font-size: 14pt;
    }

    #containerHEADER {
        grid-template-columns: 20% 60% 20%;
    }

    .NAVIGATION {
        display:flex;
        grid-column: 2 / 3;
        grid-row: 3 / 5;
        margin: auto;
        width: 70%;
    }

    #explainer, #footer, .object, .object2{
        grid-template-columns: 5% 90% 5%;
    }
    .object3
    {
        grid-template-columns: 5% 90% 5%;
        grid-template-rows: 5vh 10vh 5vh auto 10vh 5vh 10vh 5vh auto 10vh;
    }
    .image2
    {
        grid-column: 2 / 3;
        grid-row: 9 / 10;
    }
    
    .objectTitle2
    {
        font-size: 25pt;
        grid-column: 2 / 3;
        grid-row: 7 / 8;
    }
    
    .objectTitle, .objectTitle3 {
        font-size: 25pt;
    }

    #explainText, #footerText, #aboutText {
        font-size: 16pt;
    }
    
    #moon, #sun
    {
        grid-column: 3 / 4;
        grid-row: 2 / 4;
        width: 40px;
    }
}

@media (max-width: 550px) {

    #aboutText
    {
        font-size: 12pt;
    }
    #containerHEADER
    {
        grid-template-columns: 15% 70% 15%;
    }
    
    #moon, #sun
    {
        grid-column: 3 / 4;
        grid-row: 2 / 4;
        width: 40px;
    }
}