* {
font-family: 'ABeeZee', sans-serif; 
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: auto;
    background-color: #fefbf1;
}
    
/* unvisited link */
a:link {
    color: #222021;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #222021;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: rgb(222, 49, 99);
}

/* selected link */
a:active {
    color: #222021;
    text-decoration: none;
}

    .header {
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
        height: 6rem;
        margin-right: 0;
        margin-bottom: 0;
        padding-top: 1rem;
    }
    
    .header_logo {
        display: flex;
        align-items: left;
        margin-left: 4rem;
        padding-top: 2rem;
        align-items: center;
        text-decoration: none;
    }
    
    .logo {
        width:55px;
        height: 30px;
        padding-left: 1.5rem;
    }
    
    .header_logo  p {
        font-size: 24px;
        font-weight: bold;
        width: 15rem;
        color: #222021;
        text-decoration: none;
        list-style: none;
    }
    
    .header_nav {
        display: flex;
        flex-flow: row;
        margin-left: 5rem;
        margin-right: 0;
    
        a:link {
            color: #222021;
            text-decoration: none;
        }
    
        a:visited {
            color: #222021;
            text-decoration: none;
        }
    
        a:hover {
            color: #e0218a;
            text-decoration: none;
        }
    
        a:active {
            color: #222021;
            text-decoration: none;
        }
    }
    
    .header_nav_list {
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        height: 1.5rem;
        list-style-type: none;
        vertical-align: middle;
        align-items: center;
        gap: 1.5rem;
        margin-right: 0;
        margin-left: 18rem;
        padding-right: 0;
        padding-left: 0;
    }
    
    .header_nav_list li {
        font-size: 16px;
        font-weight: 700;
        justify-content: space-around;
        text-align: center;
        color: #222021;
        margin-bottom: 0;
        margin-right: 0;
        margin-left: .5rem;
        padding-right: 0;
        margin-top: 3rem;
        padding-top: 0;
        color: #222021;
    }
        
    #li-home ul.dropdown li {
        display: block;
    }

    #li-home ul.dropdown {
        width: 20%;
        background: #e0218a;
        position: absolute;
        z-index: 999;
        display: none;
    }

    #li-home ul.dropdown a:hover{
        background: #e0218a;
    }

    #li-home:hover ul.dropdown {
        display: block;
    }

    #li-home ul.dropdown li {
        display: inline-block;
        position: relative;
    }

    #li-home ul.dropdown li a {
        display:block;
        padding: 10px 15px;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
    }

    #li-contact {
        border: 2px solid #e0218a ;
        border-radius: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    
.webdev-page {
    display: grid;
    grid-template-columns: 1;
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 20rem;
    gap: 5rem;
}

#webdev-heading {
    margin-left: 8rem;
    margin-right: auto;
    margin-top: 3rem;
    margin-bottom: .5rem;
}

#webdev-heading h1 {
    font-family: 'Caprasimo', serif;
    display: block;
    font-size: 2rem;
    font-weight: 200;
    color: #e0218a;
}

.webdev-block-1 {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .5rem;
    width: min(90%, 70rem);
    height: auto;
    min-height: 50vh;
    margin-left: 8rem;
    margin-right: auto;
    justify-content: center;
}

#imari-block {
    margin-bottom: 1rem;
}

.webdev-block-1 h2{
    font-size:medium;
}

.webdev-block-1 p {
    font-size :medium;
    font-weight: 300;
}

.webdev-block-1-img {
    display: grid;
    width: 100%;
    gap: .5rem;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    border-radius: .5rem;
    object-fit: fill;
}

.webdev-block-1-img img {
    width: 100%;
    height:100%;
    border-radius: .5rem ;
}

.webdev-block-1-img #react-site-mockup {
    grid-column-start: 1;
    grid-column-end: 4;
}

.webdev-block-1-img #react-site-figma {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
}

.webdev-block-1-desc {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .5rem;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    border: solid 1px gray;
    border-radius: .5rem ;
}

