/* Search "ID-CARDS" for the card image IDs */


/* FONTS */

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('font/BaiJamjuree-Italic.woff2') format('woff2'),
        url('font/BaiJamjuree-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('font/BaiJamjuree-Bold.woff2') format('woff2'),
        url('font/BaiJamjuree-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('font/BaiJamjuree-Regular.woff2') format('woff2'),
        url('font/BaiJamjuree-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('font/BaiJamjuree-BoldItalic.woff2') format('woff2'),
        url('font/BaiJamjuree-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Light.woff2') format('woff2'),
        url('font/Roboto-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-LightItalic.woff2') format('woff2'),
        url('font/Roboto-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Italic.woff2') format('woff2'),
        url('font/Roboto-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('font/Roboto-Regular.woff2') format('woff2'),
        url('font/Roboto-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* COLOR VARIABLES */

:root {
    --white: #FFFFFF;
    --black: #000000;
    --orange: #ff7525;
    --orange-hover: #FF2600;
    --green: #82A282;
    --light-grey: #ECECEC;
    --transparent: #00000000;
    --drop-shadow: #00000030;
}

/* PAGE SETUP */

* {
    scroll-behavior: smooth;
    scroll-margin-top: 144px;
}

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

body {
    width: 100%;
    min-height: 100vh;
    margin: 0px;
    font-family: 'Roboto';
    font-weight: 300;
    animation: fade-in 0.3s ease forwards;
}

/* FADE IN ANIMATION */

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

a, a:visited {
    text-decoration: none;
    color: var(--orange);
    transition: color 0.2s;
}

/* NAVIGATION */

nav {
    display: flex;
    width: 100%;
    height: 144px;
    position: fixed;
    top: 0px;
    z-index: 99;
    box-sizing: border-box;
    justify-content: space-between;
    background-image: linear-gradient(var(--white) 10%,var(--transparent));
}

.nav-button {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-right: 42px;
}

.nav-button > h2 {
    font-size: 24px;
    transition: color 0.2s;
    font-family: 'Bai Jamjuree';
    font-weight: bold;
    font-style: italic;
}

/* currently selected page nav button */
.nav-button#selected > h2 {
    color: var(--orange-hover);
}

/* Link Hover */
a:hover, .nav-button:hover > h2 {
    color: var(--orange-hover);
    transition: color 0.2s;
}

/* For logo left padding */
#nav-logo {
    padding-left: 42px;
}

/* For menu */
#nav-menu {
    display: flex;
    transition: right 0.3s ease;
}

/* pointer on burgers */
#nav-burger-open, #nav-burger-closed {
    cursor: pointer;
}

/* fixes open menu burger positioning */
#nav-burger-open {
    padding: 56px 0px;
}

/* RESPONSIVE NAV */

@media screen and (min-width: 1280px) {
    /* Hide burgers */
    .nav-burger-container {
        display: none;
    }
}

@media screen and (max-width: 1279px) {
    /* Shift menu off viewport */
    #nav-menu {
        flex-direction: column;
        position: absolute;
        right: -312px;
        z-index: 100; /* makes menu higher */
        background-color: var(--light-grey);
        height: 100vh;
        overflow-x: none;
        overflow-y: scroll;
    }

    /* Aligns button texts to the right and adds padding to the left */
    #nav-menu > .nav-button {
        justify-content: flex-end;
        padding-left: 42px;
    }

    /* .nav-burger-container {
        z-index: 100;
    } */
}

/* MAIN SITE */

main {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 144px 42px;
    scrollbar-color: var(--orange) rgba(0, 0, 0, 0);
}

/* PROJECT GRID */

.proj-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1550px) {
  .proj-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1150px) {
  .proj-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .proj-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* PROJECT CARDS */

.proj-card {
    position: relative;
    z-index: 0;
    height: 360px;
    perspective: 2000px; /*3D perspective; lower value intensifies*/
    transition: 0.2s ease;
}

.proj-card:hover {
    transform: scale(1.05);
    z-index: 10;
    filter: drop-shadow(0px 8px 10px var(--drop-shadow));
    transition: 0.15s ease;
}

.proj-card > div {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: transform 0.2s ease-out;
    transform-style: preserve-3d; /* Allow 3D transforms */
    transform-origin: center;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* ID-CARDS */

#shae-card {
    background-image: url(img/shae-card.jpg);
}

#center-card {
    background-image: url(img/center-card.jpg);
}

#myo-card {
    background-image: url(img/myo-card.jpg);
}

#revoir-card {
    background-image: url(img/revoir-card.jpg);
    background-position: top;
}

.card-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0px);
    transition: 0.2s ease;
    padding: 20px;
    box-sizing: border-box;
}

.proj-card:hover .card-overlay {
    top: 0;
    backdrop-filter: blur(6px);
}

.card-overlay-title {
    font-size: 1.5rem;
    font-family: 'Bai Jamjuree';
    font-weight: bold;
    font-style: italic;
    margin: 0px;
}

/* PROJECT PAGE */

#project-page {
    padding: 144px 16%;
}

#project-page > p, #about-page > p {
    max-width: 840px;
    margin: 8px 0px;
}

h1 {
    font-family: 'Bai Jamjuree';
    font-style: italic;
    font-weight: bold;
    margin-bottom: 0px;
}

h2 {
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 1.1rem;
    margin: 16px 0px;
}

.project-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    align-self: center;
}

#shae-grid .project-image {
    height: 500px;
}

#revoir-grid .project-image:nth-child(1) {
    grid-column: span 2;
}

#myo-grid .project-image:nth-child(3) {
    grid-column: span 2;
}

#myo-grid .project-image:nth-child(-n+2) {
    height: 500px;
}

.image-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 2%;
    margin-top: 24px;
}

@media (max-width: 1150px) {
    #project-page {
        padding: 144px 8%;
    }
    .image-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    #revoir-grid .project-image:nth-child(1) {
    grid-column: span 1;
}

#myo-grid .project-image:nth-child(3) {
    grid-column: span 1;
}
}

/* ABOUT PAGE */

#about-page {
    padding: 144px 16%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6%;
}

#about-page > img {
    max-height: 500px;
    width: 100%;
    object-fit: contain;
    justify-self: end;
    align-self: center;
}

@media (max-width: 1150px) {
    #about-page {
        padding: 144px 8%;
        grid-template-columns: repeat(1, 1fr);
    }
    #about-page > img {
        justify-self: center;
    }
}