/* TEXT */ 
body, html {
    margin: 0;
    background: #fefdfa; 
    color: #232320;
    font-family: "Noto Sans", sans-serif; /* font to use (in order of priority) */
    letter-spacing: 0.15em;
    overscroll-behavior: none;  /* browser does nothing when it reaches the end of the scroll (by default, browsers bounce a little when you overscroll) */
    overflow-x: hidden;         /* if there is overflow onscreen, clip it off. we use overflow-x only so we can still scroll down */
}

h1 {
    font-family: "Pixelify Sans", sans-serif; 
    font-size: 3.5em;
    letter-spacing: 0.1em;
    line-height: 130%;
    display: inline; /* allows for inline typewriter effect */
}
h1:lang(ar, fa) {
    font-family: "Handjet", sans-serif;
}
h1:lang(ja) {
    font-family: "DotGothic16", sans-serif;
    font-size: 3em;
}
h1:lang(hi) {
    font-family: "Sarala", sans-serif;
}
h1:lang(ko) {
    font-family: "Gugi", sans-serif;
}
h1:lang(zh) {
    font-family: "ZCOOL KuaiLe", sans-serif;
}

h2 {
    font-size: 2.3em;
    letter-spacing: 0.1em;
    line-height: 120%;
}

p {
    color:#232320;
    font-size: 1.3em;
    line-height: 150%;
    font-weight: 300;
}

a {
    /* display: block; */
    color: #232320;
    text-decoration: none;
}
a:hover {
    color: #e4ccfa; /* Set the link color on hover */
  }

ul {
    font-size: 1.3em;
}

/* IMAGES */
.profile-image {
    border-radius: 50%; /* Set border-radius to 50% to create a circular shape */
    overflow: hidden; /* Hide any overflow from the circular container */
}

/* SECTIONS */
/* a simple centered, spaced out flexbox -- used in nav bar */
.flexbox {
   display: flex;                      /* defines our flexbox class as something flexy :) */
   justify-content: space-between;     /* justify is for horizontal alignment. here, flex items are displayed with spaces inbetween */
   align-items: center;                /* align is for vertical alignment. here, flex items are aligned to the center of the flexbox */
}

/* stuff that goes inside the flex parent */
.flexbox__item {
    max-width: 100%; 
    min-width: 0;
 }

 /* formats big sections of the page */
 .big-tile {
    margin: 0 auto;
    max-width: 90%;
    padding-top: 8em;
    position: relative;
    overflow: visible; /* used to be hidden */
}
@media (max-width: 670px) { 
    .flexbox__block {
        padding-top: 7em; 
    }
}

/* for two column layouts */

/* parent div to hold the flex block columns */
.big-tile__box {
    padding: 0;
    max-width: 100%;
    margin: 0 auto;
} 
@media (min-width: 1300px) {      /* USES MIN WIDTH -- if the screen's width hits 1200px or bigger, move to the side*/
    .big-tile__box {
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
}

/* squishable flex block column child */
.flexbox__block {
   max-width: 100%;
   min-width: 0;
   flex: 0 0 auto;
   align-content: flex-start;
} 
.flexbox__block:not(:has(img)) {
    flex: 1;
}
.flexbox__block:has(> img) {
  justify-content: center;
  padding: 0 2em;
}
@media (max-width: 1300px) { 
   .flexbox__block {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       justify-content: center;
   }
}

.icon-box {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.1em 0;
    /* NEW */
    position: relative;
    z-index: 1;
    transition: opacity 0.3s ease;
}


.icon-box::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 2;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}


/* HEADER */
header {
    display: block;         /* a "block" element starts on a new line and takes up the available screen width */
    background: #fefdfa;  /* bg color is needed because otherwise, the header is transparent */
    z-index: 2000;          /* a higher z index means this element is placed farther in front onscreen */
}

.nav-header {
    position: fixed;       /* header always stays in the same place on viewport (even when scrolling) */
    width: 100%;           /* header fills all space within its parent */
}

.nav-bar {
    margin: 0 auto;        /* top and bottom margins are set to 0, browser determines left and right margins by itself */
    /* width: 100%; */
} 

.nav-list {
    margin: 0 auto;
    padding: 0;
    max-width: 90%;        /* nav bar takes up 90% of the screen */
    list-style-type: none; /* remove bullet points from nav-bar list */
    overflow: hidden; 
}

@media (max-width: 670px) { 
    .nav-list__item {
        padding-top: 5em; /* move nav bar items down (below logo) if the screen is compressed */
    }
}

.nav-list__link {
    padding: 1.5em 0.75em;
    display: block;
    position: relative;
    z-index: 10;
    font-size: 1.5em;
    font-weight: 300;
}

.nav-list__link::before {
    width: 100%; 
    height: 3px;
    bottom: 15px;
    /* position: relative; */
    /* z-index: 10; */
    /* font-size: 1.3em; */
}

/* adjust angle of rotation for each underline animation */
.nav-list__link--p:hover::before, .nav-list__link--c:hover::before {
    opacity: 1;
    transform: translateZ(0) scale3d(1.1, 1.1, 1.1) rotate(-2deg)!important;
}
.nav-list__link--f:hover::before {
    opacity: 1;
    transform: translateZ(0) scale3d(1.1, 1.1, 1.1) rotate(1deg)!important;
}
.nav-list__link--a:hover::before {
    opacity: 1;
    transform: translateZ(0) scale3d(1.1, 1.1, 1.1) rotate(2deg)!important;
}

