/*CSS*/
* {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    scroll-behavior: smooth;
}

/*--- Header Begins---*/
header {
    margin: 0 auto;
    max-width: 1300px;
    width: 100%;
    height:86px;
}

#header-container img {
    margin: 1% 0% 0% 1%;
}

#logo {
    margin: 8px 0 0 8px;
    float: left;
    width: 72px;
    height: 72px;
    background: url(img/RA_logo_icon_only_72.png) no-repeat center;
}

/* Start Navigation Style */
nav {
    float: right;
    padding: 15px 40px 0 0;
}

a:hover#menu-icon {
    border-radius: 4px 4px 0 0;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    font-family: "Alegreya Sans", sans-serif;
    font-size: 150%;
    display: inline-block;
    float: left;
    padding: 0 10px 0 10px;
}

nav ul li a {
    color: #a6cfe3;
    text-decoration: none;
}

nav ul li a:hover {
    color: #d8d9db;
}

.current {
    color:#d8d9db;
}

/*--- Body w/ Grid begins ---*/
body {
    font-family: "Alegreya", sans-serif;
    margin:20px auto 0px auto;
    color:#a6cfe3;
    background: #0E6E98;
}

a {
    font-size: 125%;
}

a:link {
    color:#a6cfe3;
}

a:hover {
    color:#2eaeee;
}

a:active {
    color:#a6cfe3;
}

a:visited {
    color:#a6cfe3;
}

p {
    font-size: 125%;
}

#grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    grid-row-gap: 10px;
    margin:0px auto;
    max-width: 960px;
}

#social-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    grid-row-gap: 10px;
    margin:0px auto;
    max-width: 960px;
}

#headshot {
    grid-column: 1 / -1;
}

#name {
    grid-column: 1 / -1;
    font-size: 250%;
    text-align: center;
}

#about {
    grid-column: 1 / -1;
    text-align: justify;
    padding-bottom: 3%;
    margin: 0% 5%;
}

#article-header {
    grid-column: 1 / -1;
}

#featured-header {
    grid-column: 1 / 3;
}

#gamasutra-logo {
    justify-self: end;
    grid-column: 1;
}

#gamasutra-featured-article {
    grid-column: 2 / span 2;
    justify-self: start;
    align-self: center;
    margin: 0% 5%;
}

#phaserworld-logo {
    grid-row: span 2;
    grid-column: 1;
    align-self: center;
    justify-self: end;
}

#phaserworld-featured-article1 {
    grid-column: 2 / span 2;
    justify-self: start;
    margin: 0% 5%;
}

#phaserworld-featured-article2 {
    grid-column: 2 / span 2;
    justify-self: start;
    margin: 0% 5%;
}

#others-header {
    grid-column: 3 / -1;
}

#recursion-article {
    grid-column: 4 / -1;
    justify-self: start;
    margin: 0% 5%;
}

#tutorial-article {
    grid-column: 4 / -1;
    justify-self: start;
    margin: 0% 5%;
}

#games-header {
    padding-top: 3%;
    grid-column: 1 / -1;
}

#team-lead-header {
    grid-column: 1 / -1;
}

#g-type-header {
    grid-column: 1 / -1;
    justify-self: center;
}

.game-image {
    grid-column: 1 / 3;
    margin-left: 25%;
    align-self: center;
}

.game-text {
    grid-column: 4 / -1;
    text-align: justify;
    justify-self: start;
    margin: 0% 5%; 
}

#dream-racer-header {
    grid-column: 1 / -1;
    justify-self: center;
    border: 1px solid #000;
}

#team-member-header {
    grid-column: 1 / -1;
}

#solo-dev-header {
    grid-column: 1 / -1;
}

#codefall-image {
    grid-column: 1;
}

#codefall-app-store-link {
    grid-column: 2;
    align-self: center;
}

.social {
    font-size: 360%;
    margin: 2px;
    padding: 10px 20px;
    color: #a6cfe3;
}

#socket {
    font-size: 60%;
    text-align: center;
    background-color: #5c5d5f;
    border-top: 1px solid #a6cfe3;
}

#socket p {
    color: #f4f4f4;
}

/*--- Responsive Styling Begins---*/
@media screen and (max-width: 1000px) {
    #grid {
        max-width: 800px;
    }

    #social-grid {
        max-width: 800px;
    }

    #logo {
        display: none;
    }

    nav {
        padding-right: 2%;
    }
}

@media screen and (max-width: 850px) {
    #grid {
        max-width: 650px;
    }

    #social-grid {
        max-width: 650px;
    }

    #ra-name-image {
        max-width: 40%;
        height:auto;
    }

    nav ul li {
        font-size: 100%;
        padding: 0 5px 0 5px;
    }

    #featured-header {
        grid-column: 1 / -1;
    }
        
    #gamasutra-featured-article {
        grid-column: 2 / -1;
        padding-left: 5%;
    }
    
    #phaserworld-featured-article1 {
        grid-column: 2 / -1;
        padding-left: 5%;
    }
    
    #phaserworld-featured-article2 {
        grid-column: 2 / -1;
        padding-left: 5%;
        grid-row:8;
    }
    
    #others-header {
        grid-column: 1 / -1;
        grid-row:9;
        margin-top:5%;
    }
    
    #recursion-article {
        grid-column: 2 / -1;
        grid-row:10;
        padding-left: 0%;
    }
    
    #tutorial-article {
        grid-column: 2 / -1;
        padding-left: 0%;
    }

    .game-image {
        grid-column: 1 / -1;
        margin-left: 0%;
    }
    
    .game-text {
        grid-column: 1 / -1;
    }

    #codefall-image {
        grid-column: 1 / 3;
        justify-self: end;
    }

    #codefall-app-store-link {
        grid-column: 4;
    }
}

@media screen and (max-width: 700px) {
    #grid {
        max-width: 500px;
    }

    #social-grid {
        max-width: 500px;
    }

    #ra-name-image {
        max-width: 35%;
        height:auto;
    }

    nav ul li {
        font-size: 100%;
    }

    .social {
        font-size: 260%;
        margin: 0px;
        padding: 10px 10px;
    }
}