/* 小於 770px */
@media (max-width: 770px) {
  h1{font-size: 0.4rem;}
  h2{font-size: 0.3rem;}
  h3{font-size: 0.25rem;}
  .h3-color {font-size: initial;}
  .page-2{display: flex;flex-direction: column;min-height: 100vh;align-items: unset;}
  .ga-text, .wp-text{padding: 20px;margin: 20px;}
  .responsive-demo{height: 100vw;min-width: 100%;}
  .responsive-section {display: flex;gap: unset;margin: 20px;padding: unset;height: auto;min-height: 500px;align-items: center;flex-direction: column;}
  .font-jp{text-align: center;}
  .animated-button{font-size: 32px;}
  .seo-frame {max-width: unset;display: flex;grid-template-columns: repeat(2, 1fr);grid-gap: 20px;justify-items: center;height: unset;align-items: center;flex-direction: column;}
  .coding_frame {
    grid-template:
        "coding-grid" 1fr
        "coding-content" 2fr / 1fr;
    align-items: center;
}
.coding-conten {
  flex-direction: row;
}
.page-2-frame {justify-content: none}
.impact{width: 95vw;padding: 10px;}
.coding-content{gap:10px;}
.img_skillicon_frame_sub {padding: 0px;width: 100%;grid-template-columns: 2fr 1fr 2fr;}
.img_skillicon_frame_sub h1 {padding: 0px;font-size: 60px;}
.img_skillicon_frame_sub h2 {font-size: initial;}
.h1-color{font-size: xx-large;}
.img_skillicon {height: 6vh;min-height: 60px;}
.page-2-design-frame{padding: 5px;}
.page-2-design-content{width: 90vw;}
main{margin-top: 100px;}
}
  /* 770px-1200px */
@media (min-width: 771px) and (max-width: 1200px) {
  .animated-button{font-size: 48px;}

}

/* 小於 1200px */
@media (max-width: 1200px) {
  header{max-width: 770px;}
  .page-2{align-items: center;}
  .page-2-impact {max-width: 1200px;width: 100%;}
  .button{flex-direction: column;}
  .main{text-align: center;}
  .abouttext{padding: 0 20px 0 20px;}

}