@media all{
  *{
    margin: 0;
    font-family: 'Roboto Mono';
  }
  #occupation{ font-style: italic; }

  a{text-decoration: none; color: black;}
  h3 > a{text-decoration: underline;}
  img{width: 100%;}
  p, h2{color: black;}
  section{border-top: solid thin black;}
  button:hover, #intreval_time{cursor: pointer;}

  /* ======================== HEADER ======================== */
  header{
    position:fixed;
    width: 100vw;
    top: 0px;
    left: 0px;
    z-index: 3;
    border-bottom: solid black thin;
    background-color: white;
  }
  #header_div{color: black;}

  .header_a_wrapper{
    display: flex;
    justify-content:center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .header_a_wrapper > button{
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: none;
  }
  #mode_switch{
    display: flex;
    width: 100%;
  }

  /* ======================== GAME CONTROLS ======================== */
  #game_display_div{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  #game_display_div::-webkit-scrollbar{display: none;}
  #game_controls{width:100vw; height: auto; z-index: 4;}
  #start_game{background-color:#cbffc0; opacity: 0.5;}
  #pause_game{background-color:#ffe5c0;}
  #stop_game{background-color:#ffc0c0;}
  #draw_cells{background-color:#c0c9ff; opacity: 0.5;}
  #erase_cells{background-color:#dfc0ff;}
  #game_explanation{background-color:#ffc0c0;}

  .game_control_div>button{
    width: 100%;
    height: 100%;
  }

  #stop_game, #pause_game, #draw_cells{opacity: 0.5; color: white;}
  #start_game{color: white;}
  #intreval_div{display: flex;}

  #game_explanation_div{display: flex;}
  #game_explanation_div > button{
    width: 100%;
    height: 100%;
    border-radius: 10%;
  }


  /* ======================== GAME EXPLANATION ======================== */
  .txt_link{text-decoration: underline;}

  #explanation_wrapper{
    display: none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(0,0,0, 0.25);
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
  }
  #game_explanation_txt{
    background-color: white;
    border: solid thin black;
    overflow-y: auto;
    z-index: 1;
  }
  #game_explanation_txt > div{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }
  #hide_game_explanation{
    border-radius: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }



  /* ======================== PROFILE ======================== */
  #profile{float: right;}

  #personal_info > div{
    display: flex;
    align-items: center;
  }
  #profile_pic{border: solid thin black;}
  
  #skills{ padding-top: 2.5%; }
  #skills_table{
    display: flex;
    flex-direction: column;
  }
  .skill_div_row{
    display: flex;
    flex-direction: row;    
    padding: 1% 0%;
    border-top: solid thin;
  }
  .skill_title_div{ 
    width: 15%; 
    border-right: solid thin;
  }
  .skill_values_div{ 
    width: 85%; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .skill_values_div > p {
    padding: 0% 2.5%;
    margin: 0.5% 5%;
    border: solid thin;
    border-radius: 10px;
  }



  /* ======================== WORK EXPERIENCE AND EDUCATION ======================== */
  .school > div > p > a, .job > div > p > a{text-decoration: underline;}
  .work_description > li > p > strong {
    text-decoration: underline;
  }
  .education_div > ul, .school_experience > ul { margin: 0; padding: 0px  20px; }
  .work_description { margin: 0; padding: 0px  20px; }
  .work_description > li > ul {margin: 0; padding-left: 5px;}
  .work_description > li > p {padding: 2.5px 0px}
  .school{ padding-bottom: 3.5%; }
  #advertise_projects > p {text-align: center;}
  #advertise_projects{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    animation: float_attention 1.5s ease-in-out infinite;
  }

  @keyframes float_attention {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  #advertise_projects > p {
    animation: flash 1.5s ease-in-out infinite;
  }

  @keyframes flash {
    0%, 100% {
      opacity: 0.3;
    }
    50% {
      opacity: 1;
    }
  }


  /* ======================== PROJECTS ======================== */
  .project{
    display: grid;
    grid-template-rows: auto;
  }
  .lang{
    grid-area: 1/1/2/2;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .project_txt{grid-area: 1/2/2/3;}

  #t_gol{cursor: pointer;}
  #game_display_div{
    overflow: hidden;
    cursor:cell;
  }
}

