Something went wrong. Try again.
webbed site
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189/* maple-mono-latin-400-normal */@font-face { font-family: "Maple Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff2) format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/maple-mono@latest/latin-400-normal.woff) format("woff");}
:root { --main-bg: #4968f3; --text-color: #ff9cd9; --shadow-color: #223cb3; --button-bg: #ff9cd9; --button-text-color: #2a0a1e; --footer-link-color: #ff8a4d;}
body { display: flex; flex-direction: column; min-height: 100dvh; box-sizing: border-box; padding-left: 16px; padding-right: 16px; margin: 0; text-align: center; padding-top: 40px; padding-bottom: 12px; background-color: var(--main-bg); color: var(--text-color); font-family: "Maple Mono", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif; text-shadow: 3px 3px 0 var(--shadow-color);}
footer { display: flex; flex-direction: column; margin: 1rem; text-shadow: 0px 0px;}
footer a { all: unset; color: var(--footer-link-color);}
footer p { margin: 0;}
@keyframes wobble { from { transform: rotateZ(-3deg); } to { transform: rotateZ(3deg); }}
h3 { transform-origin: bottom; animation: wobble 2s alternate infinite;}
a { display: inline-block; text-decoration: none; background-color: var(--button-bg); padding: 10px 10px; border-radius: 30px; color: var(--button-text-color); box-shadow: 4px 6px 0 var(--shadow-color); text-shadow: 0 0 0; cursor: pointer;}
.links-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 15px; padding-top: 15px;}
.links-container a { transition: box-shadow 0.3s, transform 0.3s;}
.links-container a:hover { box-shadow: 3px 4px 0 var(--shadow-color); transform: translateY(1px); transition: box-shadow 0.1s, transform 0.1s;}
.links-container a:active { box-shadow: 0px 0px 0 var(--shadow-color); transform: translateY(2px); transition: box-shadow 0.05s, transform 0.05s;}
.cute-break { text-align: center; font-size: 2rem; margin-top: 1rem; margin-bottom: 1rem; overflow: hidden; max-width: 100%;}
.projects-container { display: flex; flex-direction: column; gap: 16px; margin-inline: auto; max-width: 400px;}
.project-name { display: flex; justify-content: space-between; align-items: center; font-size: 1.5rem;}
.project-desc { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 4px; flex-wrap: wrap;}
.lang-tags { display: flex; gap: 4px;}
.lang-tag { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.1);}
.project-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; text-align: left; background-color: var(--card-bg, var(--button-bg)); color: var(--card-text, var(--button-text-color)); box-shadow: 4px 6px 0 var(--card-shadow, var(--shadow-color)); transition: transform 0.3s, box-shadow 0.3s;}
.project-card:hover { box-shadow: 3px 4px 0 var(--card-shadow, var(--shadow-color)); transform: translateY(1px); transition: box-shadow 0.1s, transform 0.1s;}
.project-card:active { box-shadow: 0px 0px 0 var(--card-shadow, var(--shadow-color)); transform: translateY(2px); transition: box-shadow 0.05s, transform 0.05s;}