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

*,
.main-info .gradient,
.about-info .gradient,
.contact-method .gradient,
.main-info .gradient,
.main-info h2,
.about-info .page-heading,
.project-info .page-heading,
.contact-heading,
.socials span,
.skills-grid {
    margin: 0;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
}

body,
main .projects,
main .skills,
.contact-element {
    position: relative;
}

body {
    font-family: "Lato", monospace;
    font-size: 16px;
    word-spacing: 4px;
    line-height: 1.6rem;
    background-color: #fff; /* fallback */
    isolation: isolate;       /* lets a child at z-index: -1; sit behind content */
    min-height: 100dvh;
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: rgb(44, 44, 44);
}

::-webkit-scrollbar-thumb {
    background: rgb(0, 255, 0);
    border: 1px solid rgb(0, 0, 0);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(98, 192, 98);
}

/* ====================== */
/* GLOBAL FLEX CONTAINERS */
/* ====================== */

body,
header,
nav .nav,
.info,
.main-info,
.about-info,
.project-info,
.contact-info,
.about-container,
.intro-container,
.contact-container,
.contact-main,
.toggle,
.contact-element,
a.contact-method,
.about-info .page-heading,
.project-info .page-heading,
.contact-heading,
.contact-content,
.page-intro,                                /* ************* */
.pic-container,                             /* DISPLAY: FLEX */
.about-section,                             /* ************* */
.about-title,
.socials,
main,
main .equalizer,
main .skills,
main .projects,
.skills-heading,
.skills-subheading,
.skills-container,
.skill-item,
.skill-subitem,
.project-details,
.project-badges,
.grid-buttons,
.button,
.button a,
footer,
footer .equalizer {
    display: flex;
}

/* ================== */
/* SPACE-AROUND VALUE */
/* ================== */

header,
.about-info,                                /* ***************************** */
main,                                       /* JUSTIFY-CONTENT: SPACE-AROUND */
footer {                                    /* ***************************** */
    justify-content: space-around;
}

/* ============ */
/* CENTER VALUE */
/* ============ */

header,
nav .nav,
.about-container,
.intro-container,
.contact-container,
.contact-main,
.info,
.contact-element,
a.contact-method,
.about-info .page-heading,
.project-info .page-heading,
.contact-heading,                           /* ******************* */
.contact-content,                           /* ALIGN-ITEMS: CENTER */
.pic-container,                             /* ******************* */
.about-title,
.socials,
main,
main .equalizer,
main .skills,
.skills-heading,
.skills-subheading,
.skills-container,
.skills-grid,
.skill-subitem,
.project-details,
.button,
.button a,
footer {
    align-items: center;
}

/* =============== */
/* MAX-WIDTH: 100% */
/* =============== */

header,                                     /* *************** */
main,                                       /* MAX-WIDTH: 100% */
.item-image img,                            /* *************** */
footer {
    max-width: 100%;
}

header {
    margin-top: 2rem;
    overflow-x: clip;
}

#contact-header {
    margin-bottom: 12rem;
}

/* ============================= */
/* GLOBAL BORDER RADIUS PROPERTY */
/* ============================= */

nav,
.nav .active svg,
.nav .inactive svg:hover,
.linkedin svg,                              /* ******************** */
.linkedin svg:hover,                        /* BORDER-RADIUS: .5REM */
.github svg,                                /* ******************** */
.button,
.button:hover {
    border-radius: .5rem;
}

/* ========================== */
/* GLOBAL BACKGROUND PROPERTY */
/* ========================== */

nav,
.main-info,
.about-info,
.project-info,                              /* ************************************ */
.projects-container,                        /* BACKGROUND-COLOR: RGB(174, 254, 174) */
.contact-info,                              /* ************************************ */
main .projects,
main .skills,
footer .equalizer {
    background-color: rgb(174, 254, 174);
}

nav {
    left: 0;
    bottom: 50%;
    position: fixed;
    width: 6rem;
    margin-left: 1rem;
    transform: translateY(50%);
    z-index: 1;
}

/* ============================== */
/* GLOBAL FLEX DIRECTION PROPERTY */
/* ============================== */

