body{margin:0;overflow:hidden;font-family:sans-serif}@font-face{font-family:TitleFont;src:url(/assets/font_title.otf) format("opentype")}#menuIcon{width:10%;position:fixed;top:60px;right:60px}#menuOverlay{position:fixed;bottom:-100%;left:0;width:100%;height:80%;transition:bottom .5s ease-in-out;z-index:9;display:flex;flex-direction:column}#menuOverlay.active{bottom:0}.wave{width:100%;overflow:hidden;line-height:0;transform:scaleY(-1) translateY(99px);fill:#e1f1ff}.wave svg{position:relative;display:block;width:calc(200% - 1px);height:100px;animation:waveMove 1s ease-in-out infinite;animation-direction:alternate}@keyframes waveMove{0%{transform:translate(0)}to{transform:translate(-50%)}}#cityNameTitle{position:fixed;top:20px;left:20px;font-weight:100;font-family:TitleFont,sans-serif;color:#0c2340;font-size:50px}.menuContent{height:20%;display:flex;justify-content:center;color:#0c2340}.title{font-weight:700;font-family:TitleFont,sans-serif;color:#0c2340;font-size:50px}.container{display:grid;grid-template-columns:auto auto auto auto;padding:5%;align-items:center;overflow-y:auto}.city_button{background-color:#9cf;color:#0c2340;border-radius:12px;padding:26px 16px;margin:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}.city_button:hover{transform:scale(1.03)}.city_layout{display:flex;width:100%;align-items:center;height:100px}.city_number{flex:1;font-size:48px;font-weight:700;text-align:center}.city_info{flex:4;display:flex;flex-direction:column;justify-content:center;padding-left:10px}.city_name{font-size:40px;font-weight:700}.city_date{font-size:26px;opacity:.8}.watermark{position:fixed;bottom:1%;width:100%;opacity:.6;pointer-events:none}@media only screen and (min-width: 600px) and (max-width: 991px){#menuIcon{width:7%}.city_name{font-size:30px;font-weight:700}.watermark{bottom:1%;width:60%}}@media only screen and (orientation: portrait){#menuIcon{width:12%}.title{font-size:100px}.link_button{height:100px;font-size:30px!important}.container{grid-template-columns:auto auto}.menuContent{height:auto}#cityNameTitle{font-size:4rem;left:10%;top:3%;margin:0}.watermark{bottom:1%;width:100%}}@media only screen and (min-width: 992px){#menuIcon{width:5%}.watermark{width:50%}}@media only screen and (min-width: 992px) and (orientation: portrait){#menuIcon{width:7%}}