/* ---------------- */
/* Global Styles */
/* ---------------- */

nav {
    position: absolute;
    right: 0;
    top: 0;
    list-style: none;
    padding: 0 24px 0;
}

body {
    font-family: "Anonymous Pro";
    font: 16px "Anonymous Pro", monospace;
    background-color: rgb(18, 18, 18);
    color: rgb(215, 215, 215);
}

footer {
    margin-left: 50px;
}

p {
    line-height: 1.7;
    color: rgb(215, 215, 215);
    font-weight: 300;
    margin-bottom: 20px;
    letter-spacing: .4px;
}

a {
    color: rgb(150, 150, 255);
    background-color: transparent;
    text-decoration: none;
}

img {
    border: 2mm inset rgba(115, 115, 115, 0.6);
}

/* ---------------- */
/* Layout */
/* ---------------- */

.nav {
    display: inline-block;
    
}

.two-column-layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 80px;
}


.left-column {
    position: sticky;
    height: fit-content;
    top: 25px;
    max-width: 560px;
    margin-left: 50px;
    
}

.right-column {
    max-width: 720px;
}

@media (max-width: 1279px) {
    .two-column-layout {
        grid-template-columns: 1fr; /* single column */
        place-self: center;
    }
    .left-column {
        margin-left: 10px;
        margin-top: 50px;
    }
    .right-column {
        margin-left: 10px;

    }
}


/* ---------------- */
/* Components */
/* ---------------- */

header {
    margin-top: 20px;
    display: grid;
    place-self: center;
    
}

.icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    fill: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    margin: 7px auto;
}

.social-links > .link {
    text-decoration: none;
    position: relative;
    display: inline-block;
    height: 35px;
    width: 35px;
}

/* ---------------- */
/* content pages */
/* ---------------- */

.content {
    margin: 0 auto;
    max-width: 60%;
}