body,
nav .nav,
.main-info,
.about-info,
.project-info,
.projects-container,                        /* ********************** */
.contact-info,                              /* FLEX-DIRECTION: COLUMN */
.contact-content,                           /* ********************** */
.about-section,
main .projects,
main .skills,
.skill-item {
    flex-direction: column;
}

/* =============================== */
/* GLOBAL JUSTIFY-CONTENT PROPERTY */
/* =============================== */

nav .nav,
.about-container,
.intro-container,
.contact-container,
.contact-main,
#projects,
.about-info .page-heading,
.project-info .page-heading,
.contact-heading,                           /* *********************** */
.contact-content,                           /* JUSTIFY-CONTENT: CENTER */
.page-intro,                                /* *********************** */
.pic-container,
.socials,
main .projects,
.skills-heading,
.skills-subheading,
.skills-container,
.skills-grid,
.button {
    justify-content: center;
}

.nav a {
    margin: 1rem 1.5rem;
}

/* ===================== */
/* GLOBAL COLOR PROPERTY */
/* ===================== */

.nav a svg,
.linkedin svg,
.github svg,
.button svg,                                /* ******************* */
#projects-header,                           /* COLOR: RGB(0, 0, 0) */
#portfolio-website,                         /* ******************* */
#go-ride,
#cypher-python,
#mixed-messages {
    color: rgb(0, 0, 0);
}

.nav a svg {
    padding: .5rem;
}

/* ========================== */
/* GLOBAL BACKGROUND PROPERTY */
/* ========================== */

.nav .active svg,
.nav .inactive svg:hover,                   /* *********************************************************************** */
.linkedin svg:hover,                        /* BACKGROUND: LINEAR-GRADIENT(120DEG, #000000, #2278E9, #000000, #2278E9) */
.github svg:hover,                          /* *********************************************************************** */
.button:hover {
    background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9);
}

/* ===================== */
/* GLOBAL COLOR PROPERTY */
/* ===================== */

.nav .active svg,
.nav .inactive svg:hover,                   /* ************************* */
.linkedin svg:hover,                        /* COLOR: RGB(255, 255, 255) */
.github svg:hover,                          /* ************************* */
.button:hover svg {
    color: rgb(255, 255, 255);
}

.about-container,
.intro-container,
.contact-container,
.contact-main,
#projects,
.toggle,
.info,
.about-info .page-heading,
.project-info .page-heading,
.contact-heading,
.contact-content,
.page-intro,
.pic-container,
.socials,
main .equalizer,
main .skills,
.skills-heading,
.skills-subheading,
.skills-container,
.projects-grid {
    width: 100%;
}

/* =============================== */
/* GLOBAL JUSTIFY-CONTENT PROPERTY */
/* =============================== */

.info,
.main-info,                                 /* ****************************** */
main .skills,                               /* JUSTIFY-CONTENT: SPACE-BETWEEN */
footer .equalizer {                         /* ****************************** */
    justify-content: space-between;
}

/* ====================== */
/* GLOBAL HEIGHT PROPERTY */
/* ====================== */

.contact-main,                              /* ************ */
.info,                                      /* HEIGHT: 100% */
main .equalizer,                            /* ************ */
main .skills {
    height: 100%;
}

.about-info {
    width: 50%;
}

.toggle {
    justify-content: flex-end;
}

#theme-toggle {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.main-info {
    margin-left: 15%;
    width: 45%;
}

.project-info {
    width: 70%;
}

.contact-info {
    width: 40%
}

/* =========================== */
/* GLOBAL ALIGN ITEMS PROPERTY */
/* =========================== */

.main-info,
.about-info,
.project-info,                              /* *********************** */
.projects-container,                        /* ALIGN-ITEMS: FLEX-START */
.contact-info,                              /* *********************** */
main .projects,
.skill-item {
    align-items: flex-start;
}

/* ============================= */
/* GLOBAL BORDER RADIUS PROPERTY */
/* ============================= */

.main-info,
.about-info,
.project-info,                              /* ******************* */
.projects-container,                        /* BORDER-RADIUS: 2REM */
.contact-info,                              /* ******************* */
main .projects,
main .skills,
footer .equalizer {
    border-radius: 2rem;
}

