@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

:root {
    --color-white: #F5F5F5;
    --color-white-true: #FFFFFF;
    --color-teal-light: #c7e3ef;
    --color-teal: #23b5f0;
    --color-teal-medium: #11a0d9;
    --color-teal-dark: #2a86ab;
    --old-color-teal-light: #DAFFFB;
    --old-color-teal-dark: #229799;
    --old-color-teal: #48CFCB;
    --color-black: #000000;
    --color-shadow-black: rgba(20, 20, 20, 0.3);
    --color-shadow-white: rgba(250, 250, 250, .3);
    --color-white-semitransparent: hwb(0 100% 0% / 0.285) 50%;
    --color-black-semitransparent: hwb(0 0% 100% / 0.285) 50%;
    --color-shadow-foreground: var(--color-shadow-black);
    --color-background-semitransparent: var(--color-white-semitransparent);

    --color-background: var(--color-white);
    --color-background-accent: var(--color-white-true);
    --color-foreground: var(--color-black);
    --color-accent: var(--color-teal-dark);
    --color-accent2: var(--color-teal);

    --color-portrait-jacket-darkgray1: #4e535b;
    --color-portrait-jacket-darkergray: #3e4349;
    --color-portrait-jacket-lightergray: #6c757a;
    --color-portrait-jacket-darkestgray: #1c171c;
    ;

}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 800,
        'GRAD' 0,
        'opsz' 48
}

body {
    background-color: var(--color-background);
    color: var(--color-foreground);
}

h1 {
    font-size: calc(25px + 3vw);
    font-weight: 600;
    background-color: transparent;
}

.transparent_bg {
    background-color: transparent !important;
}

.footer-link {
    color: var(--color-foreground) !important;
    font-weight: 400;
    font-size: 20px;
}

.footer-link:hover {
    color: var(--color-background) !important;
}

.footer-item {
    background-color: var(--color-foreground);
    color: var(--color-background);
}



.social_media_icon {
    padding-left: 10px;
    padding-right: 10px;
}

.social_media_icon {
    color: white;
}

.navbar_toggle_icon_color {
    background: white;
}

.button-main {
    background-color: var(--color-accent2);
    color: var(--color-background);
    box-shadow: var(--color-shadow-foreground) 0 2px 4px, var(--color-shadow-foreground) 0 3px 8px -2px, var(--color-shadow-foreground) 0 -2px 0 inset;
    transition: box-shadow .15s, transform .15s;
}

.button-main:focus {
    background-color: var(--color-accent2);
    color: var(--color-background);
    box-shadow: var(--color-shadow-foreground) 0 0 0 1.5px inset, var(--color-shadow-foreground) 0 2px 4px, var(--color-shadow-foreground) 0 7px 13px -3px, var(--color-shadow-foreground) 0 -3px 0 inset;
}

.button-main:hover {
    background-color: var(--color-accent2);
    color: var(--color-background);
    box-shadow: var(--color-shadow-foreground) 0 4px 8px, var(--color-shadow-foreground) 0 3px 8px -3px, var(--color-shadow-foreground) 0 -3px 0 inset;
    transform: translateY(-2px);
}

.button-main:active {
    background-color: var(--color-accent2) !important;
    color: var(--color-background);
    box-shadow: var(--color-shadow-foreground) 0 4px 8px inset;
    transform: translateY(2px);
}

.button-list {
    background-color: var(--color-accent2);
    color: var(--color-background-accent);
    font-weight: bold;
    border-color: var(--color-foreground-accent) !important;
}

.button-list:focus {
    background-color: var(--color-accent);
    color: var(--color-background-accent);
    border-color: var(--color-foreground-accent) !important;

}

.button-list:hover {
    background-color: var(--color-accent);
    color: var(--color-background-accent);
    border-color: var(--color-foreground-accent) !important;

}

.button-list:active {
    background-color: var(--color-foreground-accent) !important;
    color: var(--color-accent2) !important;
    border-color: var(--color-foreground-accent) !important;
}


header,
footer{
    overflow: hidden;
}

iframe{
    overflow:hidden;
}
.vertically-centered {
    display: flex;
    align-items: center;
}
.form-switch .form-check-input {
    height: 24px;
    width: 48px;
    background-color: var(--color-white);
    border-color: var(--color-teal);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(35,181,240,1.0)'/></svg>");
}

.form-switch .form-check-input:focus {
    background-color: var(--color-white);
    border-color: var(--color-teal);
    box-shadow: 1px 1px 1px 1px var(--color-black-shadow);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(35,181,240,1.0)'/></svg>");
}

.form-switch .form-check-input:checked {
    background-color: var(--color-teal);
    border-color: var(--color-teal);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/></svg>");
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 50px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    color: var(--color-accent2);
}

.dark-mode {
    --color-background: var(--color-portrait-jacket-darkestgray);
    --color-foreground: var(--color-white);
    --color-accent: var(--color-teal);
    --color-accent2: var(--color-teal-dark);
    --color-background-accent: var(--color-black);
    --color-background-semitransparent: var(--color-black-semitransparent);
    --color-shadow-foreground: var(--color-shadow-white);
}

.portrait {
    width: auto;
    height: auto;
    max-width: 80vw;
    max-height: 50vh;
    border-color: var(--color-accent2) !important;
}

.portrait-screenshot {
    width: auto;
    height: auto;
    max-width: 40%;
    max-height: 60vh;
    border-color: var(--color-foreground) !important;
}
.portrait-ipad-screenshot {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 60vh;
    border-color: var(--color-foreground) !important;
}

