/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* -------------------------------- My Code --------------------------------*/

/* -------------------------------- General --------------------------------*/

a {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: underline;
}

.center{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.bottom-margin {
    margin-bottom: 10vh;
}

.spacer {
    height: 5vh;
}

.flex-center-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

html {
    height: 100%;
}

@font-face {
    font-family: "Aurora Pro";
    src: url('assets/fonts/aurora-pro/aurora-pro-webfont.woff2') format('woff2'),
            url('assets/fonts/aurora-pro/aurora-pro-webfont.woff') format('woff');
}

@font-face {
    font-family: "Florensa";
    src: url('assets/fonts/florensa/florensa-demo-webfont.woff2') format('woff2'),
            url('assets/fonts/florensa/florensa-demo-webfont.woff') format('woff');
}

@font-face {
    font-family: "Stretch Pro";
    src: url('assets/fonts/stretch-pro/stretchpro.woff') format('woff');
}

@font-face {
    font-family: "Louis George Café";
    src: url('assets/fonts/louis_george_cafe/louis_george_cafe_bold.woff') format('woff');
}
    
/*  */

body {
    min-height: 100%;
    background-color: #EBE7E2;
    font-family: 'Louis George Café', sans-serif;
    font-weight: 200;
}

.no-scroll {
    overflow: hidden;
}

nav {
    display: grid;
    padding: 2% 12vw;
    height: 100%;
    top: 0; /* Position the navbar at the top of the page */
}

nav ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    justify-items: center;
}

nav a {
    font-family: 'Stretch Pro', sans-serif;
    text-decoration: none;
    font-size: 2.2vw;
}

nav li:hover{
    transform: scale(1.2);
    /* text-decoration: underline; */
}

.borderlist {
    list-style-position:inside;
    border: 1px solid black;
}

.noise {
    position: fixed;
    z-index: 9999;
    top: -300%;
    left: -150%;
    height: 600%;
    width: 600%;
    -webkit-animation: grain 15s steps(10) infinite;
    animation: grain 15s steps(10) infinite;
    background-image: url(assets/ink_blots_dusty_grunge_texture.jpg);
    background-size: 500px;
    background-repeat: repeat;
    opacity: 0.15;
    pointer-events:none
}

@-webkit-keyframes grain {
    0%, to {
        transform:translate(0)
    }

    10% {
        transform:translate(-5%, -10%)
    }

    20% {
        transform:translate(-15%, 5%)
    }

    30% {
        transform:translate(7%, -25%)
    }

    40% {
        transform:translate(-5%, 25%)
    }

    50% {
        transform:translate(-15%, 10%)
    }

    60% {
        transform:translate(15%)
    }

    70% {
        transform:translateY(15%)
    }

    80% {
        transform:translate(3%, 35%)
    }

    90% {
        transform:translate(-10%, 10%)
    }
}

@keyframes grain {
    0%, to {
        transform:translate(0)
    }

    10% {
        transform:translate(-5%, -10%)
    }

    20% {
        transform:translate(-15%, 5%)
    }

    30% {
        transform:translate(7%, -25%)
    }

    40% {
        transform:translate(-5%, 25%)
    }

    50% {
        transform:translate(-15%, 10%)
    }

    60% {
        transform:translate(15%)
    }

    70% {
        transform:translateY(15%)
    }

    80% {
        transform:translate(3%, 35%)
    }

    90% {
        transform:translate(-10%, 10%)
    }
}


/* -------------------------------- Index --------------------------------*/

#title { 
    font-family: 'Stretch Pro', sans-serif;
    display: grid;
    grid-area: title;

    justify-self: center;
    align-self: center;
    text-align: center;
    
    font-size: 8vw;
}

#blurb {
    display: grid;
    grid-area: blurb;

    height: 100%;

    text-align: center;
    justify-self: center;
    align-self: center;
    
    font-size: 2vw;
    font-weight: 100;
}

#index-wrapper #icons {
    grid-area: icons;

    margin-left: auto;
    margin-right: auto;
}

#icons ul {
    display: flex;
    gap: 9vh
}

#icons img {
    height: 7vh;
    width: auto
}

#icons img:hover {
    transform: scale(1.2);
}

#index-wrapper{
    display: grid;
    height: 100vh;
    grid-template-columns: 12.5% auto 12.5%;
    grid-template-rows: 10% 30% 5% 10% 5% auto;
    grid-template-areas: 
        ". . ."
        ". title ."
        ". . ."
        ". blurb ."
        ". . ."
        ". icons .";
}


