/* ------------------------------ */
/* Global / Shared Styles         */
/* ------------------------------ */
@font-face {
  font-family: 'Boxing';
  src: url('../fonts/Boxing-Regular.woff2') format('woff2'),
       url('../fonts/Boxing-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Boska';
  src: url('../fonts/Boska-Regular.woff2') format('woff2'),
       url('../fonts/Boska-Regular.woff') format('woff');
}

@font-face {
  font-family: 'Boska Light';
  src: url('../fonts/Boska-Light.woff2') format('woff2'),
       url('../fonts/Boska-Light.woff') format('woff');
}

html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background-color: #fffdf9;
    color: #000000;
    font-family: 'Boska Light', sans-serif;
    overflow-x: hidden;
    max-width: 100%;
}


h1, h2, h3 {
  font-family: 'Boska', sans-serif;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.2rem; margin-top: 60px; }
h3 { font-size: 1.5rem; margin-top: 30px; }

p {
  line-height: 1.6;
}

a {
  color: #7a5c3e;
  text-decoration: none;
  border-bottom: 2px solid var(--pastel4, #cbf0cc);
  transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
  color: #000000;
  border-color: var(--pastel1, #FFD1DC);
}


:root {
  --pastel1: #FFD1DC;
  --pastel2: #FFE8B3;
  --pastel3: #f6ffaf;
  --pastel4: #cbf0cc;
  --pastel5: #c7edf0;
  --pastel6: #c8c7ea;
  --pastel7: #E0BBE4;

  --pastel1-light: #FFE8ED;
  --pastel2-light: #FFF3D9;
  --pastel4-light: #E5F7E5;
  --pastel7-light: #EFDDF1;
}
/* ------------------------------ */
/* Screen reader only text - will be hidden visually but will be visible to the screen reader for assist in keyboard navigation       */
/* ------------------------------ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* This is a unit 6 note: I have created the tiltEffect.js page that spans text's letters with the letter class to run this tilt and colouring effect 
/* TiltEffect 
/* ------------------------------ */
/* letter colour + tilt hover effect */
.letter {
  display: inline-block;
  transform-origin: bottom center;
  transition: color 1s ease .1s, transform 1s ease .1s;
}

.letter:hover {
  transition: color 0.1s ease, transform 0.1s ease;
  transform: rotate(8deg);
}

.letter:nth-child(7n+1):hover { color: var(--pastel1); }
.letter:nth-child(7n+2):hover { color: var(--pastel2); }
.letter:nth-child(7n+3):hover { color: var(--pastel3); }
.letter:nth-child(7n+4):hover { color: var(--pastel4); }
.letter:nth-child(7n+5):hover { color: var(--pastel5); }
.letter:nth-child(7n+6):hover { color: var(--pastel6); }
.letter:nth-child(7n):hover   { color: var(--pastel7); }

/* ------------------------------ */
/* Footer  */
/* ------------------------------ */

.pagefooter {
    display: block;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #ece6d8;
    font-size: 0.9rem;
    color: #7a7a7a;
    text-align: center;
}


/* ------------------------------ */
/* The Nav Bar   */
/* ------------------------------ */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 30px;
  background-color: #fffdf9;
  border-bottom: 2px solid var(--pastel4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-family: 'Boska', sans-serif;
  font-size: 1.5rem;
}

.hamburgerbtn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bar {
    display: block;
    width: 28px;
    height: 3px;
    background-color: #7a5c3e;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

.hamburgerbtn:hover .bar {
    background-color: var(--pastel2);
}

.hamburgerbtn:focus {
    outline: 2px solid var(--pastel2);
    outline-offset: 4px;
}

/* ------------------------------ */
/* Full screen overlay menu       */
/* Adapted from W3Schools, "How To - Full screen Overlay Navigation"
   https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp
   Retrieved July 30, 2026. Used under the W3Schools Terms of Service
   ("Using W3Schools in Teaching"). Modified by Katrin Kanevsky.    */
/* ---*/
/* Default state, used when JavaScript is not available: the menu is just a
   plain visible list of links sitting under the navbar. Every page stays
   reachable even if no script ever runs. */
.overlay {
    background-color: #FFD1DC;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Everything below only applies once the inline script in <head> has added
   the "js" class to <html>. This is where the menu becomes a hidden sliding
   panel, which is only safe to do if JS is there to open it again. */
.js .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 200;
    left: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    visibility: hidden;
    transition: width 0.5s ease, visibility 0s linear 0.5s;
}

/* Open state: JS adds this class, CSS decides what "open" looks like.
   visibility flips instantly on the way open, but is delayed on the way
   closed so the width animation is still visible. */
.js .overlay.open{
    visibility: visible;
    width:100%;
    transition: width 0.5s ease, visibility 0s;
}

/* Both buttons only do anything when JavaScript is running, so without it
   they are hidden rather than sitting there looking clickable. */
.hamburgerbtn,
.closebtn {
    display: none;
}

.js .hamburgerbtn { display: flex; }
.js .closebtn { display: block; }

/* This makes the links stack over eachother, towards the bottom*/
.overlay-content {
    margin-top: auto;
    margin-bottom: 12vh;
    padding: 0 8vw;
    text-align: left;
}

.overlay a {
    display: block;
    padding: 12px 0;
    font-family: 'Boska', sans-serif;
    font-size: 3.5rem;
    color: #7b0315;
    border-bottom: none;
    transition: color 0.3s ease;
}

.overlay a:hover,
.overlay a:focus {
    color: #ffffff;
}

/* Marks the link for the page the visitor is currently on */
.overlay a.current {
  color: #b52760;
}

.overlay a.current:hover,
.overlay a.current:focus {
  color: #ffffff;
}



/* Secondary links, visually subordinate to the page links */
.overlay-social {
    margin-top: 35px;
}

.overlay-social a {
    font-family: 'Boska Light', sans-serif;
    font-size: 1.3rem;
    padding: 8px 0;
}

.closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Boska', sans-serif;
    font-size: 3.5rem;
    line-height: 1;
    color: #5c4433;
    transition: color 0.3s ease;
}

.closebtn:hover {
    color: #ffffff;
}

.closebtn:focus {
    outline: 2px solid #5c4433;
    outline-offset: 4px;
}

/* Short screens (e.g. a phone held sideways) */
@media screen and (max-height: 450px) {
    .overlay a { font-size: 1.5rem; }
    .overlay-social a { font-size: 1rem; }
    .closebtn { font-size: 2.5rem; top: 15px; right: 35px; }
}


/* ------------------------------ */
/* Shared page layout (Hobbies + Contact) */
/* ------------------------------ */

.page-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px 40px;
    position: relative;
    z-index: 1;
}



/* ------------------------------ */
/* About Me Page                  */
/* ------------------------------ */

.hero {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 40px;
}

.hero-text {
  flex: 1;
  padding-right: 40px;
}

.headshot {
  width: 800px;
  height: 800px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: -130px;
  box-shadow: 0 0 0 25px var(--pastel1);
}

.hero-text h1{
    position: relative;
    top: 110px;
    left: 200px;
    font-size: 7rem;
}

.hero-text h2{
    position: relative;
    top: 40px;
    left: 330px;
    font-size: 4rem;
}

#quickfacts {
    position: relative;
    top: 10px;
    left: 170px;
    font-size: 1.5rem;
    white-space: nowrap;
}