.webdev-block-1-info {
    color: #222021;
    font-weight: bolder;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    padding-left: 1rem;
    padding-bottom: 1rem;
}

.webdev-block-1-info p {
    font-weight: 400;
}

.webdev-block-1-link {
    width:100%;
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 2;
    text-align: right;
    padding-right: 1.5rem;
}

#webdev-block-1-a {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .5rem;
    width: min(90%, 70rem);
    height: auto;
    min-height: 50vh;
    margin-left: 8rem;
    margin-right: auto;
    margin-bottom: 5rem;
    justify-content: center;
}

#webdev-block-1-a .webdev-block-1-desc {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .5rem;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    border: solid 1px gray;
}

#webdev-block-1-img-a #js-game-ss {
    grid-column-start: 1;
    grid-column-end: 4;
}

#webdev-block-1-img-a #js-game-mobile {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
}

#webdev-block-1-b {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .5rem;
    width: min(90%, 70rem);
    height: auto;
    min-height: 50vh;
    margin-left: 8rem;
    margin-right: auto;
    margin-bottom: 5rem;
    justify-content: center;
}

#webdev-block-1-b .webdev-block-1-desc {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .5rem;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 2;
    border: solid 1px gray;
}

#webdev-block-1-c {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: .5rem;
    width: min(90%, 70rem);
    height: auto;
    min-height: 50vh;
    margin-left: 8rem;
    margin-right: auto;
    margin-top: 8rem;
    margin-bottom: 0;
    justify-content: center;
}

#webdev-block-1-img-c #js-game-ss {
    grid-column-start: 1;
    grid-column-end: 4;
}

#webdev-block-1-img-c #js-game-mobile {
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
}

    .wd-contact-section {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        background-color:#FCF4E8;
        width: 100%;
        height: 80%;
        margin-bottom: 0;
        margin-top: -2rem;
        padding-bottom: 2rem;
    }

    #plane img{
        width: 100%;
        height: 80%;
        padding-left: 10rem;
        padding-top: 5rem;
        overflow: hidden;
        animation: slideInPlane 1s ease-out forwards;
        animation-timeline: view();
        animation-range: entry 0% cover 50%; 
    }

    .wd-contact-us {
        width: 90%;
        padding-top: 3rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        margin-top: .5rem;
        margin-bottom: .5rem;
        margin-right: 2rem;
        padding-right: 6rem;
        text-align: right;
    }

    .wd-contact-us h3 {
        font-family: 'Caprasimo', serif;
        font-size: 40px;
        font-weight: 900;
        text-align: right;
        margin-left: 8rem;
        margin-top: 1rem;
        padding-bottom: 2rem;
        color: #e0218a;
    }

    #you {
        font-size: 40px;
        font-weight: 900;
        text-align: right;
        margin-top: -3rem;
        padding-bottom: 1rem;
        color: #221f21;
    }
    
    .wd-contact-us p {
        font-weight: regular;
        color: #221f21;
        font-size: large;
        text-align: right;
        padding-bottom: 5px;
    }
    
    .mail {
        font-weight: regular;
        font-size: large;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    a.mail:link {
        color: #221f21;
        text-decoration: underline;
        text-align: center;
    }
    
    .footer_nav {
        background-color:#FCF4E8;
        width: 100%;
        height: 20vh;
        margin-top: 0;
        align-items: center;
    }
    
    .footer_grid {
        display: flex;
        gap: 1.5rem;
        justify-content: space-between;
    }
    
    .footer_icons {
        flex-basis: 40%;
        width: 30px;
        height: 30px;
        padding: 0;
        padding-left: 3rem;
        gap: 2.5rem;
        margin-left: 40%;
        margin-right: 0px;
        margin-top: 0; 
        align-items: center;
    }
    
    .footer_icons img:hover {
        background-color: rgb(222,49,99);
        opacity: 0.6;
        border: 3px solid rgb(222,49,99);
    }
    
    .footer_icons img {
        width: 50px;
        height: 50px;
        padding-right: 0;
    }

/* ============================================
   ANIMATION — fixed (one from/to)
   ============================================ */
@keyframes slideInPlane {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0%);
    }
}

