/*
   in this stylesheet, we are using a background image. Replace the image with 
   your own. It's best to choose a background that is subdued or slightly blur it
*/
body {
    color: #fff;
    line-height: 1.25;
    /* customize your font */
    font-family: "Space Mono", monospace;
}

body::before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: url(/images/purple-mountain.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* for a video background 

.background > video {
   position: fixed;
   display: block;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   z-index: -10;
   transform: translate(-50%, -50%);
   /*  pointer-events: none; 
background: url(https://laraburton.com/images/ocean.jpg) no-repeat;
background-size: cover;
}

*/

/* overlay to de-emphasize the background image 
   
   if you can edit your image and darken or desaturate it, you
   don't need this overlay.
*/
nav ul {
    list-style-type: none;
    font-family: "Space Mono", monospace;
    margin: 0em;
    padding: .1em;
    align-self: center;
    position: relative;
    display: flex;
    justify-content: center;
    list-style-type: none;
}

nav a {
    color: #fff;
    list-style-type: none;
}

nav a:link {
    color: #fff;
    text-decoration: none;
}

nav a:visted {
    color: #fff;
}

nav a[href]:hover {
    color: #fa6291;
}

nav a:active {
    color: #4be5dd;
}


body::after {
    content: "";
    position: fixed;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -10;
}

/* general styles for all elements */
h3 {
    letter-spacing: .2em;
}

/* the general setup for images that will crop and 
   scale if the grid track width or height changes. 
   It's assumed they will be wrapped in a div with
   class .image */
.image > img,
picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* reset normalize spacing */
article {
    margin: 0;
    padding: .5rem;
}

p {
    margin: 0;
}

aside {
    padding: 2rem;
}

aside > p {
    font-size: 2rem;
    line-height: 1.25;
    font-family: "BioRyhme";
    font-style: normal;
}

/* decorative svg. for fun. If you want it, pull it off my
   sample site, make your own, or else remove */
aside::before {
    content: "";
    display: block;
    background: url(../images/wavy.svg) repeat-x;
    background-size: cover;
    width: 30%;
    height: 5px;
    position: absolute;
    top: 10px;
    left: 35%;
    right: 35%;
}

.article1 ul {
    list-style-type: none;
    font-family: "Space Mono", monospace;
}

.article1 a {
    color: #fff;
    list-style-type: none;
}

.article1 a:link {
    color: #fff;
    text-decoration: none;
}

.article1 a:visted {
    color: #fff;
}

.article1 a[href]:hover {
    color: #fa6291;
}

.article1 a:active {
    color: #4be5dd;
}

/* add class to divs to allow them to have overlays */
.overlay {
    position: relative;
}

/* for now, assume the overlay item is a <p>; can add more elements
   here if needed or change gradient (or make gradient options)
*/
.overlay p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5em 2em;
    color: #fff;
    background-image: linear-gradient(transparent, rgba(0, 0, 0, .4), rgba(0, 0, 0, .5), transparent);
}


/* the placement and styling of each separate grid
   item */

/* the grid 

   You may notice that grid cells with text may not maintain the 1fr on
   smaller screens; that's because, by default, a fractional unit will not 
   become smaller than an item's content (this measurement is "auto"). You can
   change this by declaring minmax(0, 1fr) instead of 1fr, which is really 
   minmax(auto, 1fr), but text will start overlapping other columns. The 
   best fix is to use media queries.
*/
main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 100px;
    padding-bottom: 5em;
}

header {
    grid-row: 1 / span 2;
    grid-column: 2 / span 2;
    justify-self: center;
    margin-top: 3rem;
}

h1 {
    grid-row: 2 / span 2;
    grid-column: 2 / span 2;
    font-family: "Space-Mono", monospace;
    justify-self: center;
    margin-top: .2em;
}

aside {
    grid-row: 10 / span 1;
    grid-column: 2 / span 1;
}

nav {
    grid-row: 25 / span 1;
    grid-column: 2 / span 3;
    font-size: 1.2em;
    padding: 0;
    margin: 1em;
    display: inline;
}

nav a {
    padding: 1.2em 4em;
    color: #fff;
    align-self: right;
}

.article1 {
    padding: 2rem;
    grid-row: 13 / span 1;
    grid-column: 1 / span 1;
}

.riverside-sunset {
    position: relative;
    grid-row: 10 / span 2;
    grid-column: 1 / span 1;
}

.overlay h2 {
    position: absolute;
    font-family: "BioRhyme", serif;
    font-size: 2.3em;
    bottom: 5em;
    left: .8em;
    right: 0;
    top: .5em;
    color: #fff;
}

.triangle-man {
    position: relative;
    grid-row: 12 / span 6;
    grid-column: 2 / span 3;
    overflow: hidden;
    display: block;
}

#triangle-man-text {
    opacity: 0;
    transition: opacity 200ms ease;
    position: absolute;
    text-align: center;
}

