/* GLOBAL Styles */


* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html {
    width: 100%;
    overflow-x: hidden;
}

body {
    font: 1em/1.4 base, 'Open Sans', sans-serif;
}

main {
    padding: 2rem;
    margin: 0 auto;
    max-width: 48rem;
    position: relative;
    min-height: 100vh;
}

header {
    background-color: #7700e7;
    color: #fff;
    padding: 1rem;
}

img {
    display: block;
    max-width: 100%;
    width: 44rem;
}

a {
    text-decoration: none;
}

h1,
h2,
h3,
header,
section p a,
.p-grid a,
.p-subheading {
    font-family: 'Poppins', sans-serif;
}

.site-header__nav {
    display: block;
    text-align: center;
}

.site-header__nav > ul li {
    display: inline-block;
    padding: 0 .5rem;
}

.site-header__nav a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .11rem;
    text-transform: uppercase;
    width: auto;
    transition: ease-out .3s;
}

.site-header__nav a:hover {
    text-decoration: underline;
}

.site-header__nav .site-header__logo a {
    display: block;
    transition: none 0s;
}

.site-header__logo img {
    margin: 0 auto;
    max-width: 8rem;
}

li.site-header__logo {
    display: block !important;
}

p {
    max-width: 44rem;
    color: rgb(41, 41, 41);
    letter-spacing: .02em;
}

section {
    margin-bottom: 2.4rem;
}

section > p a,
.p-grid a {
    color: #000;
    font-weight: bold;
    background: linear-gradient(rgba(119, 0, 231, 0.3), rgba(119, 0, 231, 0.3));
    background-size: 100% 0.5rem;
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    transition: all 0.1s linear 0s;
}

section p a:hover,
.p-grid a:hover  {
    background-size: 100% 100%;
}

h1 + p,
h2 + p,
h2 + ul,
h3 + p,
p + ul,
[class*="main__"] {
    margin-top: 1.2rem;
}

ul li {
    list-style: none;
}

.breadcrumbs {
    display: block;
    font-size: .8rem;
    margin-bottom: 1.2rem;
}

.breadcrumbs ul li {
    display: inline-block;
}

.list-bare {
    list-style: none;
}

.content-wrapper {
    min-height: calc(100vh - 13rem);
}

.project-tile {
    position: relative;
    vertical-align: middle;
    border: 0;
    box-shadow: inset 0 0 0 2px #999;
    color: #fff;

    flex: 1;
    flex-basis: 48%;
    margin: .2rem;

}

.project-tile a {
    display: block;
    color: #fff;
    background-color: #7700e7;
}

.project-tile__title {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 55% 1rem;
    text-align: center;
    z-index: 50;
    transition: ease-out .5s;
    opacity: 0;
}

.project-tile a:hover > .project-tile__title {
    transition: ease-in .5s;
    opacity: 1;
}

.project-tile::before,
.project-tile::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}

.border-hover {
    transition: color 0.25s;
}

.border-hover::before,
.border-hover::after {
    border: 4px solid transparent;
    width: 0;
    height: 0;
}

.border-hover::before {
    top: 0;
    left: 0;
}

.border-hover::after {
    bottom: 0;
    right: 0;
}

div.border-hover:hover {
    color: rgb(0, 0, 0);
}

.border-hover:hover::before,
.border-hover:hover::after {
    width: 100%;
    height: 100%;
}

.border-hover:hover::before {
    border-top-color: rgb(0, 0, 0);
    border-right-color: rgb(0, 0, 0);
    transition:
      width 0.25s ease-out,
      height 0.25s ease-out 0.25s;
}

.border-hover:hover::after {
    border-bottom-color: rgb(0, 0, 0);
    border-left-color: rgb(0, 0, 0);
    transition:
      border-color 0s ease-out 0.5s,
      width 0.25s ease-out 0.5s, 
      height 0.25s ease-out 0.75s;
}

.project-tile__background {
    z-index: -1;
}

.project-tile a:hover > img.project-tile__background {
    opacity: 0;
}

.project-tile a:hover > .project-tile__background {
    opacity: 1;
    background-color: #7700e7;
}

.project-tile__title .subtitle {
    color: #fff;
}

.subtitle {
    font-size: 1rem;
    margin-top: 0;
}

.main-first__css-experiments ul li,
.main-first__about ul li  {
    padding-bottom: .8rem;
}

.main-first__css-experiments ul li a,
.main-first__about ul li a {
    color: #7700e7;
    font-weight: bold;
}

.main-first__css-experiments ul li a:hover,
.main-first__about ul li a:hover  {
    text-decoration: underline;
} 

.c-grid-caption {
    margin: 0 0 0 .6rem;
    font-size: .9rem;
}

.about-date {
    font-size: .8rem;
    color: #999;
    margin-bottom: 0;
}

.footer {
    display: block;
    margin-top: 4.8rem;
    width: 100%;
    max-width: 44rem;
    border-top: 1px #dadada solid;
    bottom: 0;
}

.social {
	display: inline-block;
	margin-left: auto;
    margin-top: 1.2rem;
    width: 100%;
    max-width: 24rem;
}

.social a img {
	display: inline-block;
	max-width: 2rem;
	width: 100%;
	height: auto;
	padding-right: .8rem;
	transition: 0.3s ease;
}

.social a img:hover {
	transform: translateY(-40%);
}

@media (min-width: 36em) {

    .grid--home {
        display: flex;
    }

    .main__projects--body {
        display: flex;
        flex-wrap: wrap;
    }

    header {
        flex: 1;
        min-width: 11rem;
        max-width: 24rem;
        height: 100vh;
    }

    @supports (display: grid) {

        .grid--home {
            display: grid;
            grid-template-columns: minmax(16em, 1fr) 3fr;
            grid-template-rows: minmax(100vh, 1fr);
        }

        header {
            padding: 2rem;
            grid-column: 1/2;
            grid-row: auto;
            height: auto;
        }

        .main__projects--body {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
            grid-auto-rows: minmax(12rem, auto);
            grid-gap: .6rem;
        }

        .project-tile {
            margin: 0;
        }
    }

    .site-header__nav {
        text-align: unset;
    }

    .site-header__nav > ul li {
        display: block;
        padding: .5rem 0;
        border-bottom: 1px solid #fff;
        text-align: right;
    }
    
    .site-header__nav a {
        display: inline-block;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .11rem;
        text-transform: uppercase;
        width: auto;
        transition: ease-out .3s;
    }
    
    .site-header__nav a:hover {
        transform: translateX(-1.8rem);
    }
    
    .site-header__nav a::after {
        display: block;
        position: absolute;
        right: 0;
        bottom: -.14rem;
        content: url('../imgs/menu-arrow.svg');
        width: 1rem;
        opacity: 0;
        transition: ease-in .3s; 
        transform: translateX(1.8rem);
    }
    
    .site-header__nav a:hover::after {
        transition: ease-in .3s;
        opacity: 1;
    }

    .site-header__nav .site-header__logo a:hover {
        transform: none;
    }

    .site-header__nav .site-header__logo a::after {
        content: none;
    }

    .site-header__logo img {
        max-width: 11rem;
    }
    
}



/*@media (min-width: 24em) {

    .main__projects--body {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 8em);
        grid-gap: .6em; 
    }
}

@media (min-width: 48em) {

    .grid--home {
            grid-template-columns: minmax(18em, 1fr) 3fr;
    }

    .main__projects--body {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 16em);
        grid-gap: .6em; 
    }

}*/