/* ============================================
   HAMBURGER — hidden on desktop
   ============================================ */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    margin-left: auto;
    margin-right: 1.5rem;
    margin-top: 1.5rem;
}

.hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #222021;
    border-radius: 2px;
}

/* ============================================
   TABLET: 700px–1024px
   ============================================ */
@media only screen and (min-width: 700px) and (max-width: 1024px) {

    .header_logo {
        margin-left: 2rem;
        padding-top: 0;
    }

    .header_nav {
        margin-left: 2rem;
    }

    .header_nav_list {
        margin-left: 2rem;
        gap: 1rem;
        flex-wrap: nowrap;
    }

    #webdev-heading {
        margin-left: 2rem;
    }

    /* Cards: full width, reset the desktop left margin */
    .webdev-block-1,
    #webdev-block-1-a,
    #webdev-block-1-b,
    #webdev-block-1-c {
        width: calc(100% - 4rem);
        height: auto;
        min-height: unset;
        margin-left: 2rem;
        margin-right: 2rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Images take natural height */
    .webdev-block-1-img img {
        height: auto;
    }

    .footer_icons img {
        width: 40px;
        height: 40px;
        margin-top: 30px;
        margin-right: .5rem;
    }
}

/* ============================================
   MOBILE: up to 699px
   (handles both 280–480 and 481–699 together
    since the card layout is identical — only
    font sizes and spacing differ slightly)
   ============================================ */
