@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Cormorant+SC:wght@300;400;500;600;700&family=Coustard:wght@400;900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Patua+One&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rock+Salt&display=swap');

* {
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
box-sizing: border-box;
}

a {
color: black;
}

p, table * {
font-weight: 300;
}

html, body {
background: #fff7e0;
height: 100%;
}

body {
padding: 0px;
padding-left: 95px;
}

#currently-selected-nav-item {
border: 2px solid #282828;
background: #e3e3e3;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Patua One', serif;
font-weight: 100;
width: 100%;
margin-top: 16px;
}

h1, h2 {
text-align: center;
}

a {
text-decoration: none;
}

h1 {
font-size: 40px;
}

h2 {
font-size: 32px;
margin-top: 32px;
}

h3 {
font-size: 24px;
margin-top: 32px;
}

.dialogue-image {
width: 100%;
border-radius: 16px;
margin-top: 32px;
border: 2px solid #282828;
}

nav {
width: 95px;
height: 100%;
left: 0;
background: white;
border-right: 3px solid #282828;
padding: 16px;

display: flex;
flex-flow: column;
align-items: center;
position: fixed;

transition: 0.4s ease;
}

nav ul {
margin-top: 20px;
}

nav ul,
nav ul li,
nav ul li a {
width: 100%;
color: #282828;
}

nav ul li,
nav ul li a {
text-decoration: none;
list-style-type: none;
display: flex;
justify-content: center;
align-items: center;
}

nav ul li a {
width: 100%;
height: 60px;
aspect-ratio: 1 / 1;
border-radius: 60px;
border: 2px solid transparent;

font-size: 0px;

font-family: 'Patua One', serif;
justify-content: flex-start;

display: flex;
justify-content: center;
align-items: center;

margin-top: 6px;
transition: 0.4s ease;
}

#logo {
width: 100%;
height: 50px;

display: flex;
justify-content: flex-start;
align-items: center;

font-family: 'Patua One', serif;
color: #282828;
font-size: 0px;
transition: 0.4s ease;
}

#b-logo {
display: flex;
align-items: center;
font-size: 36px;
font-family: 'Patua One', serif;
color: #282828;
}

#logo-container {
display: flex;
}

#logo:hover {
cursor: pointer;
}

#hamburger-menu-logo {
display: none;
font-size: 36px;
font-family: 'Patua One', serif;
color: #282828;
margin-top: 40px;
}

#hamburger-button,
#exit-hamburger-button {
width: 60px;
height: 60px;
background: white;
border: 2px solid #282828;
border-radius: 60px;
position: fixed;
top: 16px;
left: 16px;
box-shadow: 3px 3px 0px #000;

display: none;
justify-content: center;
align-items: center;
font-size: 32px;
font-family: 'Noto Sans';
font-weight: 100;
}

#exit-hamburger-button {
background: #e3e3e3;
position: relative;
top: 12px;
left: 0;
font-size: 20px;
display: none;
}














.button {
height: 52px;
text-decoration: none;
border-radius: 60px;
border: 2px solid #282828;
background: rgba(227, 227, 227, 0.5);
width: fit-content;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 16px;
font-size: 16px;
font-weight: 500;
box-shadow: 3px 3px 0px #000;
}

.button:hover {
cursor: pointer;
}




















table, tr {
width: 100%;
}

table {
margin-top: 16px;
}

td {
height: 28px;
width: 50%;
}

.dialogue-table tr td:first-child {
width: 10%;
}

.wordlist {
border-collapse: collapse;
}

.wordlist td {
border: 1px solid black;
text-align: center;
}

.play-audio:hover {
font-weight: bold;
cursor: pointer;
}










#yaru-explanation {
margin-top: 24px;
}

#yaru-explanation:hover {
font-weight: 500;
}

.raiserupper {
transition: 0.4s ease;
}

.raiserupper:hover {
cursor: pointer;
transform: translateY(-8px);
}

.raiserupperabit {
transition: 0.4s ease;
}

.raiserupperabit:hover {
transform: translateY(-4px);
}

.lesson-content {
width: 100%;
max-width: 800px;
padding: 52px;
display: flex;
flex-flow: column;
}

#lesson-container {
display: flex;
justify-content: center;
width: 100%;
padding-bottom: 40px;
}

#lesson-container p {
line-height: 36px;
margin-top: 16px;
font-size: 16px;
}

#practice-button-container {
width: 100%;
display: flex;
justify-content: center;
}

#practice-button {
margin-top: 32px;
height: 72px;
width: 200px;
font-size: 20px;
}

@media (min-width: 600px) {

nav {
    display: flex;
}

nav:hover {
    width: 280px;
}

nav:hover #logo {
    font-size: 36px;
}

nav:hover ul li a {
    font-size: 22px;
    justify-content: flex-start;
    padding-left: 16px;
}

nav:hover ul li a img {
    margin: 8px;
}

nav ul li a:hover {
    border: 2px solid #282828;
    background: #e3e3e3;
}
}


@media (max-width: 600px) {

#hamburger-button {
    display: flex;
}

h1 {
    margin-top: 52px;
}

body {
    padding: 0px;
}

nav {
    width: 100vw;
    height: 100vh;
    position: fixed;
    border: none;
    overflow-y: auto;
    display: none;
}

nav > a {
    width: 100%;
    display: flex;
    justify-content: center;
}

#b-logo,
#logo {
    display: none;
}

#hamburger-menu-logo {
    display: block;
}

nav ul li a {
    height: 60px;
    margin: 4px;
    border-radius: 40px;
    border: 2px solid transparent;

    font-size: 22px;

    font-family: 'Patua One', serif;
    justify-content: flex-start;
    padding: 4px;
    padding-left: 16px;
    gap: 16px;
}

.lesson-content {
    padding: 32px;
}

#exit-hamburger-button {
    display: flex;
}

}