* {
    box-sizing: border-box;
}

@font-face {
    font-family: Hachi Maru Pop;
    src: url(/fonts/hachimarupop.ttf);
}

:root {
    --darkest: #4b1a50;
    --dark: #781443;
    --medium: #DC5C42;
    --light: #f7af44;
    --lightest: #FFE79C;
    --medium-tr: #DC5C4245;
    --light-tr: #f7af4445;
    --lightest-tr: #FFE79C45;
}

body, html {
    background: var(--light);
    color: var(--medium);
    font-family: MS PGothic, sans-serif;
    font-size: 20px;
}
main {
    width: 890px;
    height: fit-content;
    margin: auto;
    background: white;
    padding: 15px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    background: linear-gradient(white, var(--lightest), white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Hachi Maru Pop;
    margin-top: 0;
    margin-bottom: 5px;
    filter: drop-shadow(1.5px 1.5px 0 white) drop-shadow(1.5px -1.5px 0 white) drop-shadow(-1.5px 1.5px 0 white) drop-shadow(-1.5px -1.5px 0 white) drop-shadow(3px 3px 2px var(--light))
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

header {
    width: 100%;
    background: linear-gradient(white, var(--lightest), var(--light));
    padding: 15px;
    padding-top: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: solid 1px var(--light);
    border-top: solid 1px #ffffff00;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.button-div {
    display: flex;
    gap: 15px;
}
a.button-link button {
    width: 100%;
    border-radius: 15px;
    border: solid 1px white;
    background: linear-gradient(var(--light),var(--medium));
    padding: 5px;
    padding-top: 0;
    color: var(--lightest);
    font-family: MS PGothic, sans-serif;
    font-size: 25px;
    font-family: Hachi Maru Pop;
}

.title {
    display: flex;
    gap: 15px;
    align-items: end;
}

a.button-link {
    width: 100%;
}

a.button-link button:hover {
    background: linear-gradient(var(--medium), var(--dark));
    cursor: pointer;
}

#nanoha-full {
    width: 420px;
        align-self: center;
    justify-self: center;
    filter: drop-shadow(1.5px 1.5px 0 white) drop-shadow(1.5px -1.5px 0 white) drop-shadow(-1.5px 1.5px 0 white) drop-shadow(-1.5px -1.5px 0 white) drop-shadow(3px 3px 2px var(--light))
}

.main-body {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.description {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.desc-section-quote {
    background-color: #ffffff80;
opacity: 1;
background-image: linear-gradient(0deg, var(--light-tr) 50%, var(--medium-tr) 50%);
background-size: 3px 3px;
border: 1px solid var(--medium);
border-radius: 20px;
    padding: 15px;
}

.desc-section, .demo {
    width: 420px;
    align-self: center;
    justify-self: center;
    background-color: #ffffff80;
opacity: 1;
background-image: linear-gradient(0deg, var(--lightest-tr) 50%, var(--light-tr) 50%);
background-size: 3px 3px;
border: 1px solid var(--light);
border-radius: 20px;
    padding: 15px;
}

.demo {
    width: 100%;
}

a i.fa-solid {
    color: var(--medium);
    font-size: 30px;
}

a i.fa-solid:hover {
    color: var(--dark);
}



.phoneme-sets-5 {
    display: grid;
    grid-template-columns: 140px 140px 140px 140px 140px;
    width: 60%;
}

.phoneme-sets-4 {
    display: grid;
    grid-template-columns: 140px 140px 140px 140px;
    width: 60%;
}

.phoneme-sets-3 {
    display: grid;
    grid-template-columns: 140px 140px 140px;
    width: 60%;
}

.phoneme-sets-2 {
    display: grid;
    grid-template-columns: 200px 200px;
    width: 60%;
}