.material-icons.clickable{cursor:pointer;transition:.2s ease}.material-icons.clickable:hover{transform:scale(1.1)}.material-icons.clickable:active{transform:scale(.9)}.button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:120px;flex-direction:column;font-size:16px;padding:8px 16px;border-style:solid;border-width:4px;transition:.2s ease;cursor:pointer}.button,.button .label{display:flex;justify-content:center;align-items:center}.button .label{flex-direction:row}.button-icon{margin-right:4px;transition:.1s ease}.button.nav-link,.button.text{text-transform:uppercase;border:none}.button.nav-link{width:115px;min-width:auto;text-decoration:none}.button.nav-link .active-indicator{width:calc(100% + 24px);height:4px;margin-top:2px;transition:.4s ease;transform:scaleX(0);-webkit-filter:opacity(0);filter:opacity(0)}.button.nav-link.active .active-indicator{transform:scaleX(1);-webkit-filter:opacity(1);filter:opacity(1)}.button.icon{width:40px;height:40px;min-width:auto;padding:0;border:none}.button.icon .button-icon{margin-right:0}.button.icon:hover{transform:translateY(0)}.button.icon:active{transform:translateY(4px)}.button:hover{transform:translateY(-4px)}.button:active{transform:translateY(2px)}.image-loader{width:100%;height:100%}.image-loader .image-loader-loading{display:flex;flex-direction:column;justify-content:center;align-items:center}.image-loader img{animation:image-load 1s ease forwards;-webkit-filter:opacity(0) blur(10px) grayscale(1);filter:opacity(0) blur(10px) grayscale(1)}@keyframes image-load{0%{-webkit-filter:opacity(0) blur(10px) grayscale(1);filter:opacity(0) blur(10px) grayscale(1)}to{-webkit-filter:opacity(1) blur(0) grayscale(0);filter:opacity(1) blur(0) grayscale(0)}}.card{display:flex;flex-direction:column;align-items:center;max-width:266px;height:475px;padding:16px;border-width:4px;border-style:solid}.card .card-image-container{width:100%;height:100%}.card .card-image-container .card-image{width:225px;margin-bottom:24px}.card .card-title{display:flex;width:100%;justify-content:space-between;align-items:center;padding:0 8px;margin-top:20px}.card .card-title .title{display:flex;font-size:20px;flex-direction:column;justify-content:center}.card .card-title .card-icon{margin-top:4px}.card .card-title .card-icon .button-icon{font-size:32px}.card.image-only{width:auto;max-width:none;height:auto;padding:0}.card.image-only .card-image{width:auto;height:400px;margin-bottom:0}.card.clickable{cursor:pointer}.home,.home .home-main{display:flex;height:100%;align-items:center}.home .home-main{width:100%;position:relative;flex-direction:column}.home .home-main .title-selector{align-self:flex-start;margin-left:20px}.home .home-main .loader-box{width:40%;align-self:center}.home .image-slider{height:100%;width:100%;display:grid;grid-template-columns:repeat(auto-fill,280px);grid-gap:4px;justify-content:space-between;margin-bottom:120px;padding-top:40px;overflow-y:auto}.home .image-slider:after{content:"";flex:auto}.home .image-slider .home-image-card{width:275px;height:410px;transition:.6s ease-in-out;transform:translateY(-24px);margin-bottom:20px}.home .image-slider .home-image-card .card-image-container{width:100%;height:100%}.home .image-slider .home-image-card .card-image-container .card-image{width:100%;height:100%;object-fit:cover}@media only screen and (max-width:620px){.home .home-main .title-selector{align-self:center;margin-left:0}.home .home-main .title-selector .dropdown-title{font-size:24px}.home .home-main .title-selector .dropdown-icon{margin-left:0;font-size:32px}.home .home-main .dropdown-options{align-items:center}.home .home-main .dropdown-options .dropdown-title{margin-bottom:12px}.home .home-main .dropdown-options .dropdown-item{font-size:24px}.home .home-main .dropdown-options .dropdown-icon{display:none}.home .home-main .image-slider{justify-content:center}}.header{font-size:32px}.title-selector{display:flex;align-items:center;transition:.2s ease;cursor:pointer}.title-selector .dropdown-title{font-size:48px;text-transform:uppercase}.title-selector .dropdown-icon{font-size:48px;margin-top:4px;margin-left:8px;transition:.2s ease}.title-selector.expanded .dropdown-icon{transform:rotate(180deg)}.title-selector:hover{transform:translateY(-2px) scale(1.05)}.title-selector:active{transform:translateY(2px) scale(.95)}.dropdown-options{display:flex;flex-direction:column;position:absolute;padding:10px 20px 12px;-webkit-filter:opacity(0);filter:opacity(0);z-index:10;transition:.4s ease;visibility:hidden}.dropdown-options .title-selector{align-self:flex-start;text-align:start;margin-left:0!important}.dropdown-options .dropdown-item{text-transform:uppercase;margin-bottom:16px;cursor:pointer;transition:.2s ease}.dropdown-options .dropdown-item:hover{transform:translateY(-2px)}.dropdown-options .dropdown-item:active{transform:translateY(2px)}.dropdown-options.expanded{-webkit-filter:opacity(1);filter:opacity(1);visibility:visible}.about{display:flex;height:100%;align-items:flex-start}.about .about-main{display:flex;width:100%;position:relative;justify-content:center;align-items:center;margin-top:40px}.about .about-main .about-me-card{width:90%;max-width:1400px;display:flex;align-items:center;padding:60px}.about .about-main .about-me-card .about-image{max-width:300px;margin-right:24px;border-radius:1000px;object-fit:cover}.about .about-main .about-me-card .about-text-container{width:100%;display:flex;flex-direction:column}.about .about-main .about-me-card .about-text-container .about-text{font-size:clamp(16px,2vw,24px);margin-left:24px}.about .about-main .about-me-card .about-text-container .contact-text{max-width:300px;display:flex;justify-content:space-between;margin-top:24px;margin-left:24px}.about .about-main .loader-box{width:40%;align-self:center;margin:0 auto}@media only screen and (max-width:875px){.about{overflow-y:auto}.about .about-main{margin-top:20px}.about .about-main .about-me-card{width:100%;flex-direction:column;overflow-y:auto;padding:40px 24px 20px}.about .about-main .about-me-card .about-image{max-width:80%;max-height:150px;margin:0 16px 20px}.about .about-main .about-me-card .about-text-container .about-text{text-align:center;margin:0 0 16px}.about .about-main .about-me-card .about-text-container .contact-text{width:280px;align-self:center;margin:0}}.storybook{display:flex;flex-direction:column}.storybook .section{display:flex;align-items:center;margin-bottom:18px}.storybook .section.buttons .button{margin-right:12px}.storybook .section.cards .card{margin-right:24px}.nav-bar{display:grid;grid-template-columns:260px 40px 1fr 250px;align-items:center;padding:20px 0;margin-bottom:12px}.nav-bar .theme-toggle{align-self:center;justify-self:center;padding:4px;margin-top:2px;border-radius:100px}.nav-bar .nav-links{display:flex;align-items:center;justify-content:space-between}@media only screen and (max-width:600px){.nav-bar{grid-template-columns:260px 1fr;grid-template-rows:1fr 1fr;padding:20px 0 0;margin-bottom:0}.nav-bar .theme-toggle{justify-self:flex-end}.nav-bar .spacer{display:none}.nav-bar .nav-links{grid-column:span 2;justify-content:space-around}}.logo{height:100%;display:grid;grid-template-rows:1fr;grid-template-columns:1fr 3fr;align-items:center;text-transform:uppercase;cursor:pointer}.logo .letters{font-size:48px;margin-right:8px}.logo .title{display:flex;flex-direction:column;justify-content:center;margin-top:2px}.logo .title .line.first{letter-spacing:0}.logo .title .line.second{letter-spacing:3.5px}body{margin:0}#root *{box-sizing:border-box}.app{display:flex;position:relative;width:100vw;height:100vh;flex-direction:column;padding:0 20px 20px;overflow:hidden}*{transition:background-color .2s,color .2s;transition-timing-function:ease}#root .app.light-theme{font-family:"Nunito Sans",sans-serif;font-weight:300;color:#100f22;background-color:#fff}#root .app.light-theme .button.action{color:#fff;background-color:#100f22;border-color:#100f22}#root .app.light-theme .button.outlined{color:#100f22;background-color:transparent;border-color:#100f22}#root .app.light-theme .button.nav-link,#root .app.light-theme .button.text{font-family:"Noto Serif JP",serif;color:#100f22;border-color:transparent}#root .app.light-theme .button.nav-link .active-indicator{background-color:#100f22}#root .app.light-theme .button.icon{border-color:transparent}#root .app.light-theme .button.icon:hover{color:#fff;background-color:#100f22}#root .app.light-theme .loader path.loader-fill{fill:#100f22}#root .app.light-theme .logo{font-family:"Noto Serif JP",serif;font-weight:600}#root .app.light-theme .card{border-color:#100f22}#root .app.light-theme .card .card-title .title,#root .app.light-theme .header{font-family:"Noto Serif JP",serif;color:#100f22}#root .app.light-theme .header{font-weight:600}#root .app.light-theme .theme-toggle{border:2px solid #100f22}#root .app.light-theme .dropdown-options.expanded{background-color:#fff;border:2px solid #100f22}#root .app.light-theme .about .about-me-card,#root .app.light-theme .about .about-me-card .about-image{border:4px solid #100f22}#root .app.light-theme .albums:after{background-image:linear-gradient(90deg,transparent,#fff 90%,#fff)}#root .app.dark-theme{font-family:"Nunito Sans",sans-serif;font-weight:300;color:#fff;background-color:#100f22}#root .app.dark-theme .button.action{color:#100f22;background-color:#fff;border-color:#fff}#root .app.dark-theme .button.outlined{color:#fff;background-color:transparent;border-color:#fff}#root .app.dark-theme .button.nav-link,#root .app.dark-theme .button.text{font-family:"Noto Serif JP",serif;color:#fff;border-color:transparent}#root .app.dark-theme .button.nav-link .active-indicator{background-color:#fff}#root .app.dark-theme .button.icon{border-color:transparent}#root .app.dark-theme .button.icon:hover{color:#100f22;background-color:#fff}#root .app.dark-theme .loader path.loader-fill{fill:#fff}#root .app.dark-theme .logo{font-family:"Noto Serif JP",serif;font-weight:600}#root .app.dark-theme .card{border-color:#fff}#root .app.dark-theme .card .card-title .title,#root .app.dark-theme .header{font-family:"Noto Serif JP",serif;color:#fff}#root .app.dark-theme .header{font-weight:600}#root .app.dark-theme .theme-toggle{border:2px solid #fff}#root .app.dark-theme .dropdown-options.expanded{background-color:#100f22;border:2px solid #fff}#root .app.dark-theme .about .about-me-card,#root .app.dark-theme .about .about-me-card .about-image{border:4px solid #fff}#root .app.dark-theme .albums:after{background-image:linear-gradient(90deg,transparent,#100f22 90%,#100f22)}
/*# sourceMappingURL=main.45bae0ee.chunk.css.map */