/********************* START GLOBALS ****************************/
@font-face {
    font-family: 'CedarvilleCursive'; /* Choose a unique name for your font */
    src: url('/fonts/CedarvilleCursive-Regular.ttf') format('truetype'); /* Specify the path to your TTF file and its format */
    font-weight: normal; /* Optional: Define font weight if applicable */
    font-style: normal; /* Optional: Define font style if applicable */
}

@font-face {
    font-family: 'PerfectDOS_VGA'; /* Choose a name for your font */
    src: url('/fonts/PERFECT_DOS_VGA_437_WIN.TTF') format('truetype'); /* Path to your font file */
    font-weight: normal; /* Define font weight if applicable */
    font-style: normal;  /* Define font style if applicable */
    font-display: swap;  /* Optimize font loading */
}

html[data-theme="dark"] {
    --primary1: #000000;
    --primary2: #010101;
    --primary3: #202020;
    --primary4: #353535;
    --primary5: #454545;
    --primary6: #555555;
    --primary7: #656565;
    --primary8: #757575;
    --secondary1: #8a8a8a;
    --secondary2: #9a9a9a;
    --secondary3: #aaaaaa;
    --secondary4: #bababa;
    --secondary5: #cacaca;
    --secondary6: #bfbfbf;
    --secondary7: #efefef;
    --secondary8: #ffffff;
    --highlight1: #ffff00;
    --highlight2: #ffff55;
    --highlight3: #ffff82;
    --highlight4: #ffffba;
}

html[data-theme="light"] {
    /* Background for main */
    /* --primary8: #8a8a8a; */
    --primary8: #8a8a8a;
    --primary7: #9a9a9a;
    --primary6: #aaaaaa;
    --primary5: #bababa;
    /* Header background */
    /* --primary4: #cacaca; */
    --primary4: #bfbfbf;
    /* Banner background */
    /* --primary3: #bfbfbf; */
    --primary3: #cacaca;
    --primary2: #efefef;
    --primary1: #ffffff;
    --secondary8: #000000;
    --secondary7: #010101;
    --secondary6: #202020;
    --secondary5: #353535;
    --secondary4: #454545;
    --secondary3: #555555;
    --secondary2: #757575;
    --secondary1: #757575;
    --highlight1: #ff0000;
    --highlight2: #aa0000;
    --highlight3: #71001c;
    --highlight4: #410010;
}

html[data-theme="VGAGreen"] {
    --primary1: #000000;
    --primary2: #010101;
    /* Banner background */
    --primary3: #202020;
    /* Header background */
    --primary4: #353535;
    --primary5: #454545;
    --primary6: #555555;
    /* Border for hero section */
    --primary7: #390071;
    /* Background color */
    --primary8: #757575;
    /* Border color for nav */
    --secondary1: #8200ff;
    --secondary2: #9a9a9a;
    /* Main content borders */
    --secondary3: #200041;
    /* Header Text */
    --secondary4: #00aa00;
    /* Text color */
    --secondary5: #82ff82;
    /* Theme box border */
    --secondary6: #8200ff;
    /* Link color */
    --secondary7: #55ff55;
    --secondary8: #00ff00;
    --highlight2: #8200ff;
    --highlight1: #be00ff;
    --highlight3: #be82ff;
    --highlight4: #efbaff;
}

html[data-theme="bubblegumGirlyPop"] {
    /* Nav and Book Button Background */
    --primary1: #55ffff;
    /* Book button text */
    --primary2: #ffff00;
    /* Banner background */
    --primary3: #00beff;
    /* --primary3: #82dfff; */
    /* Header background */
    --primary4: #005571;
    /* Content Box Background */
    --primary5: #005571;
    --primary6: #555555;
    /* Border for hero section */
    --primary7: #390071;
    /* Background color */
    --primary8: #82dfff;
    /* Border color for nav */
    --secondary1: #8200ff;
    /* Link hover color */
    --secondary2: #be82ff;
    /* Main content borders */
    --secondary3: #200041;
    /* Header Text */
    --secondary4: #efbaff;
    /* Text color */
    --secondary5: #df82ff;
    /* Theme box border */
    --secondary6: #8200ff;
    /* Link color */
    --secondary7: #ff82ff;
    /* Title and book button color */
    --secondary8: #ff00ff;
    --highlight2: #8200ff;
    --highlight1: #8200ff;
    --highlight3: #be82ff;
    --highlight4: #efbaff;
}

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

html,
body {
    margin:0;
    padding:0;
}

body {
    background-color: var(--primary8); 
    color: var(--secondary5);
    font: 18px 'PerfectDOS_VGA', serif;
} 

.boxBorder {
    box-shadow:   -5px 0 0 0 var(--secondary6),
    5px 0 0 0 var(--secondary6),
    0 -5px 0 0 var(--secondary6),
    0 5px 0 0 var(--secondary6);
}

.flexBoxCenter {
    display:flex;
    align-items: center;
    justify-content: center;
}

/*********************** END GLOBALS ****************************/

/*********************** START LINKS ****************************/
a:link {
    color: var(--secondary7);
    text-decoration: none;
}

