/* General styling */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
    user-zoom: none;
    text-decoration: none;
    list-style: none;
}
:root{
    --litcolor:#ffffff;
    --blkcolor:#000000;
    --altcolor:#f57328;
    --libcolor:aliceblue;
    --hdfont:font-family: 'Abyssinica SIL', serif;
    --tltfont:font-family: 'Noto Sans JP', sans-serif;
    --jpfont:font-family: 'Oswald', sans-serif;
}
.hero-text{
    font-family: var(--hdfont);
    font-size: 4.1em;
    font-weight: 700;
    letter-spacing: 0.3125px;
}
.bs{
    box-shadow: 0 8px 4px 0, 0 6px 20px 0 var(--litcolor);
}
.bg{
    background-color: var(--libcolor);
}
p{
   font-family: var(--jpfont);
   text-align: justify;
   margin: 1.25em 0em;
}
.sub{
    font-family: var(--hdfont);
    font-size: 1.5em;
    color: var(--altcolor);
    font-weight: 700;
}
.tittle-text{
    font-family: var(--tltfont);
    font-weight: 700;
    font-size: 2.5em;
    letter-spacing: 0.1em;
}
.px{
    padding: 0em 6.25em;
}
.df{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mg{
    margin-top: 3em;
}
.mgc{
    margin: 1em auto;
    display: flex;
    justify-content: center;
    text-align: center;
}
.small{
    font-family: var(--tltfont);
    font-size: 1.4em;
    font-weight: 700;
}
.small2{
    font-family: var(--jpfont);
    font-weight: 700;
    font-size: 1em;
    margin: 0.4em ;
}
.btn{
    background-color: var(--blkcolor);
    padding: 0.3125em 1.25em;
    color: var(--litcolor);
}
.btn:hover{
    background-color: var(--litcolor);
    color: var(--blkcolor);
    border: 0.125em solid var(--blkcolor);
    padding: 0.3125em 1.25em;
}
.btn1{
    background-color: var(--altcolor);
    padding: 0.3125em 1.25em;
    color: var(--litcolor);
}
.btn1:hover{
    background: none;
    color: var(--altcolor);
    border: 2px solid var(--altcolor);
    padding: 0.3125em 1.25em;
}
/* navbar styling */
nav{
    background-color: var(--litcolor);
    width: auto;
    height: 10vh;
}
#brand{
    font-family: var(--hdfont);
    font-weight: 700;
    color: var(--blkcolor);
}
nav li{
    margin: 0px 20px;
}
nav a{
    color: var(--blkcolor);
    font-family: var(--tltfont);
}
nav div a{
    margin: 0px 20px;
}
/* main styling */
main{
    background-color: var(--litcolor);
    width: auto;
    height: 90vh;
}
.main-box{
    width: 50%;
    height: 60vh;
}
.main-box img{
    display: block;
    margin: 0em auto;
}
section{
    width: auto;
    background-color: var(--litcolor);
    height: fit-content;
}
.four{
    width: 13em;
    height: 22em;
}
.up{
    width: auto;
    height: 17.6em;
}
.down{
    width: auto;
    height: 4.4em;
}
.inner-box{
    width: 46%;
    height: 18.75em;
}
.three{
    width: 30%;
    height: 15.625em;
}
.two{
    width: auto;
    height: 2.5em;
    border: 0.125em solid var(--libcolor);
    margin-top: 0.625em;
    display: flex;
    align-items: center;
}
.cl{
    color: var(--blkcolor);
}
.f{
    width: 19%;
    height: 15.625em;
}
.md{
    margin: 0.1875em auto;
    color: var(--litcolor);
}
.gr{
    color: gray;
    font-family: var(--jpfont);
    font-weight: 700;
    font-size: 0.8em;
}
.follow{
    height: 30px;
    width: 60%;
}
.u{
    color: var(--blkcolor);
}