#quickfacts li {
    margin-bottom: 10px;
}

.pastel-dot1 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background-color: var(--pastel2);
    top: 650px;
    left: -40px;
    z-index: -1;

}
/*
Previous pastel dot, here for reference, but not used in the final design.

.pastel-dot2 {
    position: absolute;
    width: 1400px;
    height: 400px;
    border-radius: 40px;
    background-color: var(--pastel4);
    top: 1000px;
    left: 60px;
    z-index: -1;

}
*/ 
.pastel-dot3 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background-color: var(--pastel5);
    top: 1150px;
    right: -40px;
    z-index: -1;

}

/* this is purple dot. I am removing it because we are making the text background purple instead of having a dot behind it. Keeping this here for reference and learning.
.pastel-dot4 {
    position: absolute;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background-color: #e1e1f8;
    top: 1550px;
    left: -40px;
    z-index: -1;

}
    */

.pastel-dot5 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background-color: var(--pastel7);
    top: 2200px;
    right: -40px;
    z-index: -1;

}

.general-info {
    width: 1400px;
    max-width: 90%;
    min-height: 440px;
    border-radius: 40px;
    background-color: var(--pastel4);
    padding: 40px;
    box-sizing: border-box;
    font-size: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 100px auto;
}


.purple-dot-text {
    position: absolute;
    top: 1550px;
    left: -40px;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background-color: #e1e1f8;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.purple-dot-text h2{
    font-size: 5rem;
    margin: 0
}

