@import url("https://fonts.googleapis.com/css?family=Convergence");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");

:root {
    --center: -moz-center;
    --center: -webkit-center;
    --center: center;

    --transition-default: all 0.3s ease;

    /* ------------------------------ */

    --hamburger-bar-width: 60px;
    --hamburger-bar-height: 8px;
    --hamburger-gap: 4px;
    --hamburger-background: #333;
    --hamburger-foreground: #fff;
    --hamburger-margin: 10px;
    --hamburger-animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(
        var(--hamburger-bar-height) * 3 + var(--hamburger-gap) * 2
    );

    /* ------------------------------ */

    --body-background-color: #39363c;

    --header-color: #fffee0;
    --header-background-color: #27c9ba;
    --header-padding: 1em 4vw;
    --header-padding-bottom: 5vw;

    --header-p-color: #dad9cb;

    --nav-color: black;
    --nav-background-color: #2eb0da;
    /* --nav-width: 13%; */
    --nav-width: 100%;
    --nav-height: 100%;

    --nav-item-color: inherit;

    --nav-li-a-selected-background-color: #278daf;
    --nav-li-a-selected-border-top: 10px solid var(--nav-background-color);
    --nav-li-a-selected-transform: translateY(-10px);

    --dropdown-content-min-width: 160px;

    /* --dropdown-content-a-line-height: 2em; */

    --main-color: #e0ffe1;
    --main-background-color: #39363c;

    --main-h2-color: #e0ffe1;
    --main-h2-padding: 0.25em 0.1em;
    --main-h2-border-bottom-width: 3px;
    --main-h2-border-bottom-style: solid;
    --main-h2-border-image: linear-gradient(
            to right,
            #e0ffe1ff,
            #00000000,
            #00000000
        )
        1;
    --main-h2-margin: 0.1em 0 1.4em 0;

    --main-p-text-indent: 2em;

    --main-a-visited-hover-focus-color: #11aaff;

    /* --main-a-visited-hover-focus-text-decoration: underline; */

    /* --main-a-hover-focus-after-transform: scale(1) translate(-50%, 1em); */

    --main-hr-border-width: 3px;
    --main-hr-border-style: solid;
    --main-hr-border-color: #e0ffe1;
    --main-hr-border-image: linear-gradient(
            to right,
            #00000000,
            #e0ffe1ff,
            #00000000
        )
        1;
    --main-hr-margin: 3em 0;

    --main-hr-big-border-width: 5px;

    --to-top-bottom: 20px;
    --to-top-right: 20px;
    --to-top-background-color: #007bff;
    --to-top-color: #fff;
    --to-top-border: none;
    --to-top-border-radius: 5px;
    --to-top-padding: 10px;
    --to-top-transform-origin: bottom right;
    --to-top-transition: all 0.3s ease;
    --to-top-cursor: pointer;

    --to-top-hover-background-color: #0056b3;

    --page-width: 100%;
    --page-margin: 0 0;

    --card-heading-border-bottom-width: 5px;
    --card-heading-border-bottom-style: solid;
    --card-heading-border-image: linear-gradient(
            to right,
            #00000000,
            #e0ffe1ff,
            #00000000
        )
        1;
    --card-heading-width: 100%;
    --card-heading-padding: 10px 0px;
    /* --card-heading-margin: 0px; */
    --card-heading-margin-right: 0px;
    --card-heading-margin-bottom: 35px;
    --card-heading-margin-left: 0px;
    --card-heading-text-align: center;

    /* --cards-display: block; */
    --cards-width: 100%;
    --cards-align-content: center;

    --card-background-color: #242127;
    --card-display: block;
    /* --card-position: relative; */
    /* --card-float: left; */
    --card-padding: 15px;
    --card-margin: 25px auto;
    --card-width: 45%;
    --card-box-shadow: 5px 5px 10px #000;
    --card-transition: all 0.3s ease-out;
    --card-cursor: pointer;

    --article-card-background-color: #4c4950;
    --article-card-width: 75%;

    --card-hover-transform: translate(-5px, -5px);
    --card-hover-box-shadow: 10px 10px 10px #000;

    --card-name-margin-top: 5px;

    --card-name-hover-color: #49ab9c;
    --card-name-hover-text-shadow: 1.25px 1.25px 3px #000;

    --detail-font-size: 10pt;
    --detail-font-style: italic;
    --detail-text-indent: none;

    --summary-text-align: justify;
    --summary-text-indent: 1em;
    --summary-padding: 0px 15px;

    --portfolio-div-h2-font-size: 1.35em;
    --portfolio-div-h2-border-bottom-width: 1px;

    --contact-details-a-color: #00ffee;

    --contact-details-a-visited-color: #00ffee;

    --labelled-font-weight: 600;

    /* --a-labelled-display: inline-block; */

    --phone-before-content: "Phone: ";
    --phone-before-font-weight: var(--labelled-font-weight);

    --email-before-content: "Email: ";
    --email-before-font-weight: var(--labelled-font-weight);

    --github-before-content: "GitHub: ";
    --github-before-font-weight: var(--labelled-font-weight);

    --linkedin-before-content: "LinkedIn: ";
    --linkedin-before-font-weight: var(--labelled-font-weight);

    --invisible-display: none;

    --header-height: 250px;
}

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

