html {
    box-sizing: border-box; 
} 

* {
    box-sizing: inherit; 
} 

body {
    background-color: rgb(44, 44, 44); 
    font-family: "Zen Maru Gothic", sans-serif; 
    margin: auto; 
    min-height: 100vh;
    display: flex; 
    flex-direction: column; 
} 

header {
    color: white; 
    background-color: rgb(66, 41, 41); 
    position: fixed; 
    width: 100%; 
} 

h1 {
    font-size: 3rem;  
    text-align: center; 
    padding: 1rem; 
    padding-bottom: 1.5rem; 
    margin: 0; 
}

h1 a {
    color: white; 
    text-decoration: none; 
    transition: 0.3s; 
} 

h1 a:hover {
    color: rgb(255, 212, 218); 
} 

.CherryIcon1 {
    position: absolute; 
    top: 0.25rem; 
    left: 0.25rem; 
} 

.CherryIcon2 {
    position: absolute; 
    top: 0.25rem; 
    right: 0.25rem; 
} 

.BrightMode {
    position: fixed; 
    top: 10.4rem; 
    left: 5rem; 
} 

.BrightMode a {
    color: black; 
    background-color: white; 
    font-size: x-large; 
    text-decoration: none; 
    border-radius: 18px; 
    padding-top: 14px; padding-bottom: 15px; 
    padding-left: 22px; padding-right: 22px; 
    transition: 0.3s; 
} 

.BrightMode a:hover {
    background-color: rgb(225, 225, 225); 
}

nav ul {
    padding-left: 0px; 
    margin-top: 3.8rem; margin-bottom: 3.8rem; 
} 

nav ul a {
    color:rgb(255, 212, 218); 
    background-color: black; 
    font-weight: 700; 
    text-decoration: none; 
    border: 3.5px solid rgb(255, 212, 218); 
    border-radius: 15px; 
    padding-top: 5px; padding-bottom: 6.5px;  
    padding-left: 15px; padding-right: 15px; 
    margin: 0.9rem; 
    transition: 0.3s; 
} 

nav ul a:hover {
    color: black; 
    background-color: rgb(255, 212, 218); 
} 

.current a {
    color: black; 
    background-color: rgb(255, 212, 218); 
}

nav li {
    list-style-type: none; 
    display: inline; 
} 

main { 
    font-size: larger; 
    text-align: justify; 
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-bottom: 2rem; 
    margin-top: 7rem; 
} 

.aboutmain {
    margin-top: 8.7rem; 
} 

h2 {
    color: white; 
    font-size: xx-large; 
    margin: 0;
} 

article { 
    color: white; 
    background-color: black; 
    border-radius: 13px; 
    width: 800px; 
    padding: 2rem; 
    padding-top: 1.5rem; 
    margin: 1rem; 
} 

article li {
    list-style-type: "🌸"; 
    margin-top: 1.5rem; 
} 

p {
    margin-top: 10px; margin-bottom: 10px; 
}

footer {
    color:rgb(66, 41, 41); 
    background-color: rgb(255, 212, 218); 
    height: 5rem; 
    margin-top: auto; 
} 

footer a {
    color:rgb(66, 41, 41); 
    padding: 5px; 
    padding-top: 0; 
    transition: 0.3s; 
} 

footer a:hover {
    color: white; 
} 

.currentlink a {
    color: white; 
}

.indeximg {
    display: block; 
    margin-left: auto; margin-right: auto; 
    margin-top: 10px;
} 

.hanamiimg {
    display: block; 
    margin-left: auto; margin-right: auto; 
    margin-top: 8px;
} 

.meaningimg {
    display: block; 
    margin-left: auto; margin-right: auto; 
    margin-top: -18px;
} 

.typesimg {
    display: block; 
    margin-left: auto; margin-right: auto; 
    margin-top: 4rem; margin-bottom: 1rem; 
    border-radius: 15px;
} 

.typesfig {
    text-align: center; 
    display: block; 
    margin-left: auto; margin-right: auto; 
    margin-bottom: 3rem; 
} 

.typesfig a {
    color: rgb(255, 212, 218); 
}