/* special orientations */
/* used to center the logo */
.item__center {
    position: absolute;
    left: 50%;
}

.mobile_logo {
    position: absolute;
    right: 50%;
}
/* used to space apart the social buttons */
.item__auto-left-margin {
    margin-left: auto!important;        /* important will override existing styling for this property */
}



/* GALLERY */
.tile-grid {
    margin: 2em auto 0;
    max-width: 100%;
    padding-top: 25px;
    padding-bottom: 100px;
    position: relative;
    display: grid;
    gap: 2em;                                   /* defines space between grid tiles */
    grid-template-columns: repeat(3, 1fr);      /* grid with 3 columns of equal width, and grid layout will by default make all items in each row equal height. */
}
@media (max-width: 1130px) { 
    .tile-grid {
        display: grid;
        gap: 4em; 
        grid-template-columns: repeat(1,1fr);
        justify-items: center;
    }
}

.project-tile {
    width: 100%;
    /* padding: 3em; */
    position: relative;
    display: inline-block; /* used to be block */ 
    text-decoration: none;
    transition: all .1s ease-in-out;        /* transition speed, with ease for smoothness */
    /* height: max-content; */
}
@media (max-width: 1130px) { 
    .project-tile {
        width: 70%;
    }
}
@media (max-width: 550px) { 
    .project-tile {
        width: 100%;
    }
} 

.project-tile__image {
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-tile__content-box {
    float: left;
    margin: 3em;
    max-width: 90%; 
}

.project-tile__category {
    display: inline-block;
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    opacity: 0.6; 
}

.project-tile__languages {
    display: inline-block;
    font-size: 12px;
    text-align: right;
    text-transform: upper;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    opacity: 0.6; 
}

.project-tile__title{
    margin-bottom: 1em;
    display: block;
    text-align: left;
    font-size: 30px;
    letter-spacing: 1px;
}
/* realigns title if screen is compressed */
@media (max-width: 1300px) { 
    .project-tile__title {
        text-align: center;
    }
}

.project-tile__text {
    opacity: 0;
}

.project-tile:hover {
    transform: translate3d(0,-5px,0);                /* translates the tile upwards */
    box-shadow: 0 52px 74px rgba(0,0,0,.12);       /* adds shadow */
} 
.project-tile:hover .project-tile__image {
    opacity: 0;
    z-index: -2;
} 

.project-tile:hover .project-tile__text {
    opacity: 1;
} 

.project-tile--proj1:hover {
    background: white;
    color: #4b3235;
}

.button-link {
    display: inline-block;
    padding: 0.5em;
    border-radius: 15px;
    background: white;
    text-decoration: none;
}


/* FOOTER */
footer {
    position: relative;
    z-index: 1000;
}

.footer__content {
    max-width: 90%;
    margin: 0 auto;
    padding: 20em 0 1em;
    font-size: 0.8em;
}

.footer__content--footnote {
    font-size: 0.5em;
    max-width: 90%;
    margin: 0 auto;
    padding-bottom: 25px;
}


/* MISCELLANEOUS */
.logo {
    enable-background: new 0 0 502 502;
}

.typewriter {
    font-size: 3.5em;
    font-weight: bold;
    font-family: "Pixelify Sans", sans-serif;
    color: #e4ccfa;
    animation: blink 1s step-end infinite;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* reorganize !! */

.underline-link {
    transition: color 0.2s linear;
}

.underline-link::before {
    position: absolute;
    width: 100%; 
    height: 5px; 
    left: 0;
    /* bottom: 15px; */
    display: block;
    z-index: 5;
    content: '';
    background:#e4ccfa;
    opacity: 0;
    transform: translate3d(0, 5px, 0);
    transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.underline-link:hover::before {
    opacity: 1;
    transform: translateZ(0) scale3d(1.1, 1.1, 1.1) rotate(-2deg);
}
.underline-link:hover {
    color: #232320; /* keep link color the same on hover if we're underlining */
}


.form {
    transition: all .4s ease-in-out;
}

.contact-form__input {
    margin: 7px auto;
    width: 50%;
    height: 30px;
    padding: 12px 15px;
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    border: 1.5px dashed #e4ccfa;
    border-radius: 20px;
 }

 .contact-form__message {
    min-height: 100px;
 }

 .contact-form__submit {
    margin: 15px auto;
    padding: 25px;
    width: 25%;
    display: block;
    font-family: "Noto Sans", sans-serif;
    font-size: 100%;
    border-color: transparent;
    border-radius: 16px;
    background: #eedaff;
    opacity: 0.8;

 }

 .contact-form__submit:hover {
    background: #e4ccfa;
 }



.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3em, 0.5em));
    gap: 1em;
    min-width: 200px;
}

.skill-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;

    background: #f0f0f0;
    color: #232320;
    border: none;
    border-radius: 15px;
    padding: 1em 2em;

    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease;
}

.skill-button svg {
    width: 25px;
}

.skill-button .label {
    margin: 0 0.75em;
    display: none;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
  }

.skill-button:hover {
    transform: scale(2);
}

.skill-button.expanded {
    flex-direction: row; 
    justify-content: start; 
    grid-column-end: span 4;
    grid-row-end: span 2;
    font-size: 1em;
    padding: 40px 20px;
    transform: none; /* cancel hover scale */
    z-index: 10;
}

.skill-button.expanded .label {
    display: block;
    opacity: 1;
    max-height: 100px; /* enough to show the label */
 }

 .skill-button:hover {
    transform: scale(1.1);
}