.purple-dot-text p{
    font-size: 3rem;
    width: 750px;
    margin: 0;
}

.find-me-elsewhere {
    position: absolute;
    top: 2200px;
    right: -40px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background-color: var(--pastel7);
    padding: 40px;
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.find-me-elsewhere p {
    font-size: 2.5rem;
    margin: 0;
}

.find-me-elsewhere h2{

    font-size: 4rem;
    margin: 0;
}

.about-me-footer {
    position: absolute;
    top: 2870px;
    left: 0;
    width: 100%;
}



/* ------------------------------ */
/* Hobbies Page                   */
/* ------------------------------ */

.hobbies-dot1 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: var(--pastel3);
    top: 850px;
    left: -200px;
    z-index: -1;
}

.hobbies-dot2 {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background-color: var(--pastel1);
    top: 2500px;
    right: -220px;
    z-index: -1;
}

.hobbies-intro {
    text-align: center;
    margin-bottom: 50px;
}

.hobbies-intro h1 {
    font-size: 5rem;
    margin-bottom: 15px;
}

.hobbies-intro p {
    font-size: 1.3rem;
}

.page-content h2 {
    text-align: center;
}

.table-wrap {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 0 0 2px var(--pastel4);
    margin: 30px 0 40px;
}

.table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrap th {
    background-color: var(--pastel4);
    text-align: left;
    padding: 14px 20px;
    font-family: 'Boska', sans-serif;
    font-size: 1.1rem;
}

.table-wrap td {
    padding: 12px 20px;
    font-size: 1rem;
    border-bottom: 1px solid #f0ece0;
}

.table-wrap tr:nth-child(even) td {
    background-color: #faf6ec;
}

.table-wrap tr:last-child td {
    border-bottom: none;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin: 40px 0;
}

.gallery-item {
    flex: 1 1 250px;
    max-width: 320px;
    text-align: center;
}

.gallery-item h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.gallery-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 0 0 8px var(--pastel2);
}

.hobbies-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 30px 0 60px;
    justify-content: center;
}

.hobbies-list li {
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-family: 'Boska', sans-serif;
}

.hobbies-list li:nth-child(7n+1) { background-color: var(--pastel1); }
.hobbies-list li:nth-child(7n+2) { background-color: var(--pastel2); }
.hobbies-list li:nth-child(7n+3) { background-color: var(--pastel3); }
.hobbies-list li:nth-child(7n+4) { background-color: var(--pastel4); }
.hobbies-list li:nth-child(7n+5) { background-color: var(--pastel5); }
.hobbies-list li:nth-child(7n+6) { background-color: var(--pastel6); }
.hobbies-list li:nth-child(7n)   { background-color: var(--pastel7); }



/* ------------------------------ */
/* Contact Page                   */
/* ------------------------------ */

.contact-dot {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: var(--pastel6);
    top: 60px;
    right: -220px;
    z-index: -1;
}