a:active {
    color: #cacaca;
}

a:visited {
    color: var(--secondary7);
}   

a:hover {
    color: var(--secondary2);
}

.highlightLink{
    color: var(--highlight1) !important;
}

.highlightLink:hover{
    color: var(--highlight4) !important;
}

/* https://www.svgrepo.com/collection/social-media-fill-icons/ */
/* svg {
    height: 32px;
    width: 32px;
    fill: #efefef;
}

svg:hover {
    fill: #cacaca;
} */
/************************** END LINKS ****************************/

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: var(--highlight1);
  color: var(--primary1);
  cursor: pointer;
  padding: 1rem;
  border-radius: 50%;
}

#myBtn:hover {
  background-color: #cacaca;
}

.SVGResume {
    width:5rem;
    height:5rem;
}

.resume {
    margin:1rem;
    padding:1rem;
    background-color: #353535;
    border: 1px solid #cacaca;
    border-radius: 15px;
}

/* flex:1; */
.resumeBox {
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1rem;
    padding: 0.5rem;
    background-color: var(--primary5);
    /* border: 1px solid var(--secondary3);
    border-radius: 15px; */
      box-shadow:   -5px 0 0 0 var(--secondary3),
                 5px 0 0 0 var(--secondary3),
                 0 -5px 0 0 var(--secondary3),
                 0 5px 0 0 var(--secondary3);
}

.comments {
    width: 100%;
}

.contentBox {
    margin: 1rem;
    padding: 0.5rem;
    background-color: var(--primary5);
    /* border: 1px solid var(--secondary3);
    border-radius: 15px; */
      box-shadow:   -5px 0 0 0 var(--secondary3),
                 5px 0 0 0 var(--secondary3),
                 0 -5px 0 0 var(--secondary3),
                 0 5px 0 0 var(--secondary3);
}

/* .formBox{
    display:flex;
    flex-direction: column;
    gap:0.5rem;
} */

.button {
    height:2.5rem;
    width:5rem;
    color: var(--secondary5);
    border: 1px solid var(--secondary3);
    background-color: var(--primary5);
    font: 18px 'PerfectDOS_VGA', serif;
}

.inputBox {
    outline: none; /* Removes the default focus outline */
    border-color: var(--secondary3);
    border-width: 0px 0px 1px 0px;
    background-color: var(--primary5);
}

.inputBox:focus {
    outline: none; /* Removes the default focus outline */
    border-color: var(--secondary3);
    border-width: 0px 0px 1px 0px;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;    
}

.header{
    display:none;
    justify-content: center;
    align-items: center;
    background-color: var(--primary3);
    height:2rem;
    padding-right:1rem;
    /* border-top: 5px solid #656565; */
    text-align: center;
}

.socialMedia {
    display:none;
    position:absolute;
    right:1rem;
}

nav {
    background-color: var(--primary1);
    border-top: 3px solid var(--secondary1);
    border-bottom: 3px solid var(--secondary1);
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    height:5rem;
}

.banner {
    padding:0.25rem;

    background-color: var(--primary3);
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    /* border-bottom: 5px solid var(--primary5); */
}

.sydneyLeigh {
    font-size: 0.3em;
    color: var(--secondary8);
}

.heroSection{
    padding:1rem;
    background-color: var(--primary3);
    display:flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-size:2em;
    border-bottom: 3px solid var(--primary7);
}

.heroSection > h1{
    color:var(--secondary8);
    /* font-size: 4em; */
    text-align: center;
}

.themePicker {
    font-size:0.5em;
    display:flex;
    justify-content: center;
    align-items: stretch;
    flex:1;
}

.themeButton{
    margin:0.5rem;
    height:2rem;
    width:2rem;
    /* border-radius: 50%;
    border: 1px solid var(--secondary1); */
    box-shadow:   -5px 0 0 0 var(--secondary1),
    5px 0 0 0 var(--secondary1),
    0 -5px 0 0 var(--secondary1),
    0 5px 0 0 var(--secondary1);
}

.themeBox {
    margin:0.5rem;
    padding:0.5rem;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid var(--secondary6); */
    box-shadow:   -5px 0 0 0 var(--secondary6),
        5px 0 0 0 var(--secondary6),
        0 -5px 0 0 var(--secondary6),
        0 5px 0 0 var(--secondary6);
}

