/* @font-face {
    font-family: "Dela Gothic";
    src: url(fonts/Dela_Gothic_One/DelaGothicOne-Regular.ttf);
} */
@font-face {
    font-family: "Mochiy Pop";
    src: url(fonts/Mochiy_Pop_P_One/MochiyPopPOne-Regular.ttf);
}
@font-face {
    font-family: Murecho;
    src: url(fonts/Murecho/Murecho-VariableFont_wght.ttf);
}
/* @font-face {
    font-family: "Yusei Magic";
    src: url(fonts/Yusei_Magic/YuseiMagic-Regular.ttf);
} */
/* @font-face {
    font-family: "Zen Antique";
    src: url(fonts/Zen_Antique_Soft/ZenAntiqueSoft-Regular.ttf);
} */
:root {
    --pink : #eb5783;
    --dark_pink : #e13b6d;
    --yellow : #fcd272;
    --light_green: #ccedc4;
    --nav_dark: #251c39;
    --nav_purple: #532563;
    --link_purple: #7a64aa;

    --nav_font_size: 20px;
    --title_font_size: 30px;
    --question_font_size: 20px;
    --text_font_size: 18px;
    --small_font_size: 16px;

    --outer_padding: 40px;
    --text_padding: 5px;
    /* how high our header & footer should be */
    --header_height: 75px;
    --footer_height: 100px;
    /* how big total height should be */
    --main_height: calc(100vh - var(--header_height) - var(--footer_height) - var(--outer_padding)*3);

    --ja_text: "Murecho";
    --ja_title: "Murecho";
    --ja_nav: "Muchiy Pop";
}



body {
    margin: 0;
    padding: 0;
    height: 100vh;
}
h1, h2, p, li, a {
    /* default calibri for text */
    font-family: Calibri, sans-serif;
    padding: 0;
    margin: var(--text_padding) 0px;
}
h1 {
    font-size: var(--title_font_size);
    /* thin italic serif for titles */
    font-style: italic;
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-weight: 100;
}
h2 {
    font-size: var(--question_font_size);
    /* bigger than regular text for sub titles */
    font-weight: 700;
    margin-top: 15px;
}
p, li, a {
    font-size: var(--text_font_size);
    /* thin text */
    font-weight: 100;
}
h2:lang(ja), p:lang(ja), li:lang(ja), a:lang(ja), ruby:lang(ja) {/* different font stuff for japanese */
    font-family: var(--ja_text), Calibri, sans-serif;
}
h1:lang(ja) {
    font-family: var(--ja_title), Georgia, Times, 'Times New Roman', serif;
    font-weight: 600;
    
}
h2:lang(ja) {
    font-weight: 500;
}
p:lang(ja), li:lang(ja), a:lang(ja) {
    /* thin text but not too thin */
    font-weight: 300;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

header {
    background-color: var(--pink);
    height: var(--header_height);
    display: flex;
    /* make sure items are centered vertically */
    align-items: center;
    /* make some space between nav bars for pages & languages */
    justify-content:space-around;

}
#menu {
    display: flex;
    flex-direction: row;

    button {
        display: none;
    }
}
.nav_menu {
    display: flex;
    flex-direction: row;    
    justify-content: center;
    text-align: center;
    a {
        padding: 15px 20px;
        margin: 0px;
        font-size: clamp(calc(var(--nav_font_size)*0.75), calc(var(--nav_font_size)*0.95), var(--nav_font_size));
        /* font-size: var(--nav_font_size); */
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        text-decoration: none;
        color: var(--nav_dark);
    }
    /* add lines inbetween nav items */
    a:not(:first-child) {
        border-left: 1px solid var(--light_green);
    }
    a:not(:last-child) {
        border-right: 1px solid var(--light_green);
    }
    .active {
        color: var(--nav_purple);
    } 
}
#page_nav a:lang(ja) {
    font-family: var(--ja_nav), Calibri, sans-serif;
    font-weight: 600;
}
#lang_nav a {
    font-size: clamp(calc(var(--nav_font_size)*0.5), calc(var(--nav_font_size)*0.75), var(--nav_font_size)); 
    padding-left: 10px;
    padding-right: 10px;

}
main {
    display: flex;
    /* make sure items are centered vertically */
    align-items: center;

    background-color: var(--yellow);
    padding: var(--outer_padding) calc(var(--text_padding) + var(--outer_padding));
    /* make sure it doesn't squish any content */
    max-height: min-content;
    /* make sure it fills out the page */
    min-height: var(--main_height);
    p {
        margin: 15px 0px;
    }
    li {
        /* we want left padding to indent list items */
        padding-left: 40px;
    }
    a {
        text-decoration: none;
        font-weight: 500;
        color: var(--link_purple);
    }
    h1:lang(ja) {
        font-size: calc(var(--title_font_size)*1.2);
    }
}
footer {
    height: var(--footer_height);
    background-color: var(--light_green);
    padding: calc(var(--outer_padding)/2) var(--outer_padding);
    display: flex;
    justify-content: end;
    text-align: start;
    h1 {
        font-size: var(--text_font_size);
    }
    p {
        font-size: var(--small_font_size);
        margin: calc(var(--text_padding)/4) 0px;
    }
}
footer:lang(ja) {
    height: calc(var(--footer_height)*1.3);
}