.contact-intro {
    text-align: center;
    margin-bottom: 50px;
}

.contact-intro h1 {
    font-size: 4.5rem;
    margin-bottom: 15px;
}

.contact-intro p {
    font-size: 1.25rem;
}

.form-card {
    max-width: 560px;
    margin: 0 auto 70px;
    padding: 50px 45px;
    background-color: #fffef9;
    border-radius: 28px;
    box-shadow: 0 0 0 3px var(--pastel4);
    box-sizing: border-box;
}

.form-card label {
    display: block;
    font-family: 'Boska', sans-serif;
    font-size: 1rem;
    margin-bottom: 8px;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #ece6d8;
    border-radius: 14px;
    font-family: 'Boska Light', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    margin-bottom: 26px;
    background-color: #fffdf9;
}

.form-card input[type="text"]:focus,
.form-card input[type="email"]:focus,
.form-card textarea:focus {
    border-color: var(--pastel7);
    outline: none;
}

.form-card input[type="submit"] {
    display: block;
    margin: 0 auto;
    padding: 14px 40px;
    border: none;
    border-radius: 999px;
    background-color: var(--pastel1);
    font-family: 'Boska', sans-serif;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.form-card input[type="submit"]:hover {
    background-color: var(--pastel7);
    transform: scale(1.05);
}

.field-error {
    margin: -18px 0 20px;
    font-family: 'Boska Light', sans-serif;
    font-size: 0.95rem;
    color: #9b2226;
}

.field-error:empty {
    display: none;
}

.contact-links {
    text-align: center;
    margin-top: 20px;
}


/* ------------------------------ */
/* Just For Fun Page              */
/* ------------------------------ */

.fun-dot {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: var(--pastel3);
    top: 80px;
    left: -240px;
    z-index: -1;
}

.fun-intro {
    text-align: center;
    margin-bottom: 50px;
}

.fun-intro h1 {
    font-size: 4.5rem;
    margin-bottom: 15px;
}

.fun-intro p {
    font-size: 1.25rem;
    max-width: 34rem;
    margin: 0 auto;
}

.fun-card {
    max-width: 560px;
    margin: 0 auto 70px;
    padding: 45px 45px 50px;
    background-color: #fffef9;
    border-radius: 28px;
    box-shadow: 0 0 0 3px var(--pastel5);
    box-sizing: border-box;
    text-align: center;
}

.fun-categories fieldset {
    border: none;
    padding: 0;
    margin: 0 0 30px;
    text-align: left;
}

.fun-categories legend {
    font-family: 'Boska', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 16px;
    padding: 0;
}

.fun-categories p {
    margin: 0 0 10px;
    line-height: 1.4;
}

.fun-categories input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--pastel7);
}

.fun-categories label {
    font-size: 1rem;
    cursor: pointer;
}

.fun-button {
    display: block;
    margin: 0 auto 30px;
    padding: 14px 40px;
    border: none;
    border-radius: 999px;
    background-color: var(--pastel1);
    font-family: 'Boska', sans-serif;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.fun-button:hover {
    background-color: var(--pastel7);
    transform: scale(1.05);
}

.fun-button:focus {
    outline: 3px solid var(--pastel6);
    outline-offset: 4px;
}

.fun-result {
    min-height: 6rem;
    padding: 26px 24px;
    border: 2px dashed var(--pastel5);
    border-radius: 20px;
    background-color: #fffdf9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fun-result-text {
    font-family: 'Boska', sans-serif;
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 0;
}

.fun-links {
    text-align: center;
    margin-top: 20px;
}

.fun-links p {
    max-width: 34rem;
    margin: 0 auto 20px;
}

@media (max-width: 600px) {

    .fun-intro h1 {
        font-size: 3rem;
    }

    .fun-card {
        padding: 32px 24px 36px;
    }

    .fun-dot {
        width: 320px;
        height: 320px;
        left: -180px;
    }
}


/* ------------------------------ */
/* Landing page (index.html)      */
/* ------------------------------ */

.landing-page .navbar {
    background-color: #FFF3F5;
}

.landing {
    position: relative;
    flex: 1;                        
    min-height: 0;                  
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


.landing-page {
    background-color: #FFF3F5;
    min-height: 100vh;              
    min-height: 100dvh;             
    display: flex;
    flex-direction: column;
}

.landing-page .pagefooter {
    margin-top: 0;
    padding-top: 10px;
}


.landing-page .navbar {
    background-color: #FFF3F5;
}


.landing-hero {
    text-align: center;
    padding-top: 0.1rem;
    flex-shrink: 0;
}


.landing-text {
    display: block;
    height: auto;
    margin: 0 auto;
}

.landing-title {
    margin: 0;
}


#OneLine {
    width: min(99vw, 80rem);
}

#TwoLine {
    display: none;
}