.heading-screenshot {
    border-color: var(--color-foreground) !important;
}

.certificationBadge {
    width: auto;
    height: auto;
    max-width: 35vw;
    max-height: 25vh;
    min-width: 50px;
    min-height: 50px;
    margin: 1vw;
    padding: 1vw;
    background-color: var(--color-white-true) !important;
    border-color: var(--color-accent2) !important;
}

.h1Background {
    background: linear-gradient(40deg,
            #bbb 10%,
            var(--color-white) 35%,
            #ccc 50%,
            var(--color-white-true) 75%,
            #bbb 95%);
    border-color: var(--color-accent2) !important;

}

.h1BackgroundDark {
    background: linear-gradient(40deg,
            var(--color-portrait-jacket-darkestgray) 10%,
            var(--color-portrait-jacket-darkgray1) 35%,
            var(--color-portrait-jacket-darkergray) 50%,
            var(--color-portrait-jacket-lightergray) 75%,
            var(--color-portrait-jacket-darkestgray) 95%);
    border-color: var(--color-accent2) !important;

}

#headingBar {
    padding: 3% 5% 3% 5%;
}

.h2Background {
    background-color: var(--color-accent2);
    color: var(--color-white-true);
    font-weight: bold;
}

.h3Background {
    color: var(--color-accent2);
    font-weight: bold;
}

.pBackground {
    background-color: var(--color-background) !important;
    color: var(--color-foreground);
    max-width: 95vw;
}

.sectionBackground {
    border-color: var(--color-accent2) !important;
    background-color: var(--color-background-accent);
    color: var(--color-foreground)
}

.accent-text {
    color: var(--color-accent2);
}

.subtitle {
    color: var(--color-foreground);
    font-size: calc(18px + 1vw);
}

.darkgray-white {
    color: var(--color-background);
    background-color: var(--color-portrait-jacket-lightergray);
    padding-left: 5%;
    padding-right: 5%;
}



.nav-item:focus {
    background-color: var(--color-accent2) !important;
}

.navbar-nav>li {
    padding-left: 2vw;
    padding-right: 1vw;
}

#jamie-nav {
    background-color: var(--color-accent2) !important;
}

#jamie-nav a {
    color: var(--color-white-true) !important;
    padding-left: 10px;
    padding-right: 10px;
}

#jamie-nav a:hover {
    background-color: var(--color-accent) !important;
}

#jamie-nav a.active {
    background-color: var(--color-background) !important;
    color: var(--color-accent) !important;
}

#jamie-nav>li>.dropdown-menu {
    background-color: var(--color-accent) !important;
}

#jamie-nav>li>.dropdown-menu a {
    color: var(--color-accent2) !important;
}

#jamie-nav>li>.dropdown-menu a:hover {
    color: var(--color-accent2) !important;
    background-color: var(--color-background) !important;
}

#jamie-nav>li>.dropdown-menu a.active {
    color: var(--color-background) !important;
    background-color: var(--color-accent2) !important;
}

#qual-drop-menu {
    background-color: var(--color-accent2);
}

#skills-drop-menu {
    background-color: var(--color-accent2);
}

#darkModeLabel {
    color: var(--color-white-true);
    padding: 2px
}

.expandable-details {
    background-color: var(--color-background-accent) !important;
    color: var(--color-foreground);
    border-color: var(--color-accent2) !important;
}

#prog-lang-tab-list>button {
    border-color: var(--color-accent2) !important;
    margin: 1%;
}

#prog-lang-tab-list>button.active {
    background-color: var(--color-background-accent) !important;
    color: var(--color-accent2) !important;
    border-color: var(--color-accent2) !important;

}

#skills-software-uml-image {
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 50vh;
    min-width:180px;
    margin: 2%;
    border: 0px;
}

#skills-cyber-network-image {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 60%;
    margin: 2%;
    border-color: var(--color-accent2);
}

.social-share-icon {
    width: auto;
    height: auto;
    max-width: 6vw;
    max-height: 6vh;
    min-width: 30px !important;
    min-height: 30px !important;
}

#footer-icon {
    width: auto;
    height: auto;
    max-width: 30vh;
    max-height: 30vw;
    min-width: 50px !important;
    min-height: 50px !important;
}

.footer-social-links {
    background-color: var(--color-portrait-jacket-lightergray);
    color: var(--color-white);
    border-color: var(--color-background);
}

.footer-social-links:hover {
    background-color: var(--color-portrait-jacket-darkgray1);
}

.footer-social-links:active {
    background-color: var(--color-portrait-jacket-darkestgray) !important;
}

.footer-contact-col {
    background-color: var(--color-portrait-jacket-lightergray);
    border-color: var(--color-foreground);
}

.footer-subcols {
    background-color: var(--color-accent2);
    border-color: var(--color-foreground);
}

#projects-tabs-list>button {
    border-color: var(--color-accent2) !important;
    margin: 1%;
}

#projects-tabs-list>button.active {
    background-color: var(--color-background-accent) !important;
    color: var(--color-accent2) !important;
    border-color: var(--color-accent2) !important;

}

.max-height {
    height: 100%;
}

.white-text {
    color: var(--color-white-true) !important;
}

.dark-mode-image-brightness {
    filter: brightness(90%);
}
#footer-icon-link:hover{
    background-color: var(--color-accent);
}

#footer-icon-link:focus{
    border-color: var(--color-white);
}
#footer-icon-link:active{
    background-color: var(--color-portrait-jacket-lightergray);
}