@media (min-width: 460px) {
  html {
    font-size: 18px;
  }

  #system-info {
    font-size: 0.47rem;
  }

  .bios-pic img {
    width: 100%;
    filter: contrast(1.08) brightness(0.94);

    transform: scale(1.25);
  }

  .status-panel .panel-content {
    font-size: 0.4rem;
    gap: 0.25rem 1.2rem;
  }

  .bios-footer {
    grid-template-columns: 1.4fr 2fr 1.4fr;
  }

  .weather-api .panel-content {
    font-size: 0.45rem;
    padding: 0.2rem;
    gap: 0.1rem;
  }

  .weather-source a {
    font-size: 0.45rem;
  }
  .weather-display {
    gap: 0.7rem;
  }

  .weather-icon {
    transform: translateY(-1px);
    width: 1.2rem;
  }

  .boot-exit span {
    font-size: 0.7rem;
  }
  .boot-exit img {
    width: 1.3rem;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 20px;
  }

  #system-info {
    font-size: 0.65rem;
    font-weight: 400;
  }

  .status-panel .panel-content {
    font-size: 0.7rem;
    gap: 0.25rem 2rem;
  }

  .bios-footer {
    grid-template-columns: 1.4fr 2.42fr 1fr;
  }

  .weather-api .panel-content {
    font-size: 0.6rem;
    padding: 0.25rem 0.25rem 0.5rem 0.25rem;
    gap: 0rem;
  }

  .weather-source {
    margin-top: 0.1rem;
    padding-bottom: 0.5rem;
  }
  .weather-display {
    gap: 2rem;
  }

  .weather-icon {
    transform: translateY(2px);
    width: 1.3rem;
  }

  .boot-exit span {
    font-size: 0.8rem;
  }
  .boot-exit img {
    width: 1.4rem;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .bios-tabs button:hover {
    transform: translateY(-4px);

    background: rgba(0, 217, 255, 0.08);

    box-shadow:
      0 0 15px rgba(0, 217, 255, 0.9),
      0 8px 20px rgba(0, 0, 0, 0.6),
      inset 0 0 8px rgba(255, 255, 255, 0.15);

    border-color: #00d9ff;
  }

  .boot-exit .panel-content:hover {
    transform: translateY(-4px);

    background: rgba(0, 217, 255, 0.08);

    border: 1px solid #00d9ff;
    border-radius: 4px;

    box-shadow:
      0 0 15px rgba(0, 217, 255, 0.9),
      0 8px 20px rgba(0, 0, 0, 0.6),
      inset 0 0 8px rgba(255, 255, 255, 0.15);
  }

  .backToContactForm:hover,
  .contactform button:hover {
    transform: translateY(-4px);

    background: rgba(0, 217, 255, 0.08);

    border: 1px solid #00d9ff;
    border-radius: 4px;

    box-shadow:
      0 0 15px rgba(0, 217, 255, 0.9),
      0 8px 20px rgba(0, 0, 0, 0.6),
      inset 0 0 8px rgba(255, 255, 255, 0.15);
  }
  .project-links a:hover {
    transform: translateY(-4px);

    background: rgba(0, 217, 255, 0.08);

    box-shadow:
      0 0 15px rgba(0, 217, 255, 0.9),
      0 8px 20px rgba(0, 0, 0, 0.6),
      inset 0 0 8px rgba(255, 255, 255, 0.15);

    border-color: #00d9ff;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 20px;
  }

  .bios-panel {
    width: min(80%, 1300px);
    height: 66vh;
    grid-template-rows: auto auto 4fr 1.5fr;
  }

  .bios-main {
    display: grid;
    grid-template-columns: 0.6fr 2.5fr;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  #system-info {
    font-size: 0.4rem;
    font-weight: 400;
  }

  .bios-pic {
    max-height: 12vh;
  }

  .status-panel .panel-content {
    font-size: 0.4rem;
    padding-left: 0.5rem;
    gap: 0rem 2rem;
  }

  .bios-footer {
    grid-template-columns: 1fr 3.1fr 1fr;
  }

  .weather-api .panel-content {
    font-size: 0.35rem;
    padding: 0.1rem 0.25rem 0.1rem 0.2rem;
    gap: 0rem;
  }

  .weather-source {
    margin-top: 0.1rem;
  }
  .weather-display {
    gap: 2rem;
  }

  .weather-icon {
    transform: translateY(8px);
    width: 1rem;
  }

  /* PROJECT VIEW STARTS ===================== PROJECT VIEW STARTS */

  .content-area.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .content-area h2 {
    font-size: 1.2rem;
  }

  .content-area p {
    font-size: 0.75rem;
    text-align: center;
  }

  .project-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .project-images img {
    width: 7rem;
    height: 4.5rem;
    border-radius: 8px;

    object-fit: cover;
  }

  .project-img3 {
    object-position: center top;
  }

  .hotel-images {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  .hotel-images img {
    width: 8rem;
    height: 4.5rem;
  }

  .project-links {
    display: flex;
    gap: 3rem;
  }
  .project-links a {
    border: 2px solid #0d4f8b;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.2rem 1.5rem;
    text-decoration: none;
  }
  /* PROJECT VIEW ENDS ===================== PROJECT VIEW ENDS */
  .boot-exit span {
    font-size: 0.55rem;
  }
  .boot-exit img {
    width: 1.1rem;
  }

  /* CONTACT FORM STARTS 1024px================================== */

  .name-row input {
    width: 100%;
    height: 1rem;
  }
  .contactform textarea {
    flex: 1;
    min-height: 3rem;
  }

  .contactform input,
  .contactform textarea {
    padding: 0.1rem;
  }

  #privacy-note {
    text-align: center;
    font-size: 0.35rem;
    opacity: 0.6;
  }

  .contact-privacy {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.61rem;
  }
  .privacy-policy {
    padding: 0.3rem;
    font-size: 0.5rem;
  }

  .error-message {
    min-height: 0.75rem;
    text-align: center;
    color: #7fc8ff;
    font-size: 0.1rem;
    font-weight: 400;

    margin-top: 0.1rem;

    text-shadow: 0 0 2px rgba(127, 200, 255, 0.2);
  }

  .backToContactForm,
  .contactform button,
  .close-modal {
    width: 25%;

    margin-top: 0rem;

    font-size: 0.5rem;

    letter-spacing: 0.2rem;
    padding: 0.5rem;

    margin-bottom: 0.5rem;
  }
  /* CONTACT FORM ENDS 1024px================================== */
}