.landing-subtitle {
    margin: 0;
}

#PortfolioWebsite {
    width: min(55vw, 32rem);
    margin-top: -2rem;
}

/* Narrow screens: swap to the stacked version  */
@media (max-width: 700px) {

    /* Less breathing room above the title on a short phone screen,
       so the whole block sits higher and leaves more room below. */
    .landing-hero {
        padding-top: 0.5rem;
    }

    #OneLine {
        display: none;
    }

    #TwoLine {
        display: block;
        width: min(85vw, 22rem);
    }

    #PortfolioWebsite {
        width: min(70vw, 18rem);
        margin-top: -2.5rem;
    }
}



.landing-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 4vw 2rem;
    margin-top: -0.5rem;            
    flex-shrink: 0;
}

.landing-links a {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #03496C;
    border-bottom: none;            
}

.landing-links a:hover,
.landing-links a:focus {
    border-bottom: 2px solid var(--pastel4);
}


.doodle-layer {
    position: relative;
    flex: 1;
    pointer-events: none;
}

.doodle {
    position: absolute;
    width: 18vmin;
    transition: translate 0.3s ease;
}

/* Each doodle sets its own position, size and tilt.
    Values outside 0-100% push a doodle off the edge, where overflow: hidden crops it.

   Every position below was placed by eye in DevTools rather than
   calculated, which is why the numbers are so uneven. 
   vmin = % for width, so height is preportionally made, so everything stays
   proportionate in portrait and landscape. */
#doodle-1  { left:  84%; top: 10%; width: 22vmin; rotate:  -17deg; }
#doodle-2  { left:  18%; top: 75%; width: 11vmin; rotate:  34deg; }
#doodle-3  { left: 37%; top: 21%; width: 28vmin; rotate:  12deg; }
#doodle-4  { left: 60%; top:  22%; width: 21vmin; rotate:   0deg; }
#doodle-5  { left: 81%; top: 51%; width: 29vmin; rotate:  2deg; }
#doodle-6  { left: 67%; top: 1%; width: 20vmin; rotate:   19deg; }
#doodle-7  { left: 1%; top: 62%; width: 21vmin; rotate:  -10deg; }
#doodle-8  { left: 20%; top: 32%; width: 30vmin; rotate:  0deg; }
#doodle-9  { left: 51%; top:  3%; width: 18vmin; rotate:  -24deg; }
#doodle-10 { left: 53%; top: 46%; width: 32vmin; rotate:   3deg; }
#doodle-11 { left: 30%; top: -2%; width: 23vmin; rotate:  -15deg; }
#doodle-12 { left: 36%; top: 63%; width: 23vmin; rotate:   7deg; }
#doodle-13 { left: 73%; top: 40%; width: 16vmin; rotate: -11deg; }
#doodle-14 { left: 5%; top: 0%; width: 30vmin; rotate:   6deg; }


/*
    Cat arm cursor styling
*/ 

#catArmCursor {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
}

#catArmCursor img {
    height: 150vh;
    width: auto;
    translate: -50% 0;
}