.main-info,
.about-info,
.project-info,
.projects-container,
.contact-info {
    padding: 20px;
}

/* =========================== */
/* GLOBAL FONT WEIGHT PROPERTY */
/* =========================== */

.main-info .gradient,
.about-info .gradient,
.about-info .page-heading,
.project-info .page-heading,
.contact-heading,                           /* **************** */
.contact-method,                            /* FONT-WEIGHT: 600 */
.about-title,                               /* **************** */
.skill-title,
.project-title,
.clarify {
    font-weight: 600;
}

/* =========================== */
/* GLOBAL LINE HEIGHT PROPERTY */
/* =========================== */

.main-info .gradient,
.about-info .gradient,
.contact-method .gradient,                  /* ******************* */
.contact-method:hover .gradient,            /* LINE-HEIGHT: NORMAL */
.about-info .page-heading,                  /* ******************* */
.project-info .page-heading,
.contact-heading {
    line-height: normal;
}

.main-info .gradient,
.about-info .gradient {
    font-size: 4.5rem;
    background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.contact-element {
    max-width: 100vw;
    text-align: left;
}

a.contact-method {
    text-decoration: none;
}

.contact-method .gradient {
    color: #000;
}

.contact-method:hover .gradient {
    background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.main-info h2 {
    font-size: 2.5rem;
    font-weight: 400;
}

/* ========================= */
/* GLOBAL FONT SIZE PROPERTY */
/* ========================= */

.main-info span,                            /* ***************** */
.contact-method,                            /* FONT-SIZE: 1.4REM */
.about-title,                               /* ***************** */
.skills-subheading {
    font-size: 1.4rem;
}

.main-info span {
    margin: 2.5rem 0;
}

.about-info .page-heading,
.project-info .page-heading,
.contact-heading {
    font-size: 4.5rem;
}

.contact-heading {
    margin-bottom: 20px;
}

.contact-equalizer {
    text-align: left;
}

.contact-method {
    margin-top: 30px;
}

/* ========================= */
/* GLOBAL FONT SIZE PROPERTY */
/* ========================= */

.page-intro,
.about-text,
.project-description,                       /* ***************** */
#portfolio-website,                         /* FONT-SIZE: 1.2REM */
#go-ride,                                   /* ***************** */
#cypher-python,
#mixed-messages {
    font-size: 1.2rem;
}

.page-intro {
    padding-top: 10px;
}

.profile-picture {
    margin: 15px;
    height: 240px;
    border-radius: 10rem;
    border: 2px solid rgb(219, 219, 219);
    transition: 1s ease-in-out;
}

.profile-picture:hover {
    border: 2px solid rgb(34, 120, 233);
}

/* ======================= */
/* GLOBAL PADDING PROPERTY */
/* ======================= */

.about-section,
.github svg,
.github svg:hover,
.skills-subheading,                         /* ************* */
.skills-container,                          /* PADDING: 10PX */
.skill-item,                                /* ************* */
.item-grid,
.project-details,
footer .equalizer,
.copyright {
    padding: 10px;
}

.about-title .icon,
.skill-subitem .icon,
.contact-method .icon {
    margin-right: 10px;
    color: #2278e9;
}

.email:hover .icon * {
    fill: url(#gradient-email) !important;
    stroke: transparent !important;
}

.github-contact:hover .icon * {
    fill: url(#gradient-github) !important;
    stroke: transparent !important;
}

.linkedin-contact:hover .icon * {
    fill: url(#gradient-linkedin) !important;
    stroke: transparent !important;
}

#html {
    color: rgb(34, 120, 233);
}

/* =============================== */
/* GLOBAL JUSTIFY-CONTENT PROPERTY */
/* =============================== */

.about-title,                               /* *************************** */
main .equalizer,                            /* JUSTIFY-CONTENT: FLEX-START */
.skill-item,                                /* *************************** */
.skill-subitem {
    justify-content: flex-start;
}

.about-title {
    width: fit-content;
}

.about-text {
    padding-top: 10px;
}

.linkedin a {
    margin-right: 10px;
}

.linkedin svg,
.linkedin svg:hover {
    padding: 5px;
}

.linkedin svg,
.github svg {
    background-color: transparent;
}

.github a {
    margin-left: 10px;
}

.github svg:hover {
    border-radius: 5rem;
}

/*  ===============================
    FRAME + IMAGE CROSSFADE STYLES 
    =============================== */

/* Define frame thickness in one place */
:root {
    --frame: 40px;
    --overdraw: 1px;
}

/* Container - the whole portrait block */
.main-image {
    display: flex;               /* center content inside */
    justify-content: center;
    align-items: center;
    width: 19%;
    margin-right: 15%;
    position: relative; /* Needed so child images can be absolutely positioned */

    /* Add padding equal the frame thickness:width:
        ensures images sit inside the frame instead of being covered by it */
    padding: calc(var(--frame) - var(--overdraw));
    box-sizing: border-box;     /* padding and borders included in element size */

    /* Prevent images spilling outside if they misalign */
    overflow: hidden;
}

/* Images - front & back */
.main-image img {
    max-width: 100%;
    cursor: pointer;
    height: auto;
    display: block;                     /* avoid inline gaps */
    transition: opacity 6000ms ease;    /* smooth fade when opacity changes */
    /* No borders here - frame handled separately via ::after */
}

/* Front image - default visible */
.main-image .front { 
    position: relative;             /* stays in normal flow */ 
    z-index:1;                      /* above the back image */
    opacity:1;                      /* fully visible */
}

/* back overlays the front, same height, centered */
.main-image .back {
    position: absolute;             /* stack on top of front */
    top: var(--frame);              /* align inside the frame padding */
    left: 50%;                      /* horizontally centered */
    height: calc(100% - 2 * var(--frame)); /* subtract frame top & bottom */
    width: auto;                    /* auto width to keep aspect ratio */
    transform: translateX(-50%);    /* shift left by half its width for perfect centering */
    z-index: 0;                     /* below the front image */
    opacity: 0;                     /* invisible until triggered */
}

/* Decorative frame - only drawn once */
.main-image::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--overdraw));                        /* stretch to all edges of container */
    pointer-events: none;            /* click pass through */
    border-style: solid; /* space for the frame image */
    border-width: calc(var(--frame) + var(--overdraw));
    border-image-source: url('img/frame.png'); /* draw the ornate frame */
    border-image-slice: 280;
    border-image-repeat: stretch;
    box-sizing: border-box;          /* include border in box size */
    z-index: 2;                      /* always on top of both images */
}