/*.triangle-man > img {
    transition: transform 500ms ease;
}

.triangle-man > img:hover {
   transform: scale(1.1);
}
*/

#triangle-man-text:hover {
    opacity: 1;
}

#triangle-man-text:hover .triangle-man > img:hover {
    transform: scale(1.1);
}

.window-space {
    position: relative;
    grid-row: 19 / span 4;
    grid-column: 1 / span 2;
    overflow: hidden;
    display: block;
}

#window-space-text {
    opacity: 0;
    transition: opacity 200ms ease;
    position: absolute;
}

#window-space-text:hover {
    opacity: 1;
}

.article2 {
    grid-row: 18 / span 1;
    grid-column: 2 / span 1;
    background-color: #fff;
    text-align: center;
    color: #101010;
    padding: 2em;
}

.white-bar {
    grid-row: 25 / span 1;
    grid-column: 2 / span 3;
    background-color: #fff;
    height: .1rem;
}

/* add grid items to your HTML and style and place them here */



footer > ul {
    display: flex;
    justify-content: flex-end;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    list-style-type: none;
    padding: 2em 0;
    border-top: 1px solid #fff;
}

footer > ul > li {
    padding: 0 1.5em;
}

/* Resposive Web */

/* I've already coded this website as desktop first, and that's the way that it will stay */

/* Tablet */
@media screen and (min-width: 601px) {

    main {
        grid-template-columns: repeat(4, 1fr);
    }

    header,
    h1 {
        grid-column: 1 / span 4;
    }

    aside {
        grid-row: 17;
        grid-column: 1 / span 2;
        padding-top: .5em;
    }

    .article1 {
        grid-row: 22 / span 1;
        grid-column: 3 / span 2;
        align-self: center;
    }

    .riverside-sunset {
        grid-row: 19 / span 2;
        grid-column: 1 / span 2;
    }

    .triangle-man {
        grid-row: 13 / span 4;
        grid-column: 1 / span 4;
    }

    .window-space {
        grid-row: 23 / span 4;
        grid-column: 3 / span 2;
    }

    .article2 {
        grid-row: 23 / span 2;
        grid-column: 1 / span 1;
    }

    .white-bar {
        grid-row: 30 / span 1;
        grid-column: 2 / span 3;
        height: .1rem;
    }

    nav {
        grid-row: 30 / span 1;
        grid-column: 2 / span 4;
        font-size: 1.1em;
    }

    nav a {
        padding: 1.2em 1em;
    }

}

/* Desktop */

@media screen and (min-width: 900px) {
    
    main {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 100px;
    }

    header {
        grid-row: 1 / span 2;
        grid-column: 2 / span 2;
    }

    h1 {
        grid-row: 2 / span 2;
        grid-column: 2 / span 2;
    }

    aside {
        grid-row: 10 / span 1;
        grid-column: 2 / span 1;
    }

    nav {
        grid-row: 25 / span 1;
        grid-column: 2 / span 3;
    }

    .article1 {
        grid-row: 13 / span 1;
        grid-column: 1 / span 1;
    }

    .riverside-sunset {
        grid-row: 10 / span 2;
        grid-column: 1 / span 1;
    }


    .triangle-man {
        grid-row: 12 / span 6;
        grid-column: 2 / span 3;
    }

    .window-space {
        grid-row: 19 / span 4;
        grid-column: 1 / span 2;
    }


    .article2 {
        grid-row: 18 / span 1;
        grid-column: 2 / span 1;
        padding-top: 1.2em;
    }

    .white-bar {
        grid-row: 25 / span 1;
        grid-column: 2 / span 3;
    }
    
    nav a {
        padding: 1.2em 2em;
        font-size: 1.2em;
    }
}

/* Phone */
@media screen and (max-width: 600px) {

    main {
        grid-template-columns: repeat(2, 1fr);
    }

    header,
    h1 {
        grid-column: 1 / span 2;
    }

    aside {
        grid-row: 9;
        grid-column: 1 / span 2;
        padding-top: .5em;
    }

    .article1 {
        grid-row: 13 / span 2;
        grid-column: 1 / span 2;

        align-self: center;
    }

    .riverside-sunset {
        grid-row: 11 / span 2;
        grid-column: 1 / span 2;
    }

    .triangle-man {
        grid-row: 15 / span 4;
        grid-column: 1 / span 2;
    }

    .window-space {
        grid-row: 20 / span 4;
        grid-column: 1 / span 2;
    }

    .article2 {
        grid-row: 19 / span 1;
        grid-column: 1 / span 2;
    }

    .white-bar {
        grid-row: 29 / span 1;
        grid-column: 1 / span 2;
        height: .1rem;
    }

    nav {
        grid-row: 29 / span 1;
        grid-column: 1 / span 2;
        font-size: 1.1em;
    }

    nav a {
        padding: 1.2em 1em;
    }


}