style.css

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Bold.eot');
    src: url('fonts/Quicksand-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Quicksand-Bold.woff2') format('woff2'),
        url('fonts/Quicksand-Bold.woff') format('woff'),
        url('fonts/Quicksand-Bold.ttf') format('truetype'),
        url('fonts/Quicksand-Bold.svg#Quicksand-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Light.eot');
    src: url('fonts/Quicksand-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Quicksand-Light.woff2') format('woff2'),
        url('fonts/Quicksand-Light.woff') format('woff'),
        url('fonts/Quicksand-Light.ttf') format('truetype'),
        url('fonts/Quicksand-Light.svg#Quicksand-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Medium.eot');
    src: url('fonts/Quicksand-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Quicksand-Medium.woff2') format('woff2'),
        url('fonts/Quicksand-Medium.woff') format('woff'),
        url('fonts/Quicksand-Medium.ttf') format('truetype'),
        url('fonts/Quicksand-Medium.svg#Quicksand-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Regular.eot');
    src: url('fonts/Quicksand-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Quicksand-Regular.woff2') format('woff2'),
        url('fonts/Quicksand-Regular.woff') format('woff'),
        url('fonts/Quicksand-Regular.ttf') format('truetype'),
        url('fonts/Quicksand-Regular.svg#Quicksand-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-SemiBold.eot');
    src: url('fonts/Quicksand-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Quicksand-SemiBold.woff2') format('woff2'),
        url('fonts/Quicksand-SemiBold.woff') format('woff'),
        url('fonts/Quicksand-SemiBold.ttf') format('truetype'),
        url('fonts/Quicksand-SemiBold.svg#Quicksand-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*======================*/
/* sindresorhus/modern-normalize 
    Version = v1.1.0 from May 2, 2021
    License = MIT License
    GitHub Link = https://github.com/sindresorhus/modern-normalize */
/*======================*/

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
    box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/

html {
    -moz-tab-size: 4;
    tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
    margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
    font-family:
        system-ui,
        -apple-system,
        /* Firefox supports this but not yet `system-ui` */
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        'Apple Color Emoji',
        'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
    text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        'Liberation Mono',
        Menlo,
        monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select {
    /* 1 */
    text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*======================*/
/* jackdomleo7/Useful_global_CSS.css
    Version = August 28, 2022
    License = MIT License
    GitHub Link = https://gist.github.com/jackdomleo7/55659bafe581d19cc341ef775d6a9e6b */
/*======================*/

::selection {
    /* Optional */
    /* It can be really hard to read highlighted text with a text-shadow, it should be removed when selected */
    text-shadow: none;

    /* NOTE: Using this means the color and background-color are set to transparent for selected text... */
    /* So you can customise your styles below */
    color: #fff;
    background-color: #689915;
}

html {
    /* Make base font-size 100% of browser font-size */
    font-size: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
        /* Smoothly animate to different sections within a page, only if the user doesn't mind animations */
    }
}

*,
*::before,
*::after,
html {
    /* Declare your box-sizing here
  /* https://css-tricks.com/box-sizing */
    box-sizing: content-box;
}

body {
    /* Declare your default font stack here */
    font-family: "Quicksand", sans-serif;

    /* Better text rendering - font-smoothing has not been officially declared, but can still be useful */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    /* For responsive images that adjust & adapt */
    height: auto;
    max-width: 100%;

    /* This isn't needed, but as a user, I get frustrated when I highlight text and the image gets highlighted too */
    user-select: none;
}

button {
    color: inherit;
    /* By default, buttons don't inherit the font colour, this is a useful default to override */
}

a,
button {
    touch-action: manipulation;
    /* Element doesn't want double-tap on mobile to zoom */
}

svg {
    /* Make the SVGs fit the parent container by default */
    height: 100%;
    width: 100%;

    /* Optional - make the SVG's fill be the same as the inherited color */
    fill: currentColor;

    /* Prevent the SVG from altering cursor interaction */
    pointer-events: none;
}

iframe,
video {
    /* Make iframes & videos fit the parent container by default */
    height: 100%;
    width: 100%;
}

/*======================*/
/* derek-perry/derek-perry.com/style.css
    Version = October 15, 2023
    License = GPL v3.0 License
    GitHub Link = https://github.com/derek-perry/derek-perry.com */
/*======================*/

/* == Default HTML restyling styles == */

a {
    /* Dark Mode Color Scheme - Green accent color used for links */
    color: #689915;
    text-decoration: none;
}

a:focus {
    /* Dark Mode Color Scheme - Green accent color SLIGHTLY DARKENED for use on focused links */
    color: rgba(104, 153, 21, 0.8);
    text-decoration: underline;
}

a:hover,
a:focus:hover {
    /* Dark Mode Color Scheme - Green accent color DARKENED for use on hovered links */
    color: rgba(104, 153, 21, 0.7);
}

a:active,
a:hover:active {
    /* Dark Mode Color Scheme - Green accent color SUPER DARKENED for use on active links */
    color: rgba(104, 153, 21, 0.6);
}

img {
    /* Fix/remove unnessecary image borders when the image has is link */
    color: rgba(28, 35, 35, 0);
    border: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
}

a img:hover {
    /* Change image opacity when hovering over the image-link */
    opacity: 0.8;
}

a img:focus {
    /* Change image opacity when focusing the image-link */
    opacity: 0.7;
}

a img:active {
    /* Change image opacity when activating/clicking the image-link */
    opacity: 0.6;
}

hr {
    /* A subtle, dark grey divider line */
    margin: 48px 0 48px 0;
    border: 0;
    height: 1px;
    background-color: #303436;
}

/* == Generic, reusable styles == */

.button {
    /* A generic, green button */
    padding: 12px 24px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    background-color: #689915;
    color: white;
    border: 1px solid #689915;
}

.button:focus {
    /* A generic, green button - Focus State */
    color: white;
    background-color: rgba(104, 153, 21, 0.8);
    border: 1px solid white;
    text-decoration: underline;
}

.button:hover,
.button:focus:hover {
    /* A generic, green button - Hover State */
    color: white;
    background-color: rgba(104, 153, 21, 0.7);
    border: 1px solid rgba(104, 153, 21, 0.7);
}

.button:active,
.button:hover:active {
    /* A generic, green button - Active State */
    color: white;
    background-color: rgba(104, 153, 21, 0.6);
    border: 1px solid white;
}

.aligncenter {
    /* Align div to center with both margin auto and text-align center */
    margin: 0 auto;
    text-align: center;
}

.marginvert {
    /* Add vertical (top and bottom) margin and remove horizontal (left and right ) margin */
    margin: 24px 0;
}

/* === Specific, non-reusable styles === */

html {
    scroll-padding-top: 50px;
    /* Dark Mode Color Scheme - White Text on Dark Grey Background */
    color: #fff;
    background-color: #1c2323;
    border: none;
    padding: 0 12px;
    line-height: 1.25;
}

body {
    /* Body is centered */
    margin: 0 auto;
    border: none;
}

#header {
    /* Header - Add margin and set a max-width and min-height to the entire header */
    margin: 12px auto 48px auto;
    min-height: 64px;
    border-bottom: 1px solid #689915;
    max-width: 1260px;
}

#header #headerlogo {
    /* Header - Display header logo on left side of header on desktop */
    float: left;
}

