/*
Theme Name: Project 2 Theme
Author: Yui Goto
Description: This WordPress block theme was designed to create a calm and vintage inspired atmosphere. The overall visual direction focuses on simplicity and a calm user experience. Soft color tones, balanced spacing, and minimal visual elements were used to evoke a nostalgic yet modern feeling. The design avoids overly complex components and instead emphasizes clarity and readability, allowing the content to stand out.
Tags: One Column, Custom Colors, custom-menu, Custom Logo, Editor Style, Featured Images, Site Editor, Block Editor Patterns, rtl-language-support, Sticky Post, threaded-comments, translation-ready, Wide Blocks, Block Editor Styles, Style Variations, Accessibility Ready, Blog, Portfolio, News
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Quicksand:wght@300..700&display=swap');

body {
    background: #fffcf7;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: #444455;
}


/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
    font-family: "Quicksand", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    font-family: "Cal Sans", sans-serif;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}

section {
    margin: 20px auto;
}

a {
    background-color: #525266;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    color: #fffcf7;
    font-family: "Cal Sans", sans-serif;
}

img {
    border-radius: 15px;
}

/* HEADER */
header {
    background-color: #525266;
    padding: 10px 20px;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header a {
    margin: 0 10px;
    padding: 0;
}

.menu-item {
    list-style-type: none;
}

.custom-logo {
    width: 50px;
    height: auto;
}

#menu-primary {
    display: flex;
}

#menu-item-70,
#menu-item-128 {
    margin: 0 10px;
}

#menu-button {
    display: block;
    all: unset;
    font-size: 1.2rem;
    color: #fffcf7;
    background-color: #525266;
}

#site-nav {
    display: none;
}

#site-nav.show {
    display: block;
    position: absolute;
    top: 100px;
    right: 0;
}

.menu-primary-container {
    background-color: #525266;
}

#site-nav ul {
    display: block;
    padding: 0;
    margin: 0;
}

#site-nav ul li {
    margin: 10px 0;
}

#site-nav ul li a {
    display: block;
    text-decoration: none;
    color: #fffcf7;
    font-size: 1.2rem;
}

@media (min-width: 768px) {
    #menu-button {
        display: none;
    }

    #site-nav {
        display: block;
    }

    #site-nav ul {
        display: flex;
    }

}


/* FOOTER */
footer {
    background-color: #525266;
    text-align: center;
    padding: 20px 0;
}

footer a {
    padding: 0;
}

footer img {
    margin: auto;
}

footer ul {
    padding: 10px 0;
}

.menu-primary-container {
    display: flex;
    justify-content: center;
}

#menu-primary-1 {
    display: flex;
}

#menu-primary-1 .menu-item-70,
.menu-item-128 {
    margin: 0 10px;
}