.darkMode{
    background: linear-gradient(to right, #000000 50%, #353535 50%);
}

.lightMode{
    background: linear-gradient(to right, #cacaca 50%, #ffffff 50%);
}

.vgaGreen {
    background: linear-gradient(to right, #004100 50%, #00ff00 50%);
}

.bubblegumGirlyPop {
    background: linear-gradient(to right, #00beff 50%, #ff82ff 50%);
}

.gridBoxIcons {
    display:grid;
    /* border: 1px solid red; */
    margin:0px;
    width:100%;
    height:100%;
}

.gridBox{
    /* border: 1px solid yellow; */
    display:flex;
    justify-content: center;
    align-items: center;
}

.bannerBox{
    /* margin-left: 1rem;
    margin-right: 1rem; */
    flex-grow: 1;
    /* border: 1px solid green; */
}

.bannerBox1{
    display:flex;
    justify-content: center;
    align-items: center;

    flex-grow:25;

    /* border:1px solid green; */
}

.bannerBox2{
    transform: scale(0.85);
}

.bannerBox3{
    display:flex;
    flex-direction: column;

    flex-grow: 25;

    /* border: 1px solid red; */
    justify-content: center;
    align-items:center;
}

.portraitCutout {
    /* border: 3px solid var(--secondary1); */
    overflow: hidden;
    /* box-shadow: #656565 0 0 0 3px; */
    /* border-radius:50%; */
    box-shadow:   -5px 0 0 0 var(--secondary1),
    5px 0 0 0 var(--secondary1),
    0 -5px 0 0 var(--secondary1),
    0 5px 0 0 var(--secondary1);
}

.portrait {
    background-image: url("/images/Sydney\ Business\ 2025.jpg");
    background-size: contain;
    /* filter:grayscale(35%); */
}

.callOrBook {
    border: 1px solid red;
}

.bookButtonZ-index {
    position:absolute;
    transform: scale(0.85);
    background-color: var(--primary1);
    color: var(--secondary8);
    padding:1rem;
    z-index: 10;
    /* border: 3px solid var(--secondary1);
    border-radius:15px; */
    text-align: center;
    box-shadow:   -5px 0 0 0 var(--secondary1),
        5px 0 0 0 var(--secondary1),
        0 -5px 0 0 var(--secondary1),
        0 5px 0 0 var(--secondary1);
}

.bookButton {
    padding: 15px;
    color: var(--primary1) !important;
    background-color: var(--highlight1) !important;
    border-radius: 20px 20px 20px 20px;
    font: bold 30px Georgia, serif;
}

.bookButton:active {
    background-color: var(--highlight4) !important;
}

.main {
    /* display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    display:block;
    /* width:100vw; */
    margin:0;
    padding:0;
}

.article {
    /* margin-top:1rem; */
    padding:0rem;
    display:flex;
    flex-direction: column;
    /* border:5px solid #656565; */
}

.article > h1 {    
    padding:0rem 1rem 0rem 1rem;
    color: var(--secondary4);
    background-color: var(--primary4);
}

.article > p {
    padding:1rem;
}

.contact{
    display:flex;
    flex-direction: column;
}

.contactItem {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    gap: 1.5rem;
}

.contactSVG {
    height:2.5rem;
    width:2.5rem;
    fill: var(--secondary7);
}

.contactSVG:hover{
    fill: var(--secondary2);
}

.resumes {
    display:flex;
    justify-content: center;
    align-items: center;
}

.footer {
    display:flex;
    justify-content: center;
    align-items: center;
    height:5rem;            
    
    background-color: var(--primary3);
    border-top: 5px solid var(--primary5);
}


/* For phones in portrait mode */
/* 0x0 pixels to 600x800 */
@media only screen and (max-width:600px) {
    nav {
        font-size: 0.75em;
        font-style: bold;
    }


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

    .sydneyLeigh {
        font-size:0.25em;
    }

    .heroSection {
        font-size:1em;
    }

    .bookButtonZ-index {
        transform: scale(0.85);
    }

    .bookButtonBoxPC{
        display: none;
    }
    
    .banner{
        flex-direction: column;
    }

    .bannerBox1{
        order:3;
        display: none;
    }

    .bannerBox2{
        order:1;
    }

    .bannerBox3{
        order:2;
    }

    .bannerBox {
        height: 15rem;
        width: 15rem;
    }
    
    .portrait {
        height:15rem;
        width:15rem;
    }

    .contactItem{
        font-size: 0.75em;
    }

    .footer{
        padding:1rem;
        font-size: 1em;
    }
} 

/* Specifically for phones & tablets in lanscape mode */

@media only screen and (min-width:600px) and (max-height:600px) {
    nav {
        font-size: 1.5em;
        font-style: bold;
    }

    .heroSection {
        font-size: 1.5em;
    }

    .bookButtonZ-index {
        transform: scale(0.85);
    }

    .gridBoxIcons{
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(5, 1fr);
    }

    .bookButtonBoxPhone{
        display: none;
    }

    .bannerBox {
        height: 14rem;
        width: 14rem;
    }

    .portrait {
        height:14rem;
        width:14rem;
    }

    .contactItem{
        font-size: 2em;
    }

    .footer{
        font-size: 1.5em;
    }
}

/* 1024x768 */
/* 1920x1080 */

/* For computer and tablet screens */

@media only screen and (min-width:600px) and (min-height:600px){
/* @media only screen and (min-width:769px){ */
    nav {
        font-size: 2.5em;
        font-style: bold;
    }

    .gridBoxIcons{
        grid-template-rows: repeat(5, 1fr);
        grid-template-columns: repeat(10, 1fr);
    }

    .bookButtonBoxPhone{
        display: none;
    }

    .portrait {
        height:15rem;
        width:15rem;
    }

    .bannerBox {
        height: 15rem;
        width: 15rem;
    }

    .contactItem{
        font-size: 2em;
    }

    .footer{
        font-size: 1.5em;
    }
}