/* Headers */
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&display=swap');

*, *::before, *::after {
    /* border: 1px solid black; */

    margin: 0;
    padding: 0;

    box-sizing: inherit;
}

html {
    box-sizing: border-box;

    font-size: 10px;

    scroll-behavior: smooth;
}

body {
    font-size: 1.8rem;
}

header, h1, h2, h3, h4 {
    font-family: 'Zilla Slab', serif;
    font-weight: bold;
}

header {
    font-size: 2.5rem;
}

h3, h4 {
    font-weight: normal;
}

p, a {
    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
    font-style: oblique;
}

a:any-link {
    color: black;
}

a:active {
    /* color: black; */
}

a:hover {
    text-decoration: underline;
}

code {
}

/* ===============
   Welcome Section
   =============== */

.container1 {
    background: linear-gradient(160deg,
    rgba(174, 201, 245, 0.9) 0%,
    rgba(174, 201, 245, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%);

    background-repeat: no-repeat;
    background-size: cover;
}

#welcome {
    /* width: 100vw; */
    height: 100vh;

    display: flex;

    flex-direction: column;
    justify-content: center;
    align-content: center;

}

#welcome > h1 {
    text-align: center;
    font-size: 4rem;

    color: #222;
}

#navigation {
    margin-top: 25px;

    display: flex;

    justify-content: center;
}

.nav-link {
    margin: 0 10px;

    font-size: 2rem;
}

.links-flex {
    margin: 20px 0;

    display: flex;

    justify-content: center;
}

/* ==============
   Social Section
   ============== */

#social-section {
    margin: 0 10px;

    display: flex;

    flex-direction: column;
}

.section-header, .projects-header, .section-info {
    margin: 10px 0;
    
    text-align: center;
}

.link-img {
    margin: 0 10px;
}

/* ================
   Projects Section
   ================ */

#projects-section {
    margin: 50px 10px 0px;

    min-height: 1000px;
}

.projects {
    margin: 20px 5px 0px;

    display: flex;
    flex-direction: column;
}

.projects-header {
    margin-bottom: 20px;
    padding: 5px 10px;

    /* border-bottom: 2px solid black; */
    align-self: center;

    color: #222;

    background: linear-gradient(90deg,
    rgba(200, 211, 245, 0) 0%,
    rgba(200, 211, 245, 0.5) 5%,
    rgba(174, 201, 245, 1) 50%,
    rgba(200, 211, 245, 0.5) 95%,
    rgba(200, 211, 245, 0) 100%);
}

.links-grid {
    display: grid;

    gap: 10px;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 50px;
    justify-items: center;
    align-items: center;

    border-left: 1px solid black;
    border-right: 1px solid black;
}

@media(min-width: 980px){
    .links-grid {
        margin: 0 auto;
        grid-template-columns: repeat(3, 300px)
    }
}

.links-grid > a {
    /* min-height: 50px; */
    text-align: center;
}

/* ======
   Footer
   ====== */

footer {
    padding: 10px;

    display: grid;

    grid-template: repeat(3, 50px) / repeat(3, 1fr);

    background-color: lightslategray;
}

footer > p {
    grid-column: 1 / 3;
}

footer > p:last-child {
    justify-self: end;
    align-self: end;

    grid-area: 3 / 3 / 4 / 4;
}