/* 1440 x 900 */
@media (min-width: 1440px) {
  .bios-panel {
    width: min(90%, 1440px);
    height: 71vh;
    grid-template-rows: auto auto 4fr 1.5fr;
  }

  .bios-tabs img {
    width: 1.5rem;
  }

  .bios-main {
    grid-template-columns: 0.5fr 2fr;
    letter-spacing: 0.04rem;
    line-height: 1rem;
  }
  .bios-content .content-area {
    padding: 1rem;
  }

  #system-info {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
  }

  .bios-pic {
    max-height: 6.2rem;
  }

  .status-panel .panel-content {
    font-size: 0.6rem;
    padding-left: 0.5rem;
    gap: 0.25rem 3rem;
  }

  .bios-content {
    font-size: 0.8rem;
    letter-spacing: 0.06rem;
    line-height: 1rem;
    padding: 0.5rem;
    height: 100%;
    font-weight: 600;
    overflow: hidden;
  }
  .bios-content .panel-header {
    margin-top: 2rem;
    font-size: 1rem;
  }

  .content-area.contact {
    margin-top: -2rem;
    width: 80%;

    margin-left: auto;
    margin-right: auto;
  }

  .bios-footer {
    grid-template-columns: 1fr 2.95fr 1fr;
  }

  .weather-api .panel-content {
    font-size: 0.52rem;
    padding: 0.5rem;
    gap: 0.2rem;
    margin-top: -0.5rem;
  }

  .weather-source a {
    font-size: 0.5rem;
  }

  .weather-display {
    gap: 3rem;
  }

  .weather-icon {
    width: 1.4rem;
  }

  .boot-exit span {
    font-size: 0.7rem;
  }
  .boot-exit img {
    width: 2rem;
  }

  /* CONTACT FORM STARTS 1440px======================= */
  .name-row {
    gap: 0.8rem;
  }

  .contactform {
    height: 100%;

    padding: 0rem;
  }

  .name-row input {
    width: 100%;
    height: 1.5rem;
  }
  .contactform textarea {
    flex: 1;
    min-height: 3rem;
    height: auto;
  }

  .contactform input,
  .contactform textarea {
    padding: 0.5rem;
  }

  #privacy-note {
    text-align: center;
    font-size: 0.5rem;
    opacity: 0.6;
    margin-bottom: 0.2rem;
  }

  .contact-privacy {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.7rem;
  }
  .privacy-policy {
    padding: 0.3rem;
    font-size: 0.7rem;
  }

  .backToContactForm,
  .contactform button,
  .close-modal {
    width: 35%;

    align-self: center;
    margin-top: 0.2rem;

    border: 2px solid #0d4f8b;
    border-radius: 8px;

    font-size: 0.6rem;

    margin-bottom: 0.2rem;
  }

  .error-message {
    min-height: 0.6rem;

    font-size: 0.5rem;
    font-weight: 700;

    margin-top: 0.1rem;

    text-shadow: 0 0 2px rgba(127, 200, 255, 0.2);
  }

  /* CONTACT FORM ENDS 1440px======================= */

  /* PROJECT VIEW STARTS ===================== PROJECT VIEW STARTS */

  .project-images img {
    width: 12rem;
    height: 9rem;
  }

  .hotel-images img {
    width: 12rem;
    height: 8rem;
  }

  /* PROJECT VIEW ENDS ===================== PROJECT VIEW ENDS */
}