/* Here I stop motion for people who turn it off in their settings- yay inclusivity :) */
@media (prefers-reduced-motion: reduce) {
    #catArmCursor { display: none; }
}

/* 
Makes smaller height small for ther cat arm image on mobile
*/
@media (max-width: 700px) {
    #catArmCursor img { height: 100vh; }
}



/* Landing page, medium screens  */

/* Fourteen doodles crowd a narrower screen, so five are hidden and the
   remaining nine are enlarged and re positioned. Repositioning all the doodles
   multiple times for different screen sizes was a long process. The title needs no rule
   here: it is an SVG and already swaps to its stacked version at 700px. I made two title images, one-line and two-line.
   two- line is for mobile, cause it's more condensed*/
@media (max-width: 1000px) {

    .landing-hero {
        padding-top: 0.25rem;
    }

    .landing-links {
        gap: 1rem;
        padding: 0 4vw 1.5rem;
    }

    /* Five hidden, nine shown. */
    #doodle-2,  #doodle-4,  #doodle-6,
    #doodle-11, #doodle-13 {
        display: none;
    }

    #doodle-1  { left:  2%; top:  8%; width: 30vmin; }
    #doodle-9  { left: 25%; top: -2%; width: 20vmin; }
    #doodle-14 { left: 72%; top: -4%; width: 29vmin; }
    #doodle-3  { left: 44%; top: 7%; width: 31vmin; }
    #doodle-8  { left: 24%; top: 29%; width: 26vmin; }
    #doodle-7  { left: 44%; top: 50%; width: 30vmin; }
    #doodle-10 { left: 15%; top: 62%; width: 29vmin; }
    #doodle-5  { left:  70%; top: 55%; width: 26vmin; }
    #doodle-12 { left: 2%; top: 57%; width: 15vmin; }
}


/* --- Landing page, small screens --- */

/* same idea as before, just for even smaller screens like mobile */
@media (max-width: 480px) {

    .landing-hero {
        padding-top: 0.25rem;
    }

    .landing-links {
        gap: 1rem;
        padding: 0 4vw 1.5rem;
    }

    /* HelloWorld was hidden by the 1000px query above, which still
       applies at this width, so it is switched back on explicitly. */
    #doodle-11 {
        display: block;
    }

    /* BalletShoes is visible at 1000px, so it needs hiding here.
       Cherries and PhotoSaturn need no rule cause they simply stay hidden
       from the 1000px query, since nothing here turns them back on. */
    #doodle-8 {
        display: none;
    }

    #doodle-1  { left:  0%; top:  4%; width: 26vmin; }   
    #doodle-9  { left: 33%; top:  0%; width: 22vmin; }   
    #doodle-14 { left: 60%; top:  6%; width: 37vmin; }   
    #doodle-3  { left:  26%; top: 17%; width: 34vmin; }   
    #doodle-12 { left: 4%; top: 32%; width: 18vmin; }   
    #doodle-7  { left:  2%; top: 48%; width: 28vmin; }   
    #doodle-10 { left: 50%; top: 50%; width: 50vmin; }   
    #doodle-5  { left:  18%; top: 66%; width: 32vmin; }   
    #doodle-11 { left: 44%; top: 43%; width: 26vmin; }   
}

/* reducing motion for people who do not want motion*/
@media (prefers-reduced-motion: reduce) {

    .doodle {
        transition: none;
    }
}


/* ------------------------------ */
/* Mobile adjustments - This was the mdia query I made for my first three pages, Contact me, About me, and My Hobbies  */
/* ------------------------------ */