@media screen and (max-width: 800px) {

    #index-wrapper{
        grid-template-columns: 5% auto 5%;
        grid-template-rows: 10% 20% 5% 10% 10% auto;
    }

    #title { 
        font-size: 9vw;
    }

    #blurb {
        font-size: 1em;
    }
}
/* -------------------------------- xIndexx --------------------------------*/


/* -------------------------------- Project --------------------------------*/

#project-page-wrapper {
    margin: 5%;
}

#project-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    row-gap: 2vh;
    column-gap: 2vw;
}

.project-wrapper {
    display: flex;
    flex: 1 1 0px;
    width: 30vw;
    min-width: -webkit-min-content;
}

.project-link {
    display: flex;
}

.project-link .display-image  {
    margin: 2%;
    height: 11vw;
    width: 20vw;
}

.project-information {
    display: inline;
    min-width: 180px;
}


.project-wrapper:hover {
    transform: scale(1.02);
}


.project-wrapper .project-title {
    grid-area: projectTitle;
    font-size: 3vw;
    color: darkorange;
    margin: 2%;
    margin-bottom: 0%;
    height: auto;
}

.project-wrapper .project-description {
    grid-area: description;
    align-self: start;
    margin: 2%;
}

.project-wrapper .project-tags {
    grid-area: tag;
    align-self: end;
    margin: 2%;
    margin-bottom: 3.5%;
    color: gray;
}

.project-wrapper .project-text {
    font-size: 1.8vw;
}

@media screen and (max-width: 800px) {

    .project-link .display-image  {
        margin: 2%;
        height: 15vw;
        width: 25vw;
    }

    .project-wrapper .project-title {
        font-size: 5vw;
    }
    .project-wrapper .project-text {
        font-size: 3vw;
    }
}

/* -------------------------------- xProjectx --------------------------------*/


/* -------------------------------- Resume --------------------------------*/
#resume-wrapper {
    width: 60%;
    margin: auto;
}

#resume-wrapper img {
    margin: auto;
    width: 100%;
    height: auto;
    margin-bottom: 5%;
}

#resume-download-text{
    font-size: 25px;
    text-decoration: None;
    border: none;
    display: inline-block; 
}

#resume-download-text:hover {
    transform: scale(1.05);
}


@media screen and (max-width: 800px) {

    #resume-wrapper {
        width: 80%;
    }
}
/* -------------------------------- xResumex --------------------------------*/



/* -------------------------------- Contact --------------------------------*/

#contact-blurb{
    width: 75%;
    margin: auto;
    text-align: center;
    font-size: 18px;
}

.contact-form-wrapper{
    display:flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
    width: 30%;
    margin: auto;
}

.contact-form-row{
    margin: 5%;
    width: 85%;
    height: auto;
}

.contact-form-wrapper form {
    width: 100%;
    height: auto;
    min-width: 300px;


}

.contact-form-wrapper .text-input {
    width: 100%;
    height: auto;
    font-size: 14px;
    /* line-height: 25px; */
    padding: 10px 10px;
    border-radius:0.5em;
    border: 2px solid #333;
    background-color: #EEEEEE;
}

.contact-form-wrapper textarea {
    width: 100%;
    min-height: 100px;

}


.contact-form-wrapper .btn-input {
    width: 30%;
    height: auto;
    text-align: center !important;
    margin: auto !important;

    text-decoration: none;
    border: none;

     
    font-size: 16px;
    color: black;
    background-color: white;
    transition: background-color 0.3s;
    /* transition: color 0.2s; */


    border: 2px solid black;
    border-radius: 5px;
    

    cursor: pointer;
}

.contact-form-wrapper .btn-input:hover {
    color: white;
    background-color: black;
   
}


.contact-link-wrapper a {
    text-decoration: none;
    color: black;
}

.contact-link-wrapper {
    margin: 2% 3%;
}

.contact-link-wrapper:hover {
    transform: scale(1.2);
}

.contact-icon {
    height: 7vh;
    width: auto;
    margin-right: 4%;
    vertical-align: middle;
}

.contact-link-text{
    text-decoration: none;
    white-space: nowrap;
    font-size: 16px;
}

/* -------------------------------- xContactx --------------------------------*/