@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap);body{margin:0;font-family:"Montserrat",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.button-item{cursor:pointer;width:100px;height:100%;border-radius:5px;align-items:center;border:1px solid #5c3939;min-height:2.5rem;font-size:1rem;font-weight:500;background-color:#f7ede2}.button-item.active{background-color:#f6bd60}.button-item.disable:hover{transition:all .5s ease-in-out;transform:scale(1.05);background-color:#84a59d}.button-wrapper{display:flex;flex-direction:column;align-items:center;margin-top:5px;border-radius:3px;background-color:#f9d79f;padding:1.5rem 1rem;box-shadow:0 4px 10px rgba(209,214,229,.925);border-radius:12px}.button-wrapper h2{margin-top:-.5rem;margin-bottom:.5rem}.button-list{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-gap:5px}.container{height:100%;display:flex;flex-direction:column;align-items:center}html{background-color:#f7ede2}*{box-sizing:border-box}.button-container{width:auto;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:20px;gap:20px;margin-top:2rem;margin-bottom:2rem;animation:bc-anim;animation-delay:.5s;animation-duration:1s;animation-fill-mode:both}@keyframes bc-anim{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.flexbox-container{position:relative;box-shadow:0 4px 20px rgba(157,163,173,.925);width:75%;min-height:55vh;display:flex;flex-direction:row;border-radius:10px;background-color:#f6bd60;align-items:center;margin:0 10px 10px;animation:fc-anim;animation-delay:.5s;animation-duration:1s;animation-fill-mode:both}@keyframes fc-anim{0%{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}.flexbox-container-text{font-size:1.4rem;margin:0;padding:0;font-weight:500;opacity:.7!important;position:absolute;top:.1rem;left:.4rem;animation:fct-anim;animation-delay:.5s;animation-duration:1s;animation-fill-mode:both}@keyframes fct-anim{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.contact-container{position:absolute;display:flex;flex-direction:column;align-items:center;left:0;animation:opacity-anim;animation-delay:.5s;animation-duration:2s;animation-fill-mode:both}.icon-container{display:flex;flex-direction:row}.source-code-button{cursor:pointer;border:3px solid #333;border-radius:10px;background-color:#f7ede2;font-size:20px}.source-code-button:hover{transition:all .2s ease-in-out;transform:scale(1.3)}.icon{width:50px;margin:10px}.icon:hover{transition:all .2s ease-in-out;transform:scale(1.5)}@keyframes opacity-anim{0%{opacity:0}to{opacity:1}}.flexbox-item{position:relative;width:200px;margin:10px;border:3px solid #333;background-color:#f7ede2;border-radius:10px;font-size:100px;display:flex;justify-content:center}.flexbox-item:before{content:"Flexbox Item";font-size:20px;font-weight:700;position:absolute}.flexbox-item:after{position:absolute;color:#000;font-size:25px;font-weight:500;bottom:2%}.flexbox-1{min-height:10vh}.flexbox-1,.flexbox-2{animation:bc-anim;animation-delay:1.5s;animation-duration:1s;animation-fill-mode:both}.flexbox-2{min-height:15vh}.flexbox-3{min-height:20vh;animation:bc-anim;animation-delay:1.5s;animation-duration:1s;animation-fill-mode:both}.flexbox-1:after{content:"1"}.flexbox-2:after{content:"2"}.flexbox-3:after{content:"3"}.axis{position:absolute;opacity:.6}.cross-axis{left:50%;transform:translateX(-50%);width:3px;height:100%;background-color:#000}.main-axis{top:50%;transform:translateY(-50%);height:3px;width:100%;background-color:#000}.axis:after{position:absolute;right:10px;bottom:10px;font-size:2em}.main-axis:after{position:absolute;content:"Main Axis";color:#000}.cross-axis:after{white-space:nowrap;content:"Cross Axis";-ms-writing-mode:tb-rl;writing-mode:vertical-rl;transform:rotate(180deg);color:#000}
/*# sourceMappingURL=main.d9fdf735.chunk.css.map */