@media only screen and (max-width: 699px) {

    body {
        width: 100vw;
        overflow-x: hidden;
    }

    /* --- Header --- */
    .header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        height: 5rem;
        padding: 0 1rem;
    }

    .header_logo {
        margin-left: 0;
        padding-top: 0;
        flex-shrink: 0;
    }

    .header_logo img {
        width: 28px;
        height: 20px;
        padding-left: 0;
        margin-left: 0;
    }

    .header_logo p {
        font-size: 15px;
        width: auto;
        padding-left: .4rem;
    }

    .hamburger {
        display: flex;
        margin-top: 0;
        margin-left: auto;
    }

    .header_nav {
        display: none;
        position: fixed;
        top: 5rem;
        left: 0;
        right: 0;
        background: #fefbf1;
        padding: 1.5rem 2rem 2rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.10);
        z-index: 99;
        margin-left: 0;
        margin-top: 0;
    }

    .header_nav.open {
        display: flex;
    }

    .header_nav_list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: auto;
        margin-left: 0;
        gap: 1.25rem;
        flex-wrap: nowrap;
    }

    .header_nav_list li {
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        width: 100%;
        line-height: normal;
    }

    #li-home ul.dropdown {
        position: static;
        width: 100%;
        display: none;
        margin-top: .5rem;
        border-radius: 8px;
    }

    #li-home.open ul.dropdown {
        display: block;
    }

    #li-contact {
        display: inline-block;
        padding: 6px 14px;
        width: auto;
    }

    /* --- Page heading --- */
    #webdev-heading {
        margin-left: 1.25rem;
        margin-right: 1.25rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    #webdev-heading h1 {
        font-size: 1.5rem;
    }

    /* --- Project cards --- */
    .webdev-page {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 1rem;
        margin-bottom: 4rem;
        gap: 2.5rem;
        padding: 0 1.25rem;
        /* override the desktop grid */
        display: flex;
        flex-direction: column;
    }

    /* Reset ALL card variants to the same full-width block */
    .webdev-block-1,
    #webdev-block-1-a,
    #webdev-block-1-b,
    #webdev-block-1-c {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin: 0;
        gap: .75rem;
        border-radius: .5rem;
        overflow: hidden;
    }

    /* Image area: full width, natural aspect ratio */
    .webdev-block-1-img,
    #webdev-block-1-img-a,
    #webdev-block-1-img-c {
        display: flex;
        flex-direction: row;
        gap: .5rem;
        width: 100%;
        height: auto;
        /* reset desktop grid placement */
        grid-column: unset;
        grid-row: unset;
    }

    .webdev-block-1-img img {
        width: 50%;
        height: auto;
        object-fit: cover;
        border-radius: .5rem;
        flex: 1;
    }

    /* If card has only one image, let it go full width */
    .webdev-block-1-img img:only-child {
        width: 100%;
    }

    /* JS Game images — reset ID-level grid placement */
    #js-game-ss,
    #js-game-mobile {
        grid-column: unset;
        grid-row: unset;
        width: 50%;
        flex: 1;
    }

    /* Recipe app — single image, full width */
    #webdev-block-1-b .webdev-block-1-img img {
        width: 100%;
        flex: unset;
    }

    /* JS Game + Recipe app: force desc and children out of grid */
    #webdev-block-1-a .webdev-block-1-desc,
    #webdev-block-1-b .webdev-block-1-desc {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset;
    }

    #webdev-block-1-a .webdev-block-1-info,
    #webdev-block-1-a .webdev-block-1-link,
    #webdev-block-1-b .webdev-block-1-info,
    #webdev-block-1-b .webdev-block-1-link {
        grid-column: unset !important;
        grid-row: unset !important;
        width: 100%;
        text-align: left;
    }

    #webdev-block-1-a .webdev-block-1-link,
    #webdev-block-1-b .webdev-block-1-link {
        padding: .5rem 1rem 1rem;
    }

    /* Info + link block */
    .webdev-block-1-desc {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: .5rem;
        overflow: hidden;
        /* reset desktop grid placement */
        grid-column: unset;
        grid-row: unset;
    }

    .webdev-block-1-info {
        width: 100%;
        padding: 1rem 1rem .5rem;
        grid-column: unset;
        grid-row: unset;
    }

    .webdev-block-1-info h2 {
        font-size: .85rem;
        font-weight: 800;
        margin-bottom: .5rem;
        color: #222021;
    }

    .webdev-block-1-info p {
        font-size: .82rem;
        font-weight: 400;
        line-height: 1.5;
        color: #444;
    }

    .webdev-block-1-link {
        width: 100%;
        text-align: left;
        padding: .5rem 1rem 1rem;
        grid-column: unset;
        grid-row: unset;
    }

    .webdev-block-1-link a {
        display: inline-block;
        background-color: #e0218a;
        color: #fff !important;
        font-size: .8rem;
        font-weight: 700;
        padding: .4rem 1rem;
        border-radius: 4px;
        letter-spacing: .04em;
    }

    .webdev-block-1-link a:hover {
        opacity: .85;
    }

    /* --- Contact --- */
    .wd-contact-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #FCF4E8;
        width: 100%;
        margin-top: 0;
        padding: 2.5rem 1.25rem 3rem;
        text-align: center;
    }

    #plane {
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
    }

    #plane img {
        width: 65%;
        max-width: 240px;
        height: auto;
        padding: 0;
    }

    .wd-contact-us {
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .wd-contact-us h3 {
        font-size: 2.2rem;
        text-align: center;
        margin-left: 0;
        padding-bottom: .75rem;
    }

    #you {
        font-size: 2.2rem;
        text-align: center;
        margin-top: -1.5rem;
        padding-bottom: 1rem;
    }

    .wd-contact-us p {
        font-size: .9rem;
        text-align: center;
        line-height: 1.8;
        padding-bottom: 0;
        margin-top: 0;
    }

    a.mail:link {
        font-size: .9rem;
        font-weight: 700;
        color: #221f21;
        text-decoration: underline;
    }

    /* --- Footer --- */
    .footer_nav {
        height: auto;
        padding: 1.5rem 0 2rem;
        margin: 0;
    }

    .footer_grid {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .footer_icons {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        width: auto;
        height: auto;
    }

    .footer_icons img {
        width: 32px;
        height: 32px;
        padding: 0;
        margin: 0;
    }
}