/* Crossfade states */

/* Click (JS adds .flipped): hide front, show back */
.main-image.flipped .front { 
    opacity: 0; 
}

.main-image.flipped .back { 
    opacity: 1; 
}

/* Hover (only if not clicked/flipped): slow transition */
/* Re-scope hover rules so they only apply on devices that support hover  */
@media (hover: hover) and (pointer: fine) {
    .main-image:not(.flipped):hover .front { 
        opacity: 0; 
        transition-duration: 6000ms;    /* slower fade for hover */
    }

    .main-image:not(.flipped):hover .back { 
        opacity: 1; 
        transition-duration: 6000ms; 
    }
}

main {
    margin-top: 3rem;
    margin-bottom: 18rem;
    flex: 1 0 auto;
}

main .projects {
    margin-left: 15%;
    width: 45%;
}

main .skills {
    width: 50%;
}

main .projects,
main .skills {
    padding: 20px;
}

.skills-heading {
    font-size: 1.5rem;
}

.skills-subheading {
    font-weight: 550;
}

/* ====================== */
/* GLOBAL GRID CONTAINERS */
/* ====================== */

.skills-grid,                               /* ************* */
.item-grid,                                 /* DISPLAY: GRID */
.projects-grid {                            /* ************* */
    display: grid;
}

.skills-grid {
    grid-template-columns: repeat(3, 1fr);
}

.skill-item {
    height: 150px;
    width: 220px;
}

.skill-subitem {
    padding: 5px 0;
}

.skill-title,
.project-title,
.clarify {
    font-size: 1.3rem;
}