/* ======================== HEADER BREAKPOINTS ======================== */
@media screen and (max-width: 720px){
  header{
    padding: 2.5% 0%;
    display: grid;
    grid-template-columns: 60vw 40vw;
    grid-template-rows: auto auto;
  }
  #header_div{
    grid-area: 2/1/3/3;
    display: none;
  }
  .header_a_wrapper{
    padding: 3.5% 0%;
    border-top: solid black thin;
    height: auto;
  }
  #mode_switch{
    grid-area: 1/1/2/2;
    align-items: center; /* align vertical */
    justify-content: flex-start;
    padding-left: 5%;
  }
  #display_mode{margin-left: 5%;}
  #navbar_symbol_div{
    grid-area: 1/2/2/3;
  }
  #navbar_symbol_div2{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5%;
  }
}
@media print, screen and (min-width: 721px){
  header{
    padding: 0.6% 0%;
    display: grid;
    grid-template-columns: 83.34vw 16.66vw;
    grid-template-rows: auto;
  }
  #header_div{
    grid-area:1/1/2/2;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .header_a_wrapper{height: 100%;}
  #mode_switch{
    justify-content: center;
    align-items: center;
    grid-area:1/2/2/3;
    flex-flow: column;
  }
  #navbar_symbol_div{display: none;}
}
/* Was two near-identical breakpoints (≤560px: 30%, ≥561px: 20%) — merged into one fluid rule */
#navbar_symbol_div{ width: clamp(20%, 32% - 2vw, 30%); }

/* ======================== GAME CONTROLS BREAKPOINTS ======================== */
@media only screen and (max-width:615px){
  #game_controls{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 6%;
  }
  #start_game, #pause_game, #stop_game, #draw_cells, #erase_cells, #game_explanation_div > button{padding: 5% 0%;}
  #start_game_div, #pause_game_div, #stop_game_div{width: 33.33%;}
  #draw_cells_div, #erase_cells_div{width: 50%;}
  #intreval_div{
    width: 80%;
    flex-direction: row-reverse;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
  }
  #show_intreval_time{padding-right: 5%;}
  #game_explanation_div{width: 17%;}
}
@media only screen and (min-width:616px){
  #game_controls{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  #start_game, #pause_game, #stop_game, #draw_cells, #erase_cells{padding: 5% 0%;}
  #game_explanation_div{
    justify-content: flex-end;
    width: 30%;
  }
  .game_control_div{width: 100%;}
  #intreval_div{
    flex-direction: column;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    width: 100%;
  }
}


/* ======================== GAME EXPLANATION BREAKPOINTS ======================== */
@media only screen and (max-width:675px){
  #game_explanation_txt{
    width: 80%;
    height: 80%;
    padding: 5%;
  }
  #hide_game_explanation{
    width: 16%;
    height: 11%;
  }
}
@media only screen and (min-width:676px){
  #game_explanation_txt{
    width: 80%;
    height: 74%;
    padding: 3%;
  }
  #hide_game_explanation{
    width: 5%;
    height: 5%;
  }
}


/* ======================== ABOUT ME BREAKPOINTS ======================== */
@media only screen and (min-width:100px){
  #personal_info{
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
  }
  #occupation{ padding-bottom: 7.5%; }
  #about_me_txt{ padding-top: 7.5%; }
}
@media only screen and (min-width:950px){
  #occupation{ padding-bottom:2%; }
  #about_me_txt{padding-right: 5%; padding-top: 3.5%;}
}

/* ======================== PROFILE ICON — FLUID, NO HARD BREAKPOINT ======================== */
/*
  Single progress value (0 at 550px viewport width → 1 at 1051px) drives
  every profile/personal_info property that used to snap at the 949/950px
  boundary. Declared on #personal so it inherits into both #profile and
  #personal_info as descendants.
*/
#personal{
  --profile_progress: clamp(0, (100vw - 550px) / 501px, 1);
}
#profile{
  width: calc(36% - 18.5% * var(--profile_progress));       /* 36% → 17.5% */
  margin-top: calc(-6% * var(--profile_progress));           /* 0% → -6% */
  padding-top: calc(2.5% - 2.5% * var(--profile_progress));  /* 2.5% → 0% */
  padding-right: calc(2.5% - 0% * var(--profile_progress));/* 2.5% → 0% */
  padding-bottom: calc(2.5% - 2.5% * var(--profile_progress));/* 2.5% → 0% */
  padding-left: calc(5% * var(--profile_progress));           /* 0% → 5% */
}
#personal_info{
  padding-top: calc(clamp(1%, 4vw - 10px, 4%) * (1 - var(--profile_progress))); /* fades to 0 */
  padding-left: calc(2% * (1 - var(--profile_progress)));                       /* fades to 0 */
}