/* ----- HERO ----- */
.hero {
    height: 30vh;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-text {
    color: #fffcf7;
    width: 90vw;
}

.hero-text p {
    color: #fffcf7;
}

.hero img {
    border-radius: 0;
}

/* medium size screen */
@media (min-width: 768px) {

    .hero-text h1,
    .hero-text p {
        width: 50%;
    }

    .hero-text h1 {
        font-size: 60px;
        line-height: 1;
    }

}

/* large size screen */
@media (min-width: 1024px) {

    .hero-text {
        max-width: 1000px;
    }

    .hero img {
        height: 40vh;
    }

}

/* ----- ABOUT ----- */

.about {
    text-align: center;
    width: 90vw;
}

.about h2 {
    padding: 10px;
}

/* medium size screen */
@media (min-width: 768px) {

    .about {
        max-width: 80vw;
    }

}

/* large size screen */
@media (min-width: 1024px) {

    .about {
        max-width: 1000px;
    }

}

/* ----- STRENGTH AND SKILLS ----- */
.strength {
    background-color: #d1e0de;
    padding: 20px 0 40px;
    margin: 0;
}

.strength-contents {
    width: 90vw;
    text-align: center;
    margin: auto;
}

.strength h2 {
    padding: 10px;
}

.strength img {
    margin-top: 20px;
}

/* medium size screen */
@media (min-width: 768px) {

    .prj-images {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .prj-images img {
        width: 25vw;
        object-fit: contain;
    }

}

/* large size screen */
@media (min-width: 1024px) {

    .strength-contents {
        max-width: 1000px;
    }

    .prj-images img {
        width: 300px;
    }

}


/* ----- EDUCATION ----- */

.education {
    text-align: center;
    padding: 20px;
    margin: 0;
}

.education h2 {
    padding: 10px;
}

.education .uni {
    padding-bottom: 10px;
}

/* medium size screen */
@media (min-width: 768px) {

    .education {
        width: 100%;
        padding: 20px 40px;
    }

    .education-details {
        display: flex;
        padding-top: 10px;
    }

    .uni,
    .collage {
        width: 50%;
        padding: 0 15px;
    }

}

/* large size screen */
@media (min-width: 1024px) {

    .education-details {
        max-width: 1000px;
        margin: auto;
    }
}


/* ----- CONTACT ----- */
.contact {
    background-color: #d1e0de;
    padding: 20px 20px 40px;
    text-align: center;
    margin: 0;
}

.contact p {
    padding-bottom: 15px;
}

/* medium size screen */
@media (min-width: 768px) {

    .contact {
        width: 100%;
    }

    .contact p {
        padding: 10px 0 20px;
        width: 80vw;
        margin: auto;
    }

}

/* large size screen */
@media (min-width: 1024px) {

    .contact p {
        max-width: 900px;
    }
}


/* -------------- Projects page --------------------- */

.project-hero {
    height: 30vh;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    display: grid;
    place-items: center;
}

.prj-hero-contents {
    color: #fffcf7;
    width: 90vw;
    text-align: center;
    margin: auto;
}

.prj-hero-contents p {
    color: #fffcf7;
}

.prj-details {
    width: 90vw;
}

.images-blocks div {
    text-align: center;
}

.images-blocks div {
    padding: 10px 0;
}

.prj-links {
    text-align: center;
}

.prj-links div {
    margin: 30px 0;
}

.prj-cta {
    text-align: center;
    margin: 0;
    padding: 30px 0;
    background-color: #d1e0de;

}

.prj-cta p {
    padding-bottom: 25px;
}

/* medium size screen */
@media (min-width: 768px) {
    .images-blocks {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .images-blocks div {
        width: 28vw;
        gap: 15px;
    }

    .prj-links {
        width: 90vw;
        display: flex;
        justify-content: space-between;
    }
}

/* large size screen */
@media (min-width: 1024px) {

    .prj-hero-contents,
    .prj-details,
    .prj-links {
        max-width: 1000px;
    }

    .images-blocks div {
        width: 300px;
        gap: 1rem;
    }
}



/* ------------ Project Archive page ------------ */
.project-archive {
    width: 90vw;
    margin: auto;
}

.archive-overview h1 {
    font-size: 40px;
    padding: 20px 0;
}

.project-item {
    margin: 15px 0;
    padding: 10px;
    background-color: #d1e0de;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    overflow: hidden;
}

.project-item a {
    background-color: transparent;
    padding: 0;

}

.project-item h2,
p {
    color: #525266;
}

.project-archive-cta {
    text-align: center;
}

.project-archive-cta p {
    padding-bottom: 20px;
}

/* medium screen */
@media (min-width: 768px) {
    .archive-overview {
        width: 50%;
        margin: 0;
    }

    .archive-items {
        display: flex;
        gap: 1rem;
    }

    .project-item {
        flex: 1;
    }

    .project-item a {
        display: grid;
        grid-template-rows: 150px auto 1fr;
        height: 100%;
        align-items: center;
    }

    .project-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .project-item h2 {
        padding-top: 10px;
    }

}

/* large screen */
@media (min-width: 1024px) {
    .project-archive {
        max-width: 1000px;
    }

    .project-item img {
        object-fit: contain;
    }

}

/* ---------------- CONTACT PAGE ------------------- */
.contact-page {
    width: 90vw;
    margin: auto;
}

.contact-hero h1 {
    font-size: 40px;
}

.contact-details {
    display: flex;
    justify-content: space-between;
}

.contact-details p {
    font-size: 20px;
}

/* medium size screen */
@media (min-width: 768px) {
    .contact-hero h1 {
        text-align: center;
    }

    .contact-contents {
        display: flex;
        gap: 1rem;
    }

    .contact-details {
        display: block;
    }

    .phone,
    .email {
        padding: 10px;
    }

    .contact-form span {
        width: max-content;
    }
}

/* large size screen */
@media (min-width: 1024px) {
    .contact-page {
        max-width: 1000px;
    }
}


/* ---------- 404 PAGE ---------- */
.page-404 {
    text-align: center;
    width: 90vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
}

.page-404 main {
    flex: 1;
}

.page-404 a {
    width: 250px;
    margin: 0 auto;
}