.clarify {
    padding-bottom: 3px;
    border-bottom: 2px solid rgb(0, 0, 0);
}

.skill-description {
    font-size: 1.1rem;
}

.projects-container {
    width: 70%;
}

.projects-item {
    width: 95%;
}

.item-grid {
    grid-template-rows: auto 1fr;
    margin: 0 auto;
}

/* ====================== */
/* GLOBAL HEIGHT PROPERTY */
/* ====================== */

.item-image,                                /* ************ */
.item-image img,                            /* HEIGHT: AUTO */
.button a {                                 /* ************ */
    height: auto;
}

.item-image {
    width: 95%;
}

.item-image img {
    border-radius: 1.7rem;
    border: 2px solid rgb(219, 219, 219);
    transition: 1s ease-in-out;
}

.item-image:hover img {
    border: 2px solid rgb(34, 120, 233);
}

.projects-grid {
    grid-template-columns: repeat(2, 1fr);
}

.project-details {
    margin: 5px;
}

.project-badges {
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.projects-badges img {
    vertical-align: middle;
}

/* ============================== */
/* GLOBAL FLEX DIRECTION PROPERTY */
/* ============================== */

.grid-buttons,                              /* ******************* */
.button,                                    /* FLEX-DIRECTION: ROW */
.button a {                                 /* ******************* */
    flex-direction: row;
}

.grid-buttons {
    height: 4rem;
}

.button {
    cursor: pointer;
    vertical-align: middle;
    width: 8rem;
    margin: 10px;
    background-color: #2278e9;
    border: 2px solid rgb(255, 255, 255);
}

.button:hover {
    border: 2px solid transparent;
}

.button a {
    width: auto;
}

.button svg {
    margin: 10px;
    width: 2.5rem;
    height: 2.5rem;
}

#projects-header h2 {
    font-weight: 800;
}

#portfolio-website,
#go-ride,
#cypher-python,
#mixed-messages {
    font-weight: 500;
    margin-top: 1rem;
}

#projects-header,
#portfolio-website,
#go-ride,
#cypher-python,
#mixed-messages {
    text-decoration: none;
}

#portfolio-website span {
    border-bottom: 2px solid black;
}

#portfolio-website:hover span {
    border-bottom: 2px solid rgb(34, 120, 233);
}

#projects-header:hover,
#portfolio-website:hover,
#go-ride:hover,
#cypher-python:hover,
#mixed-messages:hover {
    color: rgb(34, 120, 233);
}

footer {
    margin-top: auto;
    margin-bottom: 2rem;
}

footer .equalizer {
    height: fit-content;
    width: 788px;
}

@media only screen and (max-width: 1375px) {
    nav {
        margin-left: 2rem;
    }

    .main-info {
        width: 40%;
    }

    .main-info .gradient,
    .about-info .page-heading,
    .about-info .gradient,
    .project-info .page-heading {
        font-size: 2.5rem;
        font-weight: 800;
    }

    .main-info h2 {
        font-size: 1.5rem;
        font-weight: 500;
    }

    .main-info span {
        margin: 2.5rem 0;
        font-size: 1.2rem;
    }

    .main-image {
        margin-right: 20%;
    }

    main .projects {
        width: 50%;
    }

    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto;
    }

    #portfolio-website,
    #go-ride,
    #cypher-python,
    #mixed-messages {
        font-size: 1.2rem;
        margin-top: 1rem;
    }
}

:root {
    --nav-height: 5rem;
}