@media (max-width: 1100px) {

  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    gap: 10px;
    margin-top: 20px;
  }

  .headshot {

    align-self: center;
    width: 300px;
    height: 300px;
    margin: 0;
    box-shadow: 0 0 0 5px var(--pastel1);
  }

  .hero-text {
    flex: 0 1 auto;
    text-align: left;
  }

  .hero-text h1 {
    top: 0;
    left: 0;
    font-size: 7rem;
    margin-bottom: 0;
  }


  .hero-text h2 {
    top: 0;
    left: 0;
    font-size: 3rem;
    margin-top: 0;
  }

  #quickfacts {
    top: 0;
    left: 0;
    font-size: 1rem;
    white-space: normal;
  }

  .pastel-dot1 {
    width: 180px;
    height: 180px;
    top: 400px;
    left: -60px;
  }

  .pastel-dot3 {
    width: 180px;
    height: 180px;
    top: 10px;
    right: 0px;
  }


  .general-info {
    position: static;
    width: auto;
    padding: 20px;
    font-size: 1.1rem;
  }

  .purple-dot-text {
    position: static;
    width: 400px;
    height: 400px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto 30px;
    margin-top: 30px;
  }

  .purple-dot-text h2 {
    font-size: 2.6rem;
  }

  .purple-dot-text p {
    width: auto;
    font-size: 1.3rem;
  }


  .find-me-elsewhere {
    position: static;
    width: auto;
    padding: 20px;
    font-size: 1rem;
  }


  .hobbies-dot2 {
    top: 100px;
    width: 350px;
    height: 350px;
    right: 0px;
  }

  .contact-dot {
    top: 10px;
    width: 300px;
    height: 300px;
    right: 0px;
  }
  .hobbies-intro h1 {
    font-size: 4rem;
    margin-bottom: 15px;
}


}

/* ------------------------------ */
/* Projects page 
/* ------------------------------ */
body.projects-page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}
.hero-text-projects {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    flex: 1;
    padding-right: 0px;
}

.hero-text-projects h1 {
    font-size: 5.5rem;
}

.projects-dot1 {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background-color: var(--pastel7);
    top: -170px;
    left: -150px;
    z-index: -1;
}

.projects-dot2 {
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background-color: var(--pastel3);
    top: -130px;
    right: 7%;
    z-index: -1;
}

.projects-dot3 {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: var(--pastel5);
    bottom: 40px;
    right: 40px;
    z-index: -1;
}


/* ------------------------------ */
/* the bubbles on projects page        */
/* ------------------------------ */

.projects-page .page-content {
    max-width: 1200px;
}

.bubble-track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    margin-bottom: 70px;
}

.bubble {
    width: 300px;
    height: 300px;
    flex-shrink: 0;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 50%;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bubble img {
    width: 145px;
    height: 145px;
    object-fit: contain;
}

.bubble-label {
    font-family: 'Boska', sans-serif;
    font-size: 1.5rem;
    color: #000000;
    line-height: 1.2;
}

.bubble:nth-child(4n+1) { background-color: var(--pastel1-light); }
.bubble:nth-child(4n+2) { background-color: var(--pastel2-light); }
.bubble:nth-child(4n+3) { background-color: var(--pastel7-light); }
.bubble:nth-child(4n)   { background-color: var(--pastel4-light); }

.bubble:hover,
.bubble:focus {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    color: #5a4231;
}

.bubble:focus-visible {
    outline: 3px solid #5a4231;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .bubble { transition: none; }
    .bubble:hover, .bubble:focus { transform: none; }
}

@media screen and (max-width: 700px) {
    .projects-dot1 { width: 300px; height: 300px; top: -110px; left: -110px; }
    .projects-dot2 { width: 200px; height: 200px; top: -80px; right: 4%; }
    .projects-dot3 { width: 260px; height: 260px; top: 640px; left: -120px; }
    .bubble { width: 140px; height: 140px; }
    .bubble img { width: 60px; height: 60px; }
    .bubble-label { font-size: 1rem; }
}

/* ------------------------------ */
/* jQuery UI dialog edits to match the style of my menu overlay to keep consistency. Full screen and style changes */
/* ------------------------------ */

.fullscreen-dialog.ui-dialog {
    position: fixed !important; /* I have to use the !important because jQuery ui has preset values that need to be overuled */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    z-index: 300;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: var(--pastel1-light);
    display: flex;
    flex-direction: column;
}

.fullscreen-dialog .ui-dialog-titlebar {
    background: none;
    border: none;
    border-radius: 0;
    padding: 25px 8vw;
    font-family: 'Boska', sans-serif;
    flex-shrink: 0;
}

.fullscreen-dialog .ui-dialog-title {
    font-size: 2.5rem;
    color: #5c4433;
}

.fullscreen-dialog .ui-dialog-titlebar-close {
    right: 8vw;
    width: 44px;
    height: 44px;
}

.fullscreen-dialog .ui-dialog-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 8vw 60px;
    height: auto !important;
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    color: #000000;
}

