@import url('https://fonts.googleapis.com/css?family=Montserrat|Odibee+Sans|Roboto+Mono&display=swap');

/*
font-family: 'Roboto Mono', monospace;
font-family: 'Montserrat', sans-serif;
font-family: 'Odibee Sans', cursive;
*/
* {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    list-style-type: none;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    top: 0;
    left: 0;
    /*background-color: #222831;*/
    min-height: 100vH;
}

body {
    /* opacity: 0; Removed for faster perceived load */
    background-attachment: fixed;
    background-origin: content-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

:root {
    --bg-body: #222831;
    --bg-primary: #393e46;
    --bg-secondary: #eeeeee;
    --text-primary: white;
    /* On dark backgrounds */
    --text-secondary: black;
    /* On light backgrounds */
    --accent: #00adb5;
    --shadow: #000000;
    --shadow-soft: rgba(0, 0, 0, 0.6);
}

.light-theme {
    --bg-body: #f4f4f4;
    --bg-primary: #ffffff;
    --bg-secondary: #e0e0e0;
    --text-primary: #333333;
    --text-secondary: #000000;
    --accent: #007bff;
    /* a standard blue */
    --shadow: #aaaaaa;
    --shadow-soft: rgba(0, 0, 0, 0.1);
}

.neon-theme {
    --bg-body: #050505;
    --bg-primary: #1a1a1a;
    --bg-secondary: #2b2b2b;
    --text-primary: #ff00ff;
    /* Magenta */
    --text-secondary: #00ff00;
    /* Green */
    --accent: #00ff00;
    --shadow: #ff00ff;
    --shadow-soft: rgba(255, 0, 255, 0.4);
}

.bg-1 {
    background-image: url('../images/bg1.jpg');
}

.bg-2 {
    background-image: url('../images/bg2.jpg');
}

.bg-3 {
    background-image: url('../images/bg3.jpg');
}

.light-theme.bg-1,
.light-theme.bg-2,
.light-theme.bg-3 {
    background-image: none;
    /* Light theme usually looks cleaner without dark grungy bg */
    background-color: var(--bg-body);
}

.site {
    width: 100%;
    display: grid;
    grid-template-areas: ". head head head head ."
        ". nav nav nav nav ."
        ". main main main main ."
        ". footer footer footer footer .";
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: flex-start;
}

.site>head {
    grid-area: head;
    width: 100%;
    height: 100px;
}

.site>nav {
    grid-area: nav;
    width: 100%;
    position: sticky;
    top: 0;
}

.menu {
    display: table;
    color: var(--text-primary);
    text-align: center;
    background-color: var(--bg-primary);
    border-radius: 5px;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 10px;
    font-size: 32px;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px #000000, 0px 0px 15px 0px rgba(0, 0, 0, 0);
    border-style: ridge;
    border-color: #85888D;
}

.menu li {
    list-style-type: none;
    display: inline-block;
    padding-right: 15px;
    font-family: 'Odibee Sans', cursive;
}

.menu li:last-child {
    padding-right: 0;
}

.menu a {
    color: white;
    text-decoration: none;
}

.menu a:hover {
    color: #00adb5;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.site>main {
    grid-area: main;
    width: 100%;
}

.site>footer {
    grid-area: footer;
    width: 100%;
    bottom: 0;
    background-color: #393e46;
    width: 100%;
    border-radius: 5px;
    padding: 10px;
    margin: 25px 0 0 0;
    color: white;
    font-family: 'Roboto Mono', monospace;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px #000000, 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.footerLeft {
    float: left;
}

.footerRight {
    float: right;
}

.bioImage {
    margin: 0 0 -30px 25px;
    width: fit-content;
}

.bioImage img {
    border-radius: 50%;
    border-style: solid;
    border-width: 7px;
    border-color: var(--accent);
    max-height: 128px;
    -webkit-box-shadow: 5px 5px 15px 5px var(--shadow);
    box-shadow: 5px 5px 15px 5px var(--shadow);
}

.bioContainer {
    width: 100%;
    background-color: var(--bg-primary);
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.bioContent {
    width: 100%;
    background-color: var(--bg-secondary);
    border-radius: 5px;
    padding: 10px;
}

.bioContent h3 {
    margin: 0 0 15px 0;
    font-family: 'Roboto Mono', monospace;
}

.bioContent h4 {
    font-family: 'Odibee Sans', cursive;
    font-size: 20px;
}

.bioContainer p {
    text-indent: 25px;
    margin: 0 0 15px 0;
    font-family: 'Montserrat', sans-serif;
}

.portfolioContainer {
    width: 100%;
}

.portfolioHeader,
.mediaHeader,
.downloadHeader,
.contactHeader,
.ebayDescription {
    width: fit-content;
    margin: 0 auto;
    background-color: var(--bg-primary);
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.portfolioHeader h2,
.mediaHeader h2,
.downloadHeader h2,
.contactHeader h2,
.ebayDescription h2 {
    font-family: 'Roboto Mono', monospace;
    color: white;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.portfolioHeader p,
.mediaHeader p,
.downloadHeader p,
.contactHeader p,
.ebayDescription p {
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.portfolioSectionTitle {
    background-color: var(--bg-primary);
    border-radius: 5px 5px 0 0;
    width: max-content;
    padding: 5px 10px;
    color: white;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.portfolioListContainer {
    background-color: var(--bg-primary);
    padding: 15px 10px;
    border-radius: 0 5px 0 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.portfolioListContent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "portfolioItem portfolioItem portfolioItem";
    align-content: flex-start;
}

.portfolioItemWrapper {
    display: flex;
    padding: 10px;
    margin: 1px;
    background-color: var(--bg-primary);
    border-radius: 5px;
}

.portfolioListItem:last-child {
    margin-right: 0;
}

.portfolioBackNav {
    grid-area: backNav;
    margin: auto 10px auto auto;
    color: var(--text-primary);
}

.portfolioBackNav:hover {
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.portfolioForwardNav {
    grid-area: forwardNav;
    margin: auto auto auto auto;
    color: white;
    cursor: pointer;
}

.portfolioListItem {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "portfolioImage"
        "portfolioUrlButton"
        "portfolioTitle"
        "portfolioDescription";
    background-color: var(--bg-secondary);
    margin-right: 10px;
    align-content: flex-start;
}

.portfolioUrlButton {
    grid-area: portfolioUrlButton;
    padding: 0 10px;

}

.portfolioListContent button {
    background-color: var(--accent);
    width: 100%;
    border-radius: 5px;
    padding: 5px 0;
    font-size: 20px;
    font-family: 'Odibee Sans', cursive;
    cursor: pointer;
}

.portfolioUrlButton button:hover {
    color: white;
}

.portfolioListItem:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.portfolioItemImage {
    grid-area: portfolioImage;
}

.portfolioItemImage img {
    width: 100%;
    height: 100%;
    max-height: 480px;
}

.portfolioItemTitle {
    grid-area: portfolioTitle;
    background-color: var(--bg-secondary);
    padding: 5px 10px;
}

.portfolioItemDescription {
    grid-area: portfolioDescription;
    background-color: var(--bg-secondary);
    padding: 5px 10px;
}

.portfolioViewAll {
    width: fit-content;
    padding: 5px 10px;
    float: right;
    background-color: var(--bg-primary);
    border-radius: 0 0 5px 5px;
    color: var(--text-primary);
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.portfolioViewAll h3:hover {
    cursor: pointer;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.portfolioContentViewAll {
    width: fit-content;

}

.portfolioViewAll a {
    color: white;
    text-decoration: none;
}

.portfolioListItemWrapper {
    background-color: var(--bg-primary);
    padding: 10px;
}

.smallSpacer {
    width: 100%;
    height: 50px;
}

.smallestSpacer {
    width: 100%;
    height: 15px;
}

.mediaContainer {
    width: 100%;
}

.mediaSectionTitle {
    background-color: var(--bg-primary);
    border-radius: 5px 5px 0 0;
    width: max-content;
    padding: 5px 10px;
    color: white;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.mediaListContainer {
    background-color: var(--bg-primary);
    padding: 15px 10px;
    border-radius: 0 5px 0 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.mediaListContainerAll {
    background-color: var(--bg-primary);
    padding: 15px 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.mediaListContent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "mediaItem mediaItem mediaItem";
    align-content: flex-start;
}

.mediaBackNav {
    grid-area: backNav;
    margin: auto 10px auto auto;
    color: var(--text-primary);
}

.mediaBackNav:hover {
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.mediaForwardNav:hover {
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.mediaForwardNav {
    grid-area: forwardNav;
    margin: auto auto auto auto;
    color: white;
}

.mediaListItem {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "mediaImage"
        "mediaTitle"
        "mediaDescription";
    margin-right: 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(14, 14, 14, 1) 62%, var(--bg-secondary) 63%);
    align-content: flex-start;
    border-radius: 5px;
}

.mediaListItem:last-child {
    margin-right: 0;
}

.mediaItemImage {
    grid-area: mediaImage;
}

.mediaItemImage img {
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
}

.mediaItemTitle {
    grid-area: mediaTitle;
    background-color: var(--bg-secondary);
    padding: 5px 10px;
    border-radius: 0 0 5px 5px;
}

.mediaItemDescription {
    grid-area: mediaDescription;
    background-color: var(--bg-secondary);
    padding: 5px 10px;
}

.mediaViewAll {
    width: fit-content;
    padding: 5px 10px;
    float: right;
    background-color: var(--bg-primary);
    border-radius: 0 0 5px 5px;
    color: var(--text-primary);
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.mediaViewAll a {
    color: white;
    text-decoration: none;
}

.mediaViewAll h3:hover {
    cursor: pointer;
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.mediaPlatformContainer {
    background-color: var(--bg-primary);
    padding: 15px 10px;
    border-radius: 0 5px 5px 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.mediaPlatformLogos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "platformLogo platformLogo platformLogo";
    align-content: flex-start;
}

.platformLogo {
    padding: 10px;
    margin: auto;
}

.platformLogo img {
    width: 100%;
    max-width: 128px;
}

.downloadConainer {
    width: 100%;
}

.downloadList {
    width: 100%;
}

.downloadListContent {
    width: 100%;
    color: white;

}

.downloadItem {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "downloadIcon downloadTitle"
        "downloadIcon downloadDescription"
        "downloadIcon downloadType"
        "downloadIcon downloadButton";
    background-color: var(--bg-primary);
    border-radius: 5px;
    padding: 10px;
    align-content: flex-start;
}

.downloadIcon {
    grid-area: downloadIcon;
    margin-right: 10px;
}

.downloadIcon img {
    width: 87px;
}

.downloadTitle {
    grid-area: downloadTitle;
}

.downloadDescription {
    grid-area: downloadDescription;
}

.downloadType {
    grid-area: downloadType;
}

.downloadButton {
    grid-area: downloadButton;
    width: fit-content;
}

.downloadButton button {
    background-color: var(--accent);
    padding: 5px 10px;
    font-family: 'Odibee Sans', cursive;
    font-size: 24px;
    margin: 10px 0 0 0;
}

.downloadButton button:hover {
    color: white;
}

.contactMethodList {
    width: max-content;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-primary);
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.contactForm {
    width: 100%;
    background-color: var(--bg-primary);
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

input[type=text],
input[type=email],
input[type=tel],
select,
textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

textarea {
    resize: vertical;
    height: 200px;
    font-family: 'Montserrat', sans-serif;
}

input[type=submit] {
    padding: 10px;
    border-radius: 5px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

input[type=submit]:hover {
    cursor: pointer;
}

#mailingList:hover,
#mailingList:focus {
    border-color: var(--shadow);
    -moz-box-shadow: inset 0 0 3px var(--shadow);
    -webkit-box-shadow: inset 0 0 3px var(--shadow);
    box-shadow: inset 0 0 3px var(--shadow);
}

#firstName:hover,
#firstName:focus,
#lastName:hover,
#lastName:focus,
#email:hover,
#email:focus,
#phoneNumber:hover,
#phoneNumber:focus,
#addressLineOne:hover,
#addressLineOne:focus,
#addressLineTwo:hover,
#addressLineTwo:focus,
#city:hover,
#city:focus,
#state:hover,
#state:focus,
#zipcode:hover,
#zipcode:focus,
#subject:hover,
#subject:focus,
#messageBody:hover,
#messageBody:focus,
#submit:hover,
#submit:focus {
    border-color: var(--shadow);
    -moz-box-shadow: inset 0 0 10px var(--shadow);
    -webkit-box-shadow: inset 0 0 10px var(--shadow);
    box-shadow: inset 0 0 10px var(--shadow);
}

#mailingList {
    margin-bottom: 10px;
}

.icon {
    width: 32px;
}

.contactMethodList a {
    color: white;
    text-decoration: none;
}

.contactMethodList a:hover {
    color: #00adb5;
}

.contactMethodList li {
    display: inline-block;
}

.whiteLabel {
    color: white;
    display: inline;
    vertical-align: top;
}

input[type=checkbox] {
    height: 25px;
    width: 25px;
}

.portfolioItemTitle,
.portfolioItemDescription,
.mediaItemTitle,
.mediaItemDescription {
    font-family: 'Montserrat', sans-serif;
}

.portfolioSectionTitle h3,
.mediaSectionTitle h3 {
    font-family: 'Roboto Mono', monospace;
}

.portfolioViewAll,
.mediaViewAll {
    font-family: 'Roboto Mono', monospace;
}

.portfolioBackNav,
.portfolioForwardNav,
.mediaBackNav,
.mediaForwardNav {
    font-family: 'Roboto Mono', monospace;
}

p {
    margin-bottom: 25px;
}

p:last-of-type {
    margin-bottom: 0;
}

.mobileMenucontainer {
    display: none;
    position: sticky;
    top: 10px;
    background-color: var(--bg-primary);
    width: -moz-max-content;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.mobileMenu {
    width: 100%;
    background-color: var(--bg-primary);
    display: none;
    font-family: 'Odibee Sans', cursive;
    font-size: 32px;
    padding: 10px 10px;
    position: sticky;
    top: 55px;
    border-radius: 0 5px 5px 5px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0, 0, 0, 0);
}

.mobileMenu li {
    display: block;
}

.mobileMenu a {
    color: var(--text-primary);
    text-decoration: none;
    display: block;
}

.mobileMenu a:hover {
    color: var(--accent);
    text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
}

.videoContainer {
    display: grid;
    width: 100%;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "videoBackButton"
        "videoTitle"
        "videoContent";
    align-content: flex-start;
}

.videoTitle {
    grid-area: videoTitle;
    width: 100%;
    color: var(--text-primary);
    border-radius: 5px 5px 0 0;
    padding: 5px 10px;
    background-color: var(--bg-primary);
}

.videoTitle h3 {
    font-family: 'Roboto Mono', monospace;
}

.videoContent {
    grid-area: videoContent;
    width: 100%;
    height: 0;
    padding-bottom: 51%;
    position: relative;
    background-color: var(--bg-primary);
}

.videoContent iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.videoBackButton {
    width: fit-content;
    margin-bottom: 10px;
}

.videoBackButton button {
    width: fit-content;
    padding: 5px 20px;
    font-size: 32px;
    font-family: 'Odibee Sans', cursive;
    background-color: var(--accent);
    border-radius: 5px;
    cursor: pointer;
}

.videoBackButton button:hover {
    color: white;
}

.fileDownloadContainer {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    grid-template-areas: "fileDownloadBackButton"
        "fileDownloadTitle"
        "fileDownloadDescription"
        "fileDownloadType"
        "fileDownloadWait";
    align-content: flex-start;
}

.fileDownloadBackButton {
    grid-area: fileDownloadBackButton;
    width: fit-content;
    margin-bottom: 10px;
}

.fileDownloadBackButton button {
    width: fit-content;
    padding: 5px 20px;
    font-size: 32px;
    font-family: 'Odibee Sans', cursive;
    background-color: var(--accent);
    border-radius: 5px;
    cursor: pointer;
}

.fileDownloadBackButton button:hover {
    color: white;
}

.fileDownloadTitle {
    width: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 5px 5px 0 0;
    grid-area: fileDownloadTitle;
    padding: 5px 10px;
}

.fileDownloadDescription {
    width: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    grid-area: fileDownloadDescription;
    padding: 5px 10px;
}

.fileDownloadType {
    width: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    grid-area: fileDownloadType;
    padding: 5px 10px;
}

.fileDownloadWait {
    width: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    grid-area: fileDownloadWait;
    padding: 5px 10px;
    border-radius: 0 0 5px 5px;
}

#fileDownloadTimer {
    width: 100%;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 0 0 5px 5px;
}

.thankYou {
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
}

.recordNumber,
.pagenation {
    width: max-content;
    margin: 0 auto;
    font-family: 'Odibee Sans', cursive;
    font-size: 20px;
    color: var(--text-primary);
}

.recordNumber a,
.pagenation a {
    text-decoration: none;
    color: var(--text-primary);
}

.recordNumber a:hover,
.pagenation a:hover {
    color: var(--accent);
}

#activePage {
    color: var(--accent);
}

.pagenation li {
    display: inline;
}

.pagenation li::after {
    content: " ";
}

.resumeContainer {
    width: 100%;


}

.resumeTitle {
    width: 100%;
}

.resumeHeader {
    width: 100%;
    display: grid;
    grid-template-columns: fit-content fit-content;
    grid-template-rows: auto auto;
    grid-template-areas: "resumeTitle resumeContactInfo"
        "resumeTagLine resumeContactInfo";
}

.resumeTitle {
    grid-area: resumeTitle;
    width: 100%;
}

.resumeTagLine {
    grid-area: resumeTagLine;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
}

.resumeContactInfo {
    grid-area: resumeContactInfo;
    width: 100%;
    text-align: right;
    font-family: 'Montserrat', sans-serif;
}

.resumeContactInfo a {
    color: black;
    text-decoration: none;
}

.resumeTitle {
    font-family: 'Odibee Sans', cursive;
    font-size: 28px;
}

.resumeObjectiveTitle {
    font-family: 'Odibee Sans', cursive;
    font-size: 22px;
}

.resumeObjectiveParagraph {
    font-family: 'Montserrat', sans-serif;
    margin: 10px 0 0 0;
}

.resumeSkillsContainer {
    font-family: 'Roboto Mono', monospace;
    margin: 10px 0 0 0;
    display: grid;
    grid-template-columns: fit-content fit-content;
    grid-template-rows: fit-content;
    grid-template-areas: "resumeSkills resumeSkillsLength";
}

.resumeSkillsTitle {
    font-family: 'Odibee Sans', cursive;
    font-size: 22px;
}

.resumeSkills {
    grid-area: resumeSkills;
}

.resumeSkillLength {
    grid-area: resumeSkillsLength;
}

.resumeJobHistoryContainer {
    font-family: 'Roboto Mono', monospace;
}

.resumeJobItem {
    width: 100%;
    margin: 10px 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, fit-content);
    grid-template-rows: repeat(2, fit-content);
    grid-template-areas: "resumeJobLocation resumeJobLength"
        "resumeJobDuties resumeJobDuties";
}

.resumeJobTitle {
    font-family: 'Odibee Sans', cursive;
    font-size: 22px;
}

.resumeJobLocation {
    grid-area: resumeJobLocation;
    font-weight: bold;
}

.resumeJobLength {
    grid-area: resumeJobLength;
    font-weight: bold;
    font-style: oblique;
}

.resumeJobDuties {
    grid-area: resumeJobDuties;
    margin: 10px 0 0 0;
}

.ebayCategoryContainer {
    width: 100%;

}

.ebayCategories {
    width: 100%;
}

.ebayCategories li {
    display: inline-block;
}

.ebayListings {
    width: 100%;
    /*margin: 0 auto;
    background-color: #393e46;
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0,0,0,0);
    box-shadow: 0px 10px 13px -7px var(--shadow), 0px 0px 15px 0px rgba(0,0,0,0); */
}

.ebayListings a {
    color: var(--text-primary);
    text-decoration: none;
}

#listingFrame {
    width: 100%;
    border-radius: 5px;
}

@media only screen and (Max-width: 1280px) {
    .portfolioItemImage img {
        max-height: 455px;
    }
}

@media only screen and (Max-width: 900px) {
    .portfolioItemImage img {
        max-height: 448px;
    }
}

@media only screen and (max-width: 1200px) {
    .site {
        grid-template-areas: "head head head head"
            "nav nav nav nav"
            "main main main main"
            "footer footer footer footer";
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto auto auto;
        padding: 10px 20px;
    }
}

@media only screen and (max-width: 840px) {
    .portfolioItemImage img {
        max-height: none;
    }

    .site {
        grid-template-areas: "head"
            "nav"
            "main"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        padding: 10px 20px;
    }

    .contactMethodList li {
        display: block;
    }

    .portfolioListContent {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "portfolioItem"
            "portfolioItem"
            "portfolioItem";
        align-content: flex-start;
    }

    .mediaListContent {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "mediaItem"
            "mediaItem"
            "mediaItem";
        align-content: flex-start;
    }

    .mediaListItem,
    .portfolioListItem {
        margin-bottom: 10px;
    }

    .mediaListItem:last-child,
    .portfolioListItem:last-child {
        margin-bottom: 0;
    }

    .portfolioListItem,
    .mediaListItem {
        margin-right: 0;
    }

    .mobileMenuContainer {
        display: inline-block;
        cursor: pointer;

    }

    .bar1,
    .bar2,
    .bar3 {
        width: 35px;
        height: 5px;
        background-color: var(--accent);
        margin: 6px 0;
        transition: 0.4s;
    }

    .change {
        border-radius: 5px 5px 0 0;
        margin-bottom: 0;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
    }

    .site>nav {
        display: none;
    }

    #headSpacer {
        display: none;
    }
}

@media print {
    @page {
        margin: 25px;
    }
}

#theme-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px;
    background-color: var(--bg-primary);
    border-radius: 5px;
    box-shadow: 0 0 10px var(--shadow-soft);
}

#theme-switcher select {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid var(--accent);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Roboto Mono', monospace;
    width: auto;
    margin: 0;
}