@media only screen and (max-width: 1250px) {
    nav {
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        height: var(--nav-height);
        margin-left: 0;
        margin-bottom: 0;
        z-index: 9999;
        width: 100%;
        background-color: rgb(174, 254, 174);
        transform: none;
        border-radius: .5rem .5rem 0 0;
    }

    nav .nav {
        flex-direction: row;
    }

    .nav a {
        margin: .5rem 1.5rem 1.5rem 1.5rem;
    }

    /* Reserve space for notches if present */
    body {
        padding-bottom: max(var(--nav-height), env(safe-area-inset-bottom));
    }

    .project-info,
    .projects-container {
        width: 80%;
    }

    .contact-info {
        width: 60%;
    }

    .main-info {
        width: 45%;
    }

    .about-info {
        width: 70%;
    }

    .main-info .gradient {
        font-size: 2rem;
    }

    .main-info h2 {
        font-size: 1.4rem;
    }

    .main-info span {
        font-size: 1.2rem;
    }

    .profile-picture {
        transition: 0s;
    }

    .profile-picture:hover {
        border: 2px solid rgb(219, 219, 219);
    }

    .profile-picture:active {
        border: 2px solid rgb(34, 120, 233);
    }

    .linkedin svg:hover,
    .github svg:hover,
    .button:hover svg,
    #projects-header:hover,
    #portfolio-website:hover,
    #go-ride:hover,
    #mixed-messages:hover,
    #cypher-python:hover {
        color: rgb(0, 0, 0);
    }

    #portfolio-website:hover span {
        border-bottom: 2px solid rgb(0, 0, 0);
    }

    .linkedin svg:active,
    .button:hover,
    .button:active {
        border-radius: .5rem;
    }

    .button:hover {
        background: #2278e9;
        border: 2px solid rgb(255, 255, 255);
    }

    .button:active {
        border: 2px solid transparent;
    }

    .linkedin svg:active,
    .github svg:active,
    .button:active {
        background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9);
    }

    .linkedin svg:active,
    .github svg:active,
    .button:active svg {
        color: rgb(255, 255, 255);
    }

    .linkedin svg:hover,
    .github svg:hover {
        background: none;
    }

    .linkedin svg:active {
        padding: 5px;
        border-radius: .5rem;
    }

    .linkedin svg:active,
    .github svg:active {
        background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9);
    }

    .linkedin svg:active,
    .github svg:active {
        color: rgb(255, 255, 255);
    }

    .github svg:active {
        padding: 10px;
        border-radius: 5rem;
    }

    .main-image {
        width: 30%;
        margin-right: 7%;
    }

    .contact-heading {
        font-size: 3rem;
    }

    .contact-method:hover .gradient {
        background: #000000;
        background-clip: text;
    }

    .email:hover .icon * {
        fill: #2278e9 !important;
        stroke: transparent !important;
    }

    .github-contact:hover .icon * {
        fill: #2278e9 !important;
        stroke: transparent !important;
    }

    .linkedin-contact:hover .icon * {
        fill: #2278e9 !important;
        stroke: transparent !important;
    }

    .contact-method:active .gradient {
        background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        line-height: normal;
    }

    .email:active .icon * {
        fill: url(#gradient-email) !important;
        stroke: transparent !important;
    }

    .github-contact:active .icon * {
        fill: url(#gradient-github) !important;
        stroke: transparent !important;
    }

    .linkedin-contact:active .icon * {
        fill: url(#gradient-linkedin) !important;
        stroke: transparent !important;
    }

    .projects-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .projects-item,
    .item-image {
        width: 100%;
    }

    .item-image img {
        transition: 0s;
    }

    .item-image:hover img {
        border: 2px solid rgb(219, 219, 219);
    }

    .item-image:active img {
        border: 2px solid rgb(34, 120, 233);
    }

    .grid-buttons {
        justify-content: center;
    }

    .button:active {
        border-radius: .5rem;
    }

    main .projects {
        width: 75%;
    }

    main .skills {
        width: 70%;
    }

    #projects-header h2 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    #projects-header:active,
    #portfolio-website:active,
    #go-ride:active,
    #cypher-python:active,
    #mixed-messages:active {
        color: rgb(34, 120, 233);
    }

    #portfolio-website:active span {
        border-bottom: 2px solid rgb(34, 120, 233);
    }

    #portfolio-website,
    #go-ride,
    #cypher-python,
    #mixed-messages {
        font-size: 1.2rem;
        margin-top: 1rem;
    }

    footer {
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 675px) {
    .main-image,
    main .projects {
        margin: 0;
    }

    nav {
        border-radius: 0;
    }

    .nav a {
        margin: 0 .5rem;
    }

    .nav a svg,
    .nav .inactive svg:hover,
    .linkedin svg:hover,
    .github svg:hover,
    .button:hover svg,
    #projects-header:hover,
    #portfolio-website:hover,
    #go-ride:hover,
    #mixed-messages:hover,
    #cypher-python:hover {
        color: rgb(0, 0, 0);
    }

    .nav a svg {
        padding: .5rem;
        margin: .6rem;
    }

    .project-info .page-heading {
        font-size: 2rem;
    }

    .linkedin svg:hover,
    .github svg:hover,
    .nav a.active svg,
    .nav .inactive svg:hover {
        background: none;
    }

    .linkedin svg:active,
    .button:hover,
    .button:active {
        border-radius: .5rem;
    }

    .button:hover {
        background: #2278e9;
        border: 2px solid rgb(255, 255, 255);
    }

    .button:active {
        border: 2px solid transparent;
    }

    .nav a.active,
    .linkedin svg:active,
    .github svg:active,
    .button:active {
        background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9);
    }

    .nav a.active,
    .nav a.active svg,
    .linkedin svg:active,
    .github svg:active,
    .button:active svg {
        color: rgb(255, 255, 255);
    }

    .nav a.active {
        border-radius: 0;
    }

    .nav .inactive svg:hover {
        border-radius: none;
    }

    .info {
        flex-direction: column-reverse;
    }

    .main-info {
        margin-top: 2rem;
        margin-left: 0;
    }

    .main-info,
    .about-info,
    main .skills,
    main .projects {
        width: 90%;
    }

    .about-text,
    .main-info span,
    .skills-subheading {
        font-size: 1.3rem;
    }

    .projects-container {
        padding: 5px;
    }

    .main-info .gradient {
        font-size: 2.5rem;
        margin: 0 auto;
    }

    .main-info h2 {
        font-size: 1.7rem;
        margin: 0 auto;
    }

    .profile-picture {
        transition: 0s;
    }

    .profile-picture:hover {
        border: 2px solid rgb(219, 219, 219);
    }

    .profile-picture:active {
        border: 2px solid rgb(34, 120, 233);
    }

    .contact-info {
        width: 85%;
    }

    .main-image {
        width: 50%;
    }

    .main-image img {
        cursor: default;
    }

    .item-image img {
        transition: 0s;
    }

    .item-image:hover img {
        border: 2px solid rgb(219, 219, 219);
    }

    .item-image:active img {
        border: 2px solid rgb(34, 120, 233);
    }

    .linkedin svg:active {
        padding: 5px;
    }

    .github svg:active {
        padding: 10px;
        border-radius: 5rem;
    }

    .contact-method:hover .gradient {
        background: #000000;
        background-clip: text;
    }

    .email:hover .icon * {
        fill: #2278e9 !important;
        stroke: transparent !important;
    }

    .github-contact:hover .icon * {
        fill: #2278e9 !important;
        stroke: transparent !important;
    }

    .linkedin-contact:hover .icon * {
        fill: #2278e9 !important;
        stroke: transparent !important;
    }

    .contact-method:active .gradient {
        background: linear-gradient(120deg, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9, #000000, #2278e9);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        line-height: normal;
    }

    .email:active .icon * {
        fill: url(#gradient-email) !important;
        stroke: transparent !important;
    }

    .github-contact:active .icon * {
        fill: url(#gradient-github) !important;
        stroke: transparent !important;
    }

    .linkedin-contact:active .icon * {
        fill: url(#gradient-linkedin) !important;
        stroke: transparent !important;
    }

    .skills-heading {
        font-size: 1.6rem;
    }

    .skills-subheading {
        padding: 10px 0;
    }

    .skill-item {
        height: 150px;
        width: 320px;
    }

    .skill-subitem #html,
    .skill-subitem .icon {
        width: 30px;
        height: 30px;
    }

    .skill-title {
        font-size: 1.5rem;
    }

    .skill-description {
        font-size: 1.4rem;
    }

    main .equalizer {
        justify-content: center;
    }

    #projects-header:active,
    #portfolio-website:active,
    #go-ride:active,
    #mixed-messages:active,
    #cypher-python:active {
        color: rgb(34, 120, 233);
    }

    .skills-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    footer {
        margin-bottom: 1rem;
    }

    footer .equalizer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}