/*
   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
*/





@font-face {
    font-family: 'arameregular';
    src: url(/types/arame-regular-webfont.woff2) format('woff2'),
        url(/types/arame-regular-webfont.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    margin: 0px;
    height: 100%;
    width: 100%;
}

body {
    margin: 0px;
    min-height: 100%;
    width: 100%;
}

body {
    color: #fff;
    /* customize your font */
    font-family: 'Questrial', sans-serif;
    background-image: url(../images/campfire.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: rgba(0, 0, 0, 0.4);
    margin: 0;
    height: 100%;

}

.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;
}

/* general styles for all elements */
h1,
h2,
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 {
    display: block;
    width: 100%;
    height: 100%;
}


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

p {
    margin: 0;
}


/* 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%;
}


/* 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);
}

/* Mobile Stuff */

@media screen and (max-width: 600px) {
    article p {
        font-size: .7em;
        line-height: .5;
    }
}


/* 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-template-rows: repeat(5, 1fr);
    margin: 0;
    height: 100%;
}

header {
    grid-row: 1 / span 2;
    grid-column: 2 / span 2;
    justify-self: center;
    margin-top: 3rem;
    animation: fade-in 1s 5s forwards;
    opacity: 0;
}

header > p {
    font-family: 'arameregular';
    display: inline-block;
    font-size: 1em;
    animation: move-down-header 1.8s 5s forwards;
}

article {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    font-size: 2.4em;
    font-family: 'arameregular';
    display: inline-block;
    text-align: center;
}

.line1 > div {
    display: inline-block;
    padding-bottom: -9em;
}

.student > p {
    animation: fade-in 1s 2s forwards;
    opacity: 0;
}

.student {
    animation: move-down 1s 2s forwards;
}

.web > p {
    animation: fade-in 1s 2.2s forwards;
    opacity: 0;
}

.web {
    animation: move-down 1s 2.2s forwards;
}

.developer > p {
    animation: fade-in 1s 2.4s forwards;
    opacity: 0;
}

.developer {
    animation: move-down 1s 2.4s forwards;
}

/* line 2 stuff */

.line2 > div {
    display: inline-block;
}

.nostalgic > p {
    animation: fade-in 1s 2.8s forwards;
    opacity: 0;
}

.nostalgic {
    animation: move-down 1s 2.8s forwards;
}

.for > p {
    animation: fade-in 1s 3s forwards;
    opacity: 0;
}

.for {
    animation: move-down 1s 3s forwards;
}

.the > p {
    animation: fade-in 1s 3.2s forwards;
    opacity: 0;
}

.the {
    animation: move-down 1s 3.2s forwards;
}

.eighties > p {
    animation: fade-in 1s 3.4s forwards;
    opacity: 0;
}

.eighties {
    animation: move-down 1s 3.4s forwards;
}

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



@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes move-down {
    from {
        transform: translateY(-25px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes move-down-header {
    from {
        transform: translateY(-50px);
    }

    to {
        transform: translateY(0px);
    }
}

/* The smaall stuff on the sides */

a {
    display: inline-block;
}

.portfolio {
    display: inline-block;
    transition: all 1s;
    position: absolute;
    left: 1em;
    bottom: 50%;
    transform: rotateZ(-90deg);

}

.portfolio > a {
    animation: fade-in 1s 5s forwards;
    opacity: 0;
}

.resume {
    display: inline-block;
    transition: all 1s;
    position: absolute;
    right: 1em;
    bottom: 50%;
    transform: rotateZ(90deg);
}

.resume > a {
    animation: fade-in 1s 5s forwards;
    opacity: 0;
}

/* side animation */

a {
    text-decoration: none;
    color: rgba(149, 165, 166, .7);
    font-family: 'Space Mono', monospace;
}

a:link {
    transition: color .5s;
}

a:hover {
    color: #fff;
    transition: color .5s;
}

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;
}