body {
    font-family: Arial, Convergence, Calibri, "Open Sans", "Segoe UI",
        "Fira Sans", sans-serif;
    background-color: var(--body-background-color);
    margin: 0;
}

#header {
    color: var(--header-color);
    background-color: var(--header-background-color);
    padding: var(--header-padding);
    padding-bottom: var(--header-padding-bottom);
    width: 100%;
    height: var(--header-height);
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

#header h1 {
    font-size: 48pt;
    margin-bottom: 0;
}

#header p {
    color: var(--header-p-color);
    font-size: 20pt;
    font-weight: 600;
    padding: 0 7vw;
}

/* Hamburger Menu Credits:
  "Web Dev Simplified" on YouTube - https://www.youtube.com/watch?v=dAIVbLrAb_U
*/

.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.41421356237);

    width: max-content;
    position: absolute;
    top: calc(var(--hamburger-margin) + var(--header-height));
    left: var(--hamburger-margin);
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    z-index: 2;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    content: "";
    width: var(--hamburger-bar-width);
    height: var(--hamburger-bar-height);
    background-color: var(--hamburger-foreground);
    border-radius: 50px;
    transform-origin: left center;
    transition: opacity var(--hamburger-animation-timing),
        width var(--hamburger-animation-timing),
        rotate var(--hamburger-animation-timing),
        translate var(--hamburger-animation-timing),
        background-color var(--hamburger-animation-timing);
}

.hamburger-menu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.hamburger-menu:has(input:checked) {
    --hamburger-background: white;
    --hamburger-foreground: #222;
}

.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
    border: 1px solid var(--hamburger-background);
    box-shadow: 0 0 0 1px var(--hamburger-foreground);
}

.hamburger-menu:has(input:checked)::before {
    width: var(--x-width);
    rotate: 45deg;
    translate: 0 calc(var(--hamburger-bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
    width: var(--x-width);
    rotate: -45deg;
    translate: 0 calc(var(--hamburger-bar-height) / 2);
}

.hamburger-menu input:checked {
    opacity: 0;
    width: 0;
}

#nav {
    list-style-type: none;
    color: var(--nav-color);
    background-color: var(--nav-background-color);
    /* font-size: 2vw; */
    /* font-size: 1.35em; */
    font-size: 24pt;
    text-align: left;
    width: var(--nav-width);
    height: var(--nav-height);
    min-width: 250px;
    position: absolute;
    top: var(--header-height);
    padding: 0;
    padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
    margin: 0;
    overflow: auto;
    translate: -100%;
    transition: translate var(--hamburger-animation-timing) 0s;
    -webkit-user-select: none;
    user-select: none;
}

.hamburger-menu:has(input:checked) + #nav {
    translate: 0;
}

/* Dropdown Menu Credits:
  W3Schools "CSS Dropdowns" tutorial - https://www.w3schools.com/css/css_dropdowns.asp
*/

#nav a,
.dropdown-button,
.dropdown-button input,
.dropdown-button .portfolio-button {
    color: var(--nav-item-color);
    background-color: var(--nav-background-color);
    text-decoration: none;
    /* vertical-align: middle; */
    /* line-height: 1.4em; */
    width: 100%;
    /* height: 2em; */
    padding: 15px 15px;
    margin: 0;
    border-width: 0;
    display: block;
    transition: all 0.3s ease;
}

#nav a.here,
#nav a:hover,
.dropdown-button:hover,
.dropdown-button:has(input:checked),
.dropdown-button .portfolio-button.here,
.dropdown-button .portfolio-button:hover,
.dropdown-button .portfolio-checkbox:checked,
.dropdown-button .portfolio-checkbox:checked + .portfolio-button {
    background-color: var(--nav-li-a-selected-background-color);
    cursor: pointer;
}

.dropdown-button i.fa-caret-top,
.dropdown-button i.fa-caret-right,
.dropdown-button i.fa-caret-bottom,
.dropdown-button i.fa-caret-left {
    padding: 5px;
    rotate: 90deg;
    transition: rotate 0.2s ease-in-out;
}