.ui-widget-overlay {
    z-index: 250;
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
}

.fullscreen-dialog .project-photo {
    float: right;
    width: 300px;
    height: 300px;
    border-radius: 30%;
    object-fit: cover;
    margin: 0 0 30px 35px;
    box-shadow: 0 0 0 10px var(--pastel5);
}

.fullscreen-dialog .RBC-logo-photo {
    display: block;
    clear: both;
    width: 450px;
    height: 450px;
    max-width: 100%;
    margin: 0 auto 30px;
    border-radius: 50%;
    object-fit: contain;
    background-color: #ffffff;
    box-shadow: 0 0 0 10px var(--pastel5);
}

.fullscreen-dialog .ui-dialog-content h2 {
    display: none;
}

.fullscreen-dialog .project-type {
    font-size: 1.1rem;
    color: #7a5c3e;
    font-style: italic;
    margin: 0 0 30px;
}

.fullscreen-dialog .ui-dialog-content p {
    font-size: 1.1rem;
    line-height: 1.7;
}

.fullscreen-dialog .skill-tags {
    clear: both;
    margin-top: 35px;
}

.fullscreen-dialog .project-links a {
    display: inline-block;
    background-color: var(--pastel1);
    color: #5c4433;
    border-bottom: none;
    border-radius: 999px;
    padding: 10px 24px;
    margin-right: 10px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.fullscreen-dialog .project-links a:hover,
.fullscreen-dialog .project-links a:focus {
    background-color: var(--pastel7);
    transform: translateY(-2px);
}

@media screen and (max-width: 700px) {
    .fullscreen-dialog .ui-dialog-titlebar {
        padding: 20px 6vw;
    }

    .fullscreen-dialog .ui-dialog-title {
        font-size: 1.6rem;
    }

    .fullscreen-dialog .ui-dialog-content {
        padding: 15px 6vw 50px;
    }

    .fullscreen-dialog .ui-dialog-content p {
        font-size: 1rem;
    }

    .fullscreen-dialog .project-photo,
    .fullscreen-dialog .RBC-logo-photo {
        float: none;
        display: block;
        margin: 0 auto 25px;
        width: 180px;
        height: 180px;
    }

    .fullscreen-dialog .project-links a {
        display: block;
        margin: 0 0 12px;
        text-align: center;
    }
}


/*----------------------------------------*/
/* Projects carousel styling  */
/*---------------------------------------*/

.js .bubble-carousel {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 70px;
}

.js .bubble-viewport {
    overflow: hidden;
    flex: 1;
    /*  some vertical breathing room so the hover lift is still visible. With out it it gets cut off and looks unfrofessional
        padding here buys space without letting bubbles escape sideways. */
    padding: 30px 0;
}

.js .bubble-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-bottom: 0;
}

.carousel-arrow {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: var(--pastel7);
    color: #5c4433;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.carousel-arrow:hover:not(:disabled) {
    background-color: var(--pastel1);
    transform: scale(1.1);
}

.carousel-arrow:focus-visible {
    outline: 3px solid #5a4231;
    outline-offset: 3px;
}

.carousel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/*-------------------*/
/* The reveal effect with jQuery*/
/*---------------------*/

.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.reveal-left  { transform: translateX(-40px); }
.js .reveal.reveal-right { transform: translateX(40px); }

.js .reveal.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal { transition: none; }
}