@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&display=swap");
section:where(#msf) { --color1: #FFFCE8; --color2: #6DBCC8; --color3: #E23C3B; --color4: #122E5D; --color5: #2A8194; --color6: #F49986; --color7: #93D3E5; --color8: #FFE783; color: var(--color4); font-size: 16px; font-weight: 500; font-style: normal; font-family: "Kiwi Maru", serif; text-decoration: none; line-height: 1.5; overflow-x: clip; width: 100%; }

section:where(#msf) * { color: var(--color, inherit); font-size: var(--fs, 1em); font-weight: var(--fw, inherit); font-style: inherit; font-family: inherit; text-decoration: inherit; line-height: inherit; display: block; margin: 0; padding: 0; }

section:where(#msf) a:hover { color: inherit; }

section:where(#msf) a:is(:hover, :active) img { filter: none; }

section:where(#msf) ul, section:where(#msf) ol { list-style: none; }

wbr { display: initial; }

.wbr { white-space: pre-wrap; overflow-wrap: break-word; word-break: keep-all; }

.nobr { white-space: nowrap; }

.all-revert { all: revert; }

.sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }

.pi { padding-inline: 1em; }

.pb { padding-block: 4em; }

.msf-title { font-size: 2em; background-color: var(--color6); color: white; text-align: center; padding: 0.5em 16px; }

#msf-catch { width: 100%; height: fit-content; }

#msf-catch img { width: 100%; }

#msf-head { background-color: var(--color1); background-image: url(../../images/event/memuroSummerFes2025/noise.webp), linear-gradient(175deg,rgb(from #00ffff r g b / 5%),rgb(from #ffff00 r g b / 3%), rgb(from #ff00ff r g b / 1.5%)); background-size: 500px 275px, 100% 100%; background-repeat: repeat, no-repeat; background-position: center top; }

#msf-h1 { font-size: 2em; color: var(--color3); border: solid 2.5px; width: min(100%, 760px); text-align: center; padding-block: 0.25em; border-radius: 10px; background-color: white; }

#msf-summary { display: flex; justify-content: center; gap: 2em 4em; flex-direction: column; align-items: center; }

#msf-summary > div { display: flex; flex-direction: column; align-items: center; }

#msf-summary dt > * { background-color: var(--color5); color: white; width: fit-content; font-size: 1.25em; padding: 0.125em 0.75em; border-radius: 10px; }

#msf-summary dd > * { text-align: center; }

#msf-sns { border: dashed 2.5px var(--color2); border-radius: 10px; padding: 1em 2em; width: min(100%,360px); display: flex; flex-direction: column; align-items: center; background-color: white; }

#msf-sns > :not(a) { background-color: var(--color5); color: white; width: fit-content; font-size: 1.25em; padding: 0.125em 0.75em; border-radius: 10px; }

#msf-sns img { border-radius: 10px; width: 5em; height: auto; }

#msf-poster { display: flex; justify-content: center; }

#msf-poster a { width: min(100%, 450px); }

#msf-poster a::after { content: none; }

#msf-poster img { width: 100%; height: auto; }

#msf-map { width: 100%; height: auto; aspect-ratio: 4/3; }

#msf-details { background-color: var(--color7); background-image: url(../../images/event/memuroSummerFes2025/maturi.webp); background-size: 750px auto; background-repeat: repeat; background-position: center -50px; border-style: solid none; border-width: 2.5px; border-color: white; position: relative; }

#msf-details::before { content: ""; position: absolute; inset: 0; background-color: rgb(from white r g b / 25%); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }

#msf-details > * { position: relative; }

#msf-anchor { display: flex; gap: 2em; flex-direction: column; justify-content: center; align-items: center; }

#msf-anchor a { width: min(350px,100%); background-color: var(--color8); position: relative; display: flex; justify-content: center; align-items: center; font-size: 1.5em; padding-block: 0.5em; }

#msf-anchor svg { fill: currentColor; height: 1em; width: auto; position: absolute; right: 0.5em; }

.msf-box { background-color: var(--color1); border-radius: 10px; overflow: clip; }

.msf-box > :not(.msf-boxTitle) { padding: 2em 1em; }

.msf-boxTitle { font-size: 1.5em; text-align: center; background-color: var(--color5); color: white; width: 100%; padding: 0.5em 16px; }

#msf-schedule > :not(.msf-boxTitle) { display: flex; justify-content: center; }

#msf-schedule img { width: min(350px,100%); height: auto; }

#msf-boxDouble { display: grid; gap: 4em 2em; grid-template-columns: 1fr; }

#msf-boxDouble .msf-box { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; }

#msf-boxDouble .msf-box > :not(.msf-boxTitle) { gap: 1em; height: 100%; flex-direction: column; justify-content: space-between; grid-template-columns: 1fr 1fr; display: flex; }

#msf-boxDouble .msf-box > :not(.msf-boxTitle) ul { display: flex; gap: 0.5em 1em; flex-direction: row; justify-content: start; flex-wrap: wrap; }

#msf-boxDouble .msf-box > :not(.msf-boxTitle) li { display: flex; }

#msf-boxDouble .msf-box > :not(.msf-boxTitle) li::before { content: var(--content, "●"); flex-shrink: 0; }

#msf-boxDouble .msf-box > :not(.msf-boxTitle) img { width: 100%; height: auto; object-fit: cover; border-radius: 10px; grid-row: 1/2; aspect-ratio: 4/3; }

#msf-event > :not(.msf-boxTitle) { display: grid; gap: 1em 2em; grid-template-columns: 1fr; }

#msf-event > :not(.msf-boxTitle) > div { display: flex; justify-content: center; }

#msf-event > :not(.msf-boxTitle) ul { display: flex; flex-direction: column; justify-content: space-between; gap: 1em; }

#msf-event > :not(.msf-boxTitle) li > :not(p) { display: flex; }

#msf-event > :not(.msf-boxTitle) li > :not(p)::before { content: "●"; flex-shrink: 0; }

#msf-event img { width: 100%; }

#msf-gallery { background-color: var(--color1); background-image: url(../../images/event/memuroSummerFes2025/noise.webp); background-size: 500px 275px; background-repeat: repeat; background-position: center top; display: grid; gap: 2em; grid-template-columns: 1fr; }

#msf-gallery img { width: 100%; border-radius: 10px; }

#msf-foot { display: flex; flex-direction: column; align-items: center; background-color: var(--color5); color: white; }

#msf-foot img { width: min(240px,100%); }

@media (any-hover: hover) { section:where(#msf) a:where(:not(.notchenge-scale)) { transition-property: scale; transition-duration: 0.25s; transition-timing-function: ease; }
  section:where(#msf) a:where(:not(.notchenge-scale)):hover { scale: var(--scale, 1.1); } }

@media (min-width: 800px) { .pi { padding-inline: max(2em, calc((100% - 1250px) / 2)); } #msf-summary { flex-direction: row; align-items: start; } #msf-summary > div { align-items: start; } #msf-summary dd > * { text-align: start; } #msf-map { aspect-ratio: 16/9; } #msf-anchor { flex-direction: row; } .msf-box > :not(.msf-boxTitle) { padding: 2em; } #msf-schedule img { width: min(1100px,100%); } #msf-boxDouble { grid-template-rows: auto 1fr; grid-template-columns: 1fr 1fr; } #msf-boxDouble .msf-box > :not(.msf-boxTitle) img { grid-row: auto; } #msf-event > :not(.msf-boxTitle) { grid-template-columns: 1fr 1fr; } #msf-gallery { grid-template-columns: 1fr 1fr; } }

@media (min-width: 600px) { #msf-boxDouble .msf-box > :not(.msf-boxTitle) { display: grid; } #msf-boxDouble .msf-box > :not(.msf-boxTitle) ul { flex-direction: column; justify-content: space-between; flex-wrap: nowrap; } }

@media (min-width: 600px) and (min-width: 800px) { #msf-boxDouble .msf-box > :not(.msf-boxTitle) { display: flex; } #msf-boxDouble .msf-box > :not(.msf-boxTitle) ul { flex-direction: row; justify-content: start; flex-wrap: wrap; } }

@media (min-width: 600px) and (min-width: 800px) and (min-width: 1100px) { #msf-boxDouble .msf-box > :not(.msf-boxTitle) { grid-template-columns: 3fr 2fr; display: grid; } #msf-boxDouble .msf-box > :not(.msf-boxTitle) ul { flex-direction: column; justify-content: space-between; flex-wrap: nowrap; } }

@media (min-width: 800px) and (min-width: 1100px) { #msf-boxDouble .msf-box > :not(.msf-boxTitle) img { aspect-ratio: 1/1; } }