*{padding:0;margin:0;box-sizing:border-box;font-family:"Noto Sans TC",sans-serif}h1,h2,h3,h4,h5,h6{font-weight:400;color:#515151}header{display:flex;align-items:center;flex-wrap:wrap;position:sticky;top:0;z-index:4;background-color:#fff;transition:all .5s ease}header div.logo{display:flex;align-items:center;flex:5 1 400px;margin-left:2rem}header div.logo img{width:3.5vw;height:3.5vw}header div.logo h2{color:#515151}header nav{flex:2 1 400px}header nav ul{display:flex;list-style-type:none;justify-content:space-around}header nav ul li a{color:#09777d;text-decoration:none;font-size:1rem}header nav ul li a:hover{color:#042e2b}main section.backimage{min-height:90vh;width:100%;background-image:url(/hawaii_project/pictures/6c0c473ddcb63da737fe2a84e71a469d840892c9/pexels-photo-416676.jpeg);background-size:cover;background-position:center;position:relative;z-index:0;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}main section.backimage h3{font-size:3rem;color:#fff;margin:2rem 0;font-weight:700}main section.backimage button.start{background-color:#2f9992;padding:.75rem 2rem;font-size:1.25rem;color:#fff;border:none;border-radius:1rem;cursor:pointer}main section.backimage button.start:hover{background-color:#042e2b}main section.backimage div.filter{background-color:rgba(0,0,0,.2);width:100%;min-height:90vh;position:absolute;top:0;z-index:-1}main section.second{display:flex;flex-direction:column;align-items:center;text-align:center}main section.second h2{font-size:1.5rem;margin:3rem 0 -2rem 0;font-weight:700}main section.second section.cards{display:flex;width:80%;min-height:70vh;flex-wrap:wrap}main section.second section.cards div.card{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:4rem;flex:1 1 300px}main section.second section.cards div.card div.image-container{overflow:hidden;width:15vw;height:15vw;border-radius:50%}main section.second section.cards div.card div.image-container img{width:15vw;height:15vw;border-radius:50%;transition:all .2s}main section.second section.cards div.card div.image-container img:hover{transform:scale(1.2)}main section.second section.cards div.card h4{margin:1rem 0;font-size:1.5rem}main section.second section.cards div.card a{margin:1rem 0;text-decoration:none;padding:1rem 1.5rem;background-color:#09777d;color:#fff;font-size:1.25rem;border-radius:15px}main section.second section.cards div.card a:hover{background-color:#042e2b}section.intro{display:flex;justify-content:center;align-items:center;background-color:#7ccec5}section.intro img{height:20vw;width:35vw}section.intro div.intror{display:flex;flex-direction:column;justify-content:center;color:#fff;margin:3rem}section.intro div.intror h3{color:#042e2b;font-size:1.5rem;font-weight:700}section.intro div.intror p{margin:1rem 0 1rem 0;color:#070707}section.intro div.intror a{text-align:center;text-decoration:none;padding:1rem 1.5rem;background-color:#09777d;color:#fff;font-size:1.25rem;border-radius:5rem;width:400px;cursor:pointer}section.intro div.intror a:hover{background-color:#042e2b}footer{display:flex;flex-direction:column;align-items:center;min-height:40vh;justify-content:space-around;background-color:#09777d}footer div.logo{display:flex;align-items:center;color:#fff}footer div.logo img{width:4vw;height:4vw}footer div.logo h3{color:#fff}footer nav{width:30%}footer nav ul{display:flex;list-style-type:none;width:100%;justify-content:space-around;flex-wrap:wrap}footer nav ul li{flex-basis:100px;text-align:center}footer nav ul li a{color:#fff;text-decoration:none;font-size:1rem;font-weight:600}footer nav ul li a:hover{color:#042e2b}footer section.links a{margin:0 1rem}footer section.links a img{filter:brightness(100);width:2vw;height:2vw}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#09777d}@media screen and (max-width:1200px){section.intro{display:flex;justify-content:center;align-items:center}section.intro img{height:30vw;width:50vw}}@media screen and (max-width:750px){main section.second section.cards div.card img{width:40vw;height:40vw}main section.intro{display:flex;flex-direction:column}main section.backimage{min-height:60vh}main section.backimage div.filter{min-height:60vh}}@media screen and (max-width:550px){header div.logo{margin-left:.5rem}header div.logo img{width:15vw;height:15vw}footer div.logo img{width:10vw;height:10vw}footer section.links a img{width:5vw;height:5vw}}