/* ---------------------------------------------------------------------
   SOCIAL ICONS (linkedin / github / mail)
   Previously these only got a size at all at the ≥950px breakpoint
   (fixed 65x100px), so below that they had no explicit width/height and
   just rendered at whatever their content forced — causing a hard visual
   jump right at 950px. This rule applies at every width: it scales the
   icon boxes fluidly from mobile up through tablet, then locks to the
   original 65x100px once the viewport reaches ~950px (clamp's upper
   bound), matching the original desktop size exactly with no seam.
--------------------------------------------------------------------- */
#linkedin, #github, #mail{
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(32px, 5.1vw, 65px);
  height: clamp(49px, 7.8vw, 100px);
}

/* ======================== MOBILE ======================== */
@media only screen and (max-width: 550px){
  #personal, #my_education, #my_projects, #work{padding: 30px 15px;}
  header, .header_a_wrapper > button{font-size: 100%}
  h2{font-size: 170%;}
  h3{font-size: 120%; padding-bottom: 1.5%;}

  .game_control_div > button, #show_intreval_time, #game_explanation_div>button{font-size: 92.5%;}
  #game_explanation_txt>p{font-size: 95%;}
  #hide_game_explanation{font-size: 95%;}
  #occupation{font-size: 17px; padding-top: 6%;}
  #personal_info > div > a{font-size: 90%; padding-left: 2%; word-break: break-all;}
  #about_me_txt{font-size: 100%;}
  #skills{ padding-top: 7.5%; }
  .skill_title_div{ width: 30%; }
  .skill_values_div{ width: 70%; }

  #linkedin, #github, #mail{ width: 50px; height: 60px; }
  #profile{ padding-top: 6%; }
  #profile_pic{ width: 135px; }

  .job>div>p, .school>div>p, .job>p, .school>p{font-size: 16px;}
  .project > div > p{font-size: 100%;}
  #my_projects>p{font-size: 105%;}

  /* ======================== WORK EXPERIENCE AND EDUCATION ======================== */
  .school, #certifications {padding-top: 15px;}
  .education_div > h3 {font-size: 23px;}
  #advertise_projects {padding-top: 7%; }
  .education_div, .job{padding: 7% 1%} top right bottom left

  /* ======================== PROJECTS ======================== */
  .project{
    grid-template-columns: 27vw auto;
    padding: 3% 0%;
  }
  .lang{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .project_txt > p{padding: 3.5% 0%;}
  #my_projects > p{padding-top: 2.5%;}
  #my_projects > div{padding: 5% 2.5% 0% 2.5%;}  /*top right bottom left*/
}



/* ======================== TABLET ======================== */
@media print, screen and (max-width: 1050px) and (min-width: 551px){
  #personal, #my_education, #my_projects, #work{padding: 4% 2%;}
  header, .header_a_wrapper > button{font-size: 104%}
  .game_control_div > button, #show_intreval_time, #game_explanation_div>button{font-size: 105%;}
  #skills{ padding-top: 5%; }
  .skill_title_div{ width: 20%; }
  .skill_values_div{ width: 80%; }
  h2{font-size: 230%;}
  h3{font-size: 150%; padding-top: 1%; }
  #game_explanation_txt>p{font-size: 110%;}
  #hide_game_explanation{font-size: 120%;}
  #occupation{font-size: 19px; padding-top: 2.5%;}

  #linkedin, #github, #mail{ width: 60px; height: 70px; }
  #profile_pic{ width: 190px; }

  #personal_info > div > a{font-size: 110%;}
  #about_me_txt{font-size: 110%;}

  .job>div>p, .school>div>p, .job>p, .school>p{font-size: 115%;}
  .project > div > p{font-size: 115%;}
  #my_projects>p{font-size: 115%;}

  /* ======================== WORK EXPERIENCE AND EDUCATION ======================== */
  .education_div, .job{padding: 2.5%; border: red} /*top right bottom left*/
  .education_div > h3 {font-size: 27.5px; padding-bottom: 15px;}

  /* ======================== PROJECTS ======================== */
  .project{
    grid-template-columns: 23vw auto;
    padding: 1.25% 0%;
  }
  #my_projects > p{padding-top: 1%;}
  .lang{padding-right: 10%;}
  .project_txt > p{padding: 1.5% 0%;}
  #my_projects > div{padding: 5% 2.5% 0% 2.5%;}  /*top right bottom left*/
}


/* ======================== DESKTOP ======================== */
@media screen and (min-width: 1051px){
  /* ======================== WORK EXPERIENCE AND EDUCATION ======================== */
  .job{padding: 2% 1.5% 2% 1.5%; } /*top right bottom left*/
  .education_div{padding: 1.5% 0%;}
  .education_div > h3 {font-size: 27.5px; padding-bottom: 15px;}

  #linkedin, #github, #mail{ width: 65px; height: 100px; }
  #profile_pic{ width: 225px; }

  /* ======================== PROJECTS ======================== */
  .project{
    grid-template-columns: 20vw auto;
    padding: 1% 0%;
  }
  #my_projects > p{padding-top: 1%;}
  .lang{padding-right: 5%;}
  .project_txt > p{padding: 0.35% 0%;}
  #my_projects > div{padding: 3% 2.5% 0% 2.5%;  /*top right bottom left*/}


  /* ===== newly added, previously frozen past 1600px ===== */
  #personal, #my_education, #my_projects, #work{padding: 4vw 2vw;}
  .education_div > h3{font-size: 20px; padding-bottom: 1.17vw;}
  ul, p {font-size: 20px;}

}

@media screen and (max-width: 1600px) and (min-width: 1051px){
  #personal, #my_education, #my_projects, #work{padding: 4% 2%;}
  header, .header_a_wrapper > button{font-size: 100%}
  .game_control_div > button, #show_intreval_time, #game_explanation_div>button{font-size: 100%;}
  h2{font-size: 230%; padding-bottom: 1%;}
  h3{font-size: 150%; padding-bottom: 1%;}
  #game_explanation_txt>p{font-size: 110%;}
  #hide_game_explanation{font-size: 120%;}
  #occupation{font-size: 19px;}

  #personal_info > div > a{font-size: 100%; padding-left: 2%;}
  #about_me_txt{font-size: 110%;}

  .job>div>p, .school>div>p, .school>p{font-size: 17px;}
  .project > div > p{font-size: 105%;}
  #my_projects>p{font-size: 115%;}

  /* ===== newly added, previously frozen past 1600px ===== */
  #personal, #my_education, #my_projects, #work{padding: 4vw 2vw;}
  .education_div > h3{font-size: 2vw; padding-bottom: 1.17vw;}
  ul, p {font-size: 110%;}
}

@media screen and (min-width: 1601px){
  header, .header_a_wrapper > button{font-size: 1.25vw;}
  .game_control_div > button, #show_intreval_time, #game_explanation_div>button{font-size: 1.25vw;}
  h2{font-size: 2vw; padding-bottom: 1%;}
  h3{font-size: 1.85vw; padding-bottom: 1%;}
  #game_explanation_txt>p{font-size: 1.25vw;}
  #hide_game_explanation{font-size: 1.4vw;}
  #occupation{font-size: 1.35vw;}

  #linkedin, #github, #mail{ width: 3.4vw; height: 5.2vw; }
  #profile_pic{ width: 10vw; }

  #personal_info > div > a{font-size: 1.25vw; padding-left: 2%;}
  #about_me_txt{font-size: 1.27vw;}

  .job>div>ul, .school>div>p, .job>div>p, .school>p{font-size: 1.23vw;}
  .project > div > p{font-size: 1.23vw;}
  #my_projects>p{font-size: 1.26vw;}

  /* ===== newly added, previously frozen past 1600px ===== */
  #personal, #my_education, #my_projects, #work{padding: 4vw 2vw;}
  .education_div > h3{font-size: 2vw; padding-bottom: 1.17vw;}
  ul, p {font-size: 1.23vw;}
}


@media only print{
  header{position: static;}
  #game{display: none !important;}
  #profile_pic{width: 25%;}
  #personal, #my_education, #my_projects, #work{
    overflow-y: visible;
    clear: both;
    page-break-after: always;
  }
  #game, #game_controls{display: none !important;}
}