/* Main style sheet for the whole webpage. */

/* The body, main, #arrow_to_top, a.nav_links, and nav a:visited are changed via a media query in this file. */

/* Setup a scaling font size to scale with the viewport(screen size). */
body {
    font-size: calc(10px + (26 - 10) * (100vw - 300px) / 1700);
    margin: 0px;
    /* line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300))); */
}
/* Main should be separate from body. Main contains almost every element in the gallery. */
main {
    text-align: center;
    font-family: 'geneva';
    background-color: white;
    margin: auto;
}

/* Setup sematic tag with padding, margins, font-families, font-size, and other graphical styles. */
section {
    padding: 0px 10px 0px 10px;
}
figure {
    margin: 30px 0px 30px 0px;
}
figure img {
    cursor: pointer;
}
header {
    font-family: 'Trebuchet MS', calibri, sans-serif;
    font-size: larger;
}
/* Style the predominant header, which always can be clicked to scroll a certain amount on each page. */
header h1 {
    margin: 0px;
}
header h1 a{
    padding-left: 2.8%;
    letter-spacing: .3em;
    font-weight: 500;
    text-decoration: none;
    color:black;
}
/* Move the artists name over the logo. */
.artist_name {
    position: relative;
    top: 20px;
    margin: 0px;
}
/* Position the logo and set the size. */
.logo {
    margin: 0px;
    padding-top: 25px;
}
.logo img {
    width: 35%;
    height: 35%;
    margin-bottom: 0px;
}

/* Setup the nav-bar so that it has some space above it. */
nav div {
    margin-top: 8px;  
    z-index: 1;
}
/* Setup the nav-buttons to almost match 1/7 the width of the screen. 
Also float left and make use of the scaling font size, and change the background color. */
.nav_links, .nav_dropdown_links_buttons {
    float: left;
    padding: 2% 2% 2% 1%;
    border: none;
    letter-spacing: .3em;
    font-family: Arial, Helvetica, sans-serif;
    width: 13.6663%;
    background-color: #FDF2EB;
}

.nav_dropdown_links_buttons {
    padding: 2% 0px 2% 0px;
    width: 16.6663%;
    position: relative;
}

.nav_dropdown_links_buttons:hover{
    font-weight: 600;
}

.nav_links, .nav_dropdown_links_buttons {
    font-size: .5em;
}

.nav_dropdown_links_menu {
    display: none;
    position: absolute;
    width: 100%;
    padding-top: 2%;
}

.nav_dropdown_links {
    float: none;
    display: block;
    width: 100%;
    padding: 10% 0px 10% 0px;
    font-size: .8em;
    z-index: 3;
}

.nav_dropdown_links_buttons:hover .nav_dropdown_links_menu,
.nav_dropdown_links_buttons:active .nav_dropdown_links_menu {
    display: block;
}
.nav_dropdown_links:hover {
    background-color: #939393;
}


/* Headers for art gallery. */
section h2, h3 {
    font-family: Helvetica, sans-serif;
    font-style: oblique;
    font-weight: 400;
    padding-top: 20px;
}

figcaption {
    font-family: Helvetica, sans-serif;
    font-size: .85em;
}

/* Create a modal; which allows you to click on images to display a black screen with the image centered in the middle. 
The modal is a couple of <div>[s] in all gallery pages, which needs a javascript to work effectively.*/
#modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    vertical-align: middle;
}
#modal_content {
    background-color: black;
    width: 100%;
}


/* The modal image will be as big as possible without scrolling the screen. Java script is used to identify the image to 
put in the modal. */
#modal_content img{
    max-width: 100vw;
    max-height: 100vh;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    margin: auto;
}


#video_modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    
}
#video_modal_content {
    background-color: black;
    width: 100%;
}

#video_modal_content video {
    max-width: 100vw;
    max-height: 100vh;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    margin: auto;
}

/* #video_modal_content video source{

    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    margin: auto;
} */

/* Setup a X marker as a visual indicator to click-on to close the modal(you can click anywhere to close the modal). */
#close {
    color: #aaaaaa;
    text-align: right;
    position: fixed;
    right: 5%;
    top: 2%;
    font-size: 52px;
    font-weight: 700;
}
#close:hover,
#close:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}
/* Setup format for the main blocks of text, and the header of the articles about inspiration. */
article {
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    text-indent: 2em;
    line-height: 1.3;
    font-size: 1.1em;
    font-kerning: normal;
    padding: 2% 10% 0px 10%;
    /* margin-top: 10%; */
    background-color: #FBFBFB;
}
article h3 {
    text-align: center;
    font-size: 1.8em;
    margin: 0px;
    letter-spacing: .17em;
    position: relative;
    right: 50px;
}
article p {
    margin: 0px;
}
/* Setup headers for artists statement */
article h4 {
    text-align: center;
    margin: 0px 0px 10px 0px;
    
}
/* Setup the footer to distance it from the rest of the page and make the background a shade darker. */
footer {
    padding: 10% 10% 10px 10%;
    background-color: #FBFBFB;
}
/* Table inside the footer, made very inconspicuous. */
table {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-size: .5em;
}
.findout_more {
    font-size: .6em;
    font-weight: 600;
    padding: 2% 0px 0px 0px;
    text-indent: 0px;
}
.findout_more_buttons {
    width: 1.1%;
}

/* Clears float: both */
.no_float {
    clear: both;
}

/* Setup a button that is an img that uses javascript; it will appear when the page is scroll down enough,
and can be clicked to scroll to the top of the page */
#arrow_to_top{
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: 7%;
    opacity: 0.2;
    z-index: 2;
}

.in_text_links:link {
    text-decoration: none;
    color: #CD5320;
}
.in_text_links:visited {
    color: #7D7D7D;
}
.in_text_links:hover {
    font-style: italic;
}

/* Setup the nav-buttons so that the links are not underlined and the buttons change when hovered over. 
Also the color changes when the link has been visited. */
.nav_links:link, .nav_dropdown_links_buttons {
    text-decoration: none;
    color: black;
}
.nav_links:visited {
    color: #292929;
}
.nav_links:hover {
    font-weight: 600;
}

/* If the screen size is large enough to display the background image as it should be viewed make it the 
background image of the body. Also adjust the navigation to match the larger dynamic. */
@media only screen and (min-width: 667px) {
    /* This background image will show about 25% of the actual picture on each side, 
    the sizing will limit stretching. */
    body {
        background-image: url(Gallery/Images/Landscape_Background.jpg);
        background-repeat: repeat;
        background-size: 50% 120vw;
    }
    /* main needs to get smaller to see the background image. */
    main {
        width: 75%;
        background-color: white;
    }
    /* Resize. */
    #arrow_to_top{
        bottom: 3%;
        right: 13.5%;
        width: 6%;
    }
    /* Resize, change color. */
    .nav_links, .nav_dropdown_links_buttons {
        background-color: #7D7D7D;
        font-size: .6em;
    }
    .nav_links:link {
        color: #D6D6E2;
    }
    .nav_dropdown_links_buttons {
        color: #D6D6E2;
    }
    .nav_dropdown_links {
        font-size: 1em;
    }
    .nav_dropdown_links:hover {
        background-color: #b3b3b3;
    }
    /* Change color. */
    .nav_links:visited {
        color: #FDF2EB;
    }
    
}