.dropdown-button:has(input:checked) i.fa-caret-top,
.dropdown-button:has(input:checked) i.fa-caret-right,
.dropdown-button:has(input:checked) i.fa-caret-bottom,
.dropdown-button:has(input:checked) i.fa-caret-left {
    rotate: -90deg;
}

.dropdown {
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    position: relative;
    display: inline-block;
    /* float: left; */
    /* transition: all 0.3s ease-in-out; */
}

.dropdown-button {
    padding: 0;
    margin: 0;
}

.dropdown-button input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.dropdown-content {
    /* background-color: var(--nav-li-background-color); */
    /* min-width: 120px; */
    width: 100%;
    position: relative;
    display: none;
    margin: 0;
    margin-left: 50px;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out 0.1s;
    z-index: 1;
}

.dropdown:has(.dropdown-button input:checked) .dropdown-content {
    display: block;
    transform: translateY(0);
}

#main {
    --main-margin-left: var(--nav-width);
    --main-side-padding: 200px;

    color: var(--main-color);
    background-color: var(--main-background-color);
    /* width: 100%; */
    /* padding-right: 10px; */
    /* padding-left: 10px; */
    margin-top: var(--header-height);
    margin-left: 0;
    align-items: end;
    transition: padding var(--hamburger-animation-timing),
        margin var(--hamburger-animation-timing);
}

#main div {
    margin: 2em 0;
}

.page {
    /* max-width: 900px; */
    /* position: absolute; */
    /* width: var(--page-width); */
    padding: 50px var(--main-side-padding);
    margin: 0 var(--main-side-padding);
    /* margin: 0 var(--main-side-padding); */
    /* margin-left: var(--main-side-padding); */
    /* margin-right: var(--main-side-padding); */
    transition: margin var(--hamburger-animation-timing),
        left var(--hamburger-animation-timing),
        right var(--hamburger-animation-timing);
}

.hamburger-menu:has(input:checked) + #nav + #main .page {
    /* margin-left: max(
        calc(var(--main-side-padding) + var(--main-margin-left)),
        var(--main-margin-left)
    ); */
}

#main h2 {
    color: var(--main-h2-color);
    padding: var(--main-h2-padding);
    border-bottom-width: var(--main-h2-border-bottom-width);
    border-bottom-style: var(--main-h2-border-bottom-style);
    border-image: var(--main-h2-border-image);
    margin: var(--main-h2-margin);
}

#main p {
    text-indent: var(--main-p-text-indent);
    text-align: justify;
}

#main a {
    --main-a-color: #17a2ff;

    color: var(--main-a-color);
    text-decoration: none;
}

#main a:visited {
    color: var(--main-a-color);
    text-decoration: var(--main-a-visited-hover-focus-text-decoration);
}

#main a:hover,
#main a:focus {
    --main-a-focus-color: #5bc6ff;

    color: var(--main-a-focus-color);
    text-decoration: var(--main-a-visited-hover-focus-text-decoration);
}

#main a:visited:hover,
#main a:visited:focus {
    color: var(--main-a-focus-color);
}

#main a::after {
    content: var(--main-a-after-content);
    background-color: var(--main-a-after-background-color);
    opacity: var(--main-a-after-opacity);
    position: var(--main-a-after-position);
    bottom: var(--main-a-after-bottom);
    left: var(--main-a-after-left);
    display: var(--main-a-after-display);
    width: var(--main-a-after-width);
    height: var(--main-a-after-height);
    transform: var(--main-a-after-transform);
    transform-origin: var(--main-a-after-transform-origin);
    transition: var(--main-a-after-transition);
}

#main a:hover::after,
#main a:focus::after {
    transform: var(--main-a-after-hover-transform);
}

#main hr {
    border-width: var(--main-hr-border-width);
    border-style: var(--main-hr-border-style);
    border-color: var(--main-hr-border-color);
    border-image: var(--main-hr-border-image);
    margin: var(--main-hr-margin);
}

#main hr[spacing] {
    border-width: var(--main-hr-border-width);
    border-style: var(--main-hr-border-style);
    border-color: var(--main-hr-border-color);
    border-image: var(--main-hr-border-image);
    margin: var(--spacing) 0;
}

#main br[spacing] {
    margin: var(--spacing) 0;
}

[spacing="1"]  { --spacing: 1em; }
[spacing="2"]  { --spacing: 2em; }
[spacing="3"]  { --spacing: 3em; }
[spacing="4"]  { --spacing: 4em; }
[spacing="5"]  { --spacing: 5em; }
[spacing="6"]  { --spacing: 6em; }
[spacing="7"]  { --spacing: 7em; }
[spacing="8"]  { --spacing: 8em; }
[spacing="9"]  { --spacing: 9em; }
[spacing="10"] { --spacing: 10em; }