#header #headerlogo img {
    /* Header - Display header logo on left side of header on desktop */
    margin: 0 12px 12px 0;
    display: inline-block;
    vertical-align: middle;
}

#header #headerlogo h1 {
    /* Header - Display header logo on left side of header on desktop */
    margin: 0 12px 12px 0;
    display: inline-block;
    vertical-align: middle;
}

#header #headerdescription {
    /* Header - Display header description on right side of header on desktop */
    margin: 12px 12px 12px 0;
    float: right;
    color: #788082;
}

#header h1,
#header h2,
#header a {
    /* Header - Simplify text styles */
    padding: 0;
    margin: 0;
}

@media only all and (max-width:800px) {

    /* Header - On mobile, push the header description "Game, Graphic, & Web" text to a new line */
    #header {
        /* Header - Center header content */
        margin: 12px auto 48px auto;
        min-height: 128px;
        border-bottom: 1px solid #689915;
    }

    #header #headerlogo {
        /* Header - Display header logo in center of header above headerdescription on mobile */
        float: none;
        display: block;
        margin: 12px auto;
        text-align: center;
    }

    #header #headerdescription {
        /* Header - Display header description in center of header below headerlogo on mobile */
        float: none;
        display: block;
        margin: 12px auto;
        text-align: center;
    }
}

#footer {
    /* Footer - Social/Contact Link Area Styles - Provide propper padding between page content and the footer content - Also center footer content */
    margin: 48px auto 0 auto;
    padding: 48px 0 24px 0;
    text-align: center;
    border-top: 1px solid #689915;
    max-width: 1260px;
}

#footerlinks p {
    /* Footer - Social/Contact Link Area Styles - List links as horizontal row with item margins */
    display: inline-block;
    margin: 0 24px 24px 0;
    vertical-align: middle;
}

#policy {
    /* Policy Pages - Provide propper padding between page areas and limit content width */
    margin: 24px auto;
    max-width: 1260px;
}

#portfolio {
    /* Portfolio/Works Listing - Center text and other content in the portfolio */
    margin: 24px auto;
    text-align: center;
}

#portfolio hr {
    /* Portfolio/Works Listing -  Provide propper padding and limit hr width */
    margin: 48px auto;
    text-align: center;
    max-width: 1350px;
}

.works {
    /* Portfolio/Works Listing - Provide propper padding between work listing areas */
    margin: 24px auto;
    text-align: center;
    max-width: 1350px;
}

#work {
    /* Single Work Page - Limit content width */
    max-width: 1260px;
    margin: 0 auto;
}

#work #summary {
    /* Single Work Page - Add padding below Summary area */
    margin: 0 0 24px 0;
}

#work #software {
    /* Single Work Page - Add padding below Software area */
    margin: 0 0 48px 0;
}

#work #summary ul {
    /* Single Work Page - Styles for "Skills Used" ul parent item */
    display: block;
    list-style: none;
    margin: 0;
    padding: 0 0 12px 0;
}

#work #summary li {
    /* Single Work Page - Styles for "Skills Used" li children items */
    display: inline-block;
    margin: 12px 12px 0 0;
    padding: 12px 24px;
    color: white;
    background-color: #292D2E;
    border: 1px solid rgba(48, 52, 54, 1);
}