/* 1920-1080 */
@media (min-width: 1920px) {
  .landing-page {
    transform-origin: 52% 50%;
  }

  .bios-panel {
    width: min(90%, 1440px);
    height: 68vh;
  }
  html {
    font-size: 25px;
  }

  #system-info {
    font-size: 0.45rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
  }

  .status-panel .panel-content {
    font-size: 0.55rem;
  }

  .bios-pic {
    max-height: 13.5vh;
  }

  .bios-content .panel-header {
    font-size: 1rem;
  }
  .weather-api .panel-content {
    font-size: 0.5rem;
    gap: 0.1rem;
    margin-top: -0.5rem;
  }

  .weather-source a {
    font-size: 0.45rem;
  }

  .weather-icon {
    width: 1.3rem;
  }

  /* CONTACT FORM STARTS ===================*/

  /* CONTACT FORM STARTS 1440px======================= */
  .content-area.contact {
    height: 95%;
  }

  .name-row {
    gap: 0.8rem;
  }

  .contactform {
    height: 100%;

    padding: 0rem;
  }

  .name-row input {
    width: 100%;
    height: 1.5rem;
  }
  .contactform textarea {
    flex: 1;
    min-height: 2.5rem;
    height: auto;
  }

  .contactform input,
  .contactform textarea {
    padding: 0.5rem;
  }

  #privacy-note {
    text-align: center;
    font-size: 0.5rem;
    opacity: 0.6;
    margin-bottom: 0.2rem;
  }

  .contact-privacy {
    line-height: 0.66rem;
  }
  .privacy-policy {
    padding: 0.3rem;
    font-size: 0.52rem;
  }

  .backToContactForm,
  .contactform button,
  .close-modal {
    width: 30%;

    align-self: center;
    margin-top: 0.2rem;

    border: 2px solid #0d4f8b;
    border-radius: 8px;

    font-size: 0.5rem;

    margin-bottom: 0.2rem;
  }

  /* CONTACT FORM ENDS 1440px======================= */

  /* PROJECT VIEW STARTS ===================== PROJECT VIEW STARTS */

  .content-area.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .content-area h2 {
    font-size: 1.3rem;
  }

  .content-area p {
    font-size: 0.7rem;
    text-align: center;
  }

  .error-message {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0rem;

    text-shadow: 0 0 2px rgba(127, 200, 255, 0.2);
  }

  .content-area p.error-message {
    font-size: 0.5rem;
  }
  #email-error {
    margin-bottom: 0.6rem;
  }

  .project-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .project-images img {
    width: 12rem;
    height: 7.5rem;
    border-radius: 8px;

    object-fit: cover;
  }

  .project-img3 {
    object-position: center top;
  }

  .hotel-images {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  .hotel-images img {
    width: 12rem;
    height: 6.5rem;
  }

  .project-links {
    display: flex;
    gap: 3rem;
  }
  .project-links a {
    font-size: 0.6rem;
    padding: 0.4rem 2rem;
  }

  /* PROJECT VIEW ENDS ===================== PROJECT VIEW ENDS */

  .placeholder-icon {
    width: 3rem;
    filter: brightness(0) invert(1) drop-shadow(0 0 2px #00c2ff);
  }
  .placeholder-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5rem;
    gap: 0.5rem;
    margin-bottom: 3rem;
  }
}