#main hr.big {
    border-width: var(--main-hr-big-border-width);
}

#back-button {
    position: absolute;
    top: calc(var(--header-height) - 20px);
    transition: transform var(--hamburger-animation-timing),
        letter-spacing var(--hamburger-animation-timing);
    cursor: pointer;

    * {
        display: block;
        float: left;
        margin-left: 5px;
        margin-right: 5px;
        transition: inherit;
    }
}

#back-button:hover {
    i[class*="fa-"] {
        transform: translateX(-5px);
    }

    span {
        letter-spacing: 2px;
    }
}

#to-top {
    display: none;
    position: fixed;
    bottom: var(--to-top-bottom);
    right: var(--to-top-right);
    background-color: var(--to-top-background-color);
    color: var(--to-top-color);
    border: var(--to-top-border);
    border-radius: var(--to-top-border-radius);
    padding: var(--to-top-padding);
    transform-origin: var(--to-top-transform-origin);
    transition: var(--to-top-transition);
    cursor: var(--to-top-cursor);
}

#to-top:hover {
    background-color: var(--to-top-hover-background-color);
    width: var(--to-top-hover-width);
    height: var(--to-top-hover-height);
    transform: scale(2);
}

.card-heading {
    color: var(--card-heading-color);
    border-bottom-width: var(--card-heading-border-bottom-width);
    border-bottom-style: var(--card-heading-border-bottom-style);
    border-image: var(--card-heading-border-image);
    width: var(--card-heading-width);
    padding: var(--card-heading-padding);
    /* margin: var(--card-heading-margin); */
    margin-right: var(--card-heading-margin-right);
    margin-bottom: var(--card-heading-margin-bottom);
    margin-left: var(--card-heading-margin-left);
    text-align: var(--card-heading-text-align);
    transition: var(--card-heading-transition);
}

.cards {
    display: block;
    width: var(--cards-width);
    padding: var(--cards-padding);
    /* margin: var(--cards-margin) !important; */
    align-content: var(--cards-align-content);
}

.card {
    color: #e0ffe1;
    background-color: var(--card-background-color);
    display: var(--card-display);
    /* position: var(--card-position); */
    float: var(--card-float);
    width: var(--card-width);
    padding: var(--card-padding);
    margin: 25px auto !important;
    box-shadow: var(--card-box-shadow);
    transition: var(--card-transition);
    cursor: var(--card-cursor);
}

article.card {
    background-color: var(--article-card-background-color);
    width: var(--article-card-width);
}

.card:hover {
    transform: var(--card-hover-transform);
    box-shadow: var(--card-hover-box-shadow);
}

.card .name {
    margin-top: var(--card-name-margin-top);
}

.card .name:hover {
    color: var(--card-name-hover-color);
    text-decoration: var(--card-name-hover-text-decoration);
    text-shadow: var(--card-name-hover-text-shadow);
}

.detail {
    font-size: var(--detail-font-size);
    font-style: var(--detail-font-style);
    text-indent: var(--detail-text-indent);
}

.summary {
    text-align: var(--summary-text-align);
    text-indent: var(--summary-text-indent);
    padding: var(--summary-padding);
}

.content {
    img, picture,
    video,
    iframe {
        max-width: 100%;
    }
}

.portfolio div h2 {
    font-size: var(--portfolio-div-h2-font-size);
    border-bottom-width: var(--portfolio-div-h2-border-bottom-width);
}

.contact-details {
    font-size: 18pt;
    list-style-type: none;
}

.contact-details a {
    color: var(--contact-details-a-color);
}

.contact-details a:visited {
    color: var(--contact-details-a-visited-color);
}

a.labelled {
    display: var(--a-labelled-display);
}

.labelled#phone::before {
    content: var(--phone-before-content);
    color: var(--main-color);
    font-weight: var(--phone-before-font-weight);
}

.labelled#email::before {
    content: var(--email-before-content);
    color: var(--main-color);
    font-weight: var(--email-before-font-weight);
}

.labelled#github::before {
    content: var(--github-before-content);
    color: var(--main-color);
    font-weight: var(--github-before-font-weight);
}

.labelled#linkedin::before {
    content: var(--linkedin-before-content);
    color: var(--main-color);
    font-weight: var(--linkedin-before-font-weight);
}

.invisible {
    display: var(--invisible-display);
}

.italic {
    font-style: italic;
}

.centred {
    text-align: var(--center);
    display: block;
    margin-left: auto;
    margin-right: auto;
}