#profile_picture {
    /* scale by whichever is bigger */
    max-width: 40vw;
    max-height: 70vh;
    /* make sure there's distance between text & picture */
    padding-right: var(--outer_padding);
}
#trans_standard_sizing_flyer {
    /* scale by whichever is bigger */
    max-width: 40vw;
    max-height: 70vh;
    /* make sure there's distance between text & picture */
    padding-left: var(--outer_padding);
}

#portfolio {
    display: flex;
    flex-direction: column;
}
#portfolio_div_2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
    margin-top: 15px;
}
#portfolio_div_1 {
    display: block;
    align-content: start;
    width: 100%;
}
.portfolio {
    min-width: auto;
    min-height: 20vh;
    max-width: auto;
    max-height: 50vh;
}


/* under 500px screen width, switch to mobile layout */
@media (max-width: 500px) {

    /* switch to toggle menu for page selection */
    /* made using this tutorial https://www.w3schools.com/howto/howto_js_dropdown.asp */
    #menu {
        display: inline;

        /* show button and hide menu */
        button {
            display: block;
            background-color: var(--dark_pink);

            padding: 15px 20px;
            margin: 0px;
            font-size: clamp(calc(var(--nav_font_size)*0.75), calc(var(--nav_font_size)*0.95), var(--nav_font_size));
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            text-decoration: none;
            color: var(--nav_dark);
            border: none;
        }

        /* Dropdown Content (Hidden by Default) */
        .nav_menu {
            float: none;
            display: none;
            position: absolute;
            background-color: var(--pink);
            width: max-content;
            min-width: 30vw;
            max-width: 75vw;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        /* Links inside the dropdown */
        .nav_menu {
            a { 
                float: none;
                display: block;
                border: none;
                /* leave some space around border lines */
                padding: 10px;
                margin: 0px 10px;
            }

            /* add lines inbetween nav items */
            a:not(:first-child) {
                border-top: 1px solid var(--light_green);
            }
            a:not(:last-child) {
                border-bottom: 1px solid var(--light_green);
            }
        }

        /* Show the dropdown menu 
        (js adds this class to .nav_menu container on click of the menu toggle button) */
        .show {display:block;}
    }

    /* and adjust the rest of the layout for viewing on small vertical screens */
    main {
        /* everything should be scrollable now */
        flex-direction: column;

        /* reduce empty space for smaller screens */
        padding: 6vw 8vw;
        h1, h2, p, li, a {
            margin: 3vw 0px;
        }
        h1 {
            margin-top:0;
        }
    }
    /* resize images to take up more of width of smaller screen */
    #profile_picture, #trans_standard_sizing_flyer {
        max-width: 84vw;
        max-height:100vh;
        padding: 0px;
        margin: 3vw;
    }
    .portfolio {
        max-width: 100vw;
        max-height: 100vh;
    }
    /* now that portfolio is a column of single images, we don't need extra space at the bottom */
    #portfolio {
        padding-bottom: 0px;
    }

}