/* /* 2560x1440 */
@media (min-width: 2560px) {
  .landing-page {
    transform-origin: 52% 50%;
  }

  .bios-panel {
    width: min(90%, 1440px);
    height: 72vh;
  }
  html {
    font-size: 25px;
  }

  .status-panel .panel-content {
    font-size: 0.7rem;
  }
  #system-info {
    font-size: 0.65rem;
    font-weight: 400;
  }

  .bios-content {
    height: 100%;
    overflow: hidden;
  }

  .bios-pic {
    max-height: 18vh;
  }

  .bios-content .panel-header {
    font-size: 1rem;
  }

  /* CONTACT FORM STARTS ===================*/

  .content-area.contact {
    height: 95%;
    margin-top: -2rem;
  }
  .contactform textarea {
    flex: 1;
    min-height: 6rem;
    height: auto;
  }

  #email-error {
    margin-bottom: 0.6rem;
  }

  #privacy-note {
    text-align: center;
    font-size: 0.5rem;
    margin-top: 0.5rem;
  }
  .privacy-policy {
    line-height: 0.8rem;
    padding: 0.6rem;
    font-size: 0.65rem;
  }

  .content-area p.error-message {
    font-size: 0.6rem;
  }
  /* CONTACT FORM ENDS===================*/

  /* PROJECT VIEW STARTS ===================== PROJECT VIEW STARTS */

  .content-area.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .content-area h2 {
    font-size: 1.2rem;
  }

  .content-area p {
    font-size: 0.75rem;
    text-align: center;
  }

  .project-images {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .project-images img {
    width: 12rem;
    height: 9rem;
    border-radius: 8px;

    object-fit: cover;
  }

  .project-img3 {
    object-position: center top;
  }

  .hotel-images {
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
  }
  .hotel-images img {
    width: 12rem;
    height: 8rem;
  }

  .project-links {
    display: flex;
    gap: 3rem;
  }
  .project-links a {
    border: 2px solid #0d4f8b;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.4rem 2rem;
    text-decoration: none;
  }

  .weather-api .panel-content {
    font-size: 0.65rem;
    gap: 0.1rem;
    margin-top: -0.5rem;
  }

  .weather-source a {
    font-size: 0.6rem;
  }

  .weather-icon {
    transform: translateY(16px);
    width: 1.7rem;
  }

  /* PROJECT VIEW ENDS ===================== PROJECT VIEW ENDS */
}