/*
  Author: Berry Buer
  css for ITD 210 capstone project
  Filename: style.css
  
  mobile first update
*/

  :root {
    /* for easy reference and updating of design elements */
    /* new color palette */
    --darkerPurple: #401f3e;
    --darkPurple: #3f2e56;
    --coolBlue: #453f78;
    --paleBlue: #759aab;
    --cream: #faf2a1;
    --clear: rgba(0, 0, 0, 0);

    --valid: rgb(150, 0, 255);
    --invalid: rgb(255, 100, 100);

    /* opaque and transparent gradients */
    --cuteBlue: linear-gradient(var(--coolBlue), var(--paleBlue));
    --coolFade: linear-gradient(var(--clear), var(--coolBlue));
    --blueFade: linear-gradient(var(--clear), var(--paleBlue));
    --thankyou: linear-gradient(45deg, rgb(255, 200, 200), rgb(250, 200, 255), rgb(200, 200, 255), rgb(200, 250, 255));

    /* hero images, for easy reference and alteration */
    --placeholderHero: linear-gradient(rgba(155, 235, 224, .5), rgba(54, 201, 198, .5)), url("../images/1000by1000px.png");
    --indexHero: url("../images/artshow_sumbmission.jpg");
    --aboutHero: linear-gradient(var(--clear), rgba(0, 0, 255, 0.25)), url("../images/blue_blink.gif");
    --aboutHeroStatic: linear-gradient(var(--clear), rgba(0, 0, 255, 0.25)), url("../images/blue_blink.png");

    /* Borders */
    --yellowLine: solid var(--cream) 5px;
    --blueLine: solid var(--paleBlue) 0.3rem;
    --curve: 1.25rem;

    /* Fonts; can easily swap out and change fonts later*/
    --baseFont: sans-serif;
    --fancy: serif;
    --thanks: gabriela;
  }

  /* custom fonts */
@font-face {
  font-family: gabriela;
  src: url(Gabriela-Regular.ttf);
  /* google fonts */
}

  /*===== simple animations =====*/
  @keyframes slideIn {

    /*.links menu drawer slides in nicely*/
    from {
      transform: translateX(100%);
    }
  }

  @keyframes slideDown {
    from {
      transform: translateY(-15%);
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(15%);
    }
  }

  @keyframes loadIn {

    /*animation from module 10 assignment, yet to be implemented*/
    to {
      opacity: 1;
      transform: translate(0);
    }
  }

  @keyframes increase {

    /*animation for gallery overlays*/
    from {
      opacity: 0.5;
      transform: scale(0.75);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slideLoop {
    /*for thank you page, but I'm having trouble getting it to work*/
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  /*===== ABSOLUTE RESET =====*/
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  /*===== Basic Semantic Styling =====*/
  body {
    font-family: var(--baseFont);
    background-image: var(--cuteBlue);
    line-height: 1.5;
  }

  main {
    border-bottom: solid var(--darkerPurple) 5px;
    margin: 0;
    padding: 0;
  }

  section {
    background-color: var(--clear);
    margin: 2em 1em;
  }

  article,
  aside,
  form {
    background-color: white;
    color: black;
    border: var(--yellowLine);
    border-radius: var(--curve);
    padding: 1em;
    margin: 1em auto;
  }

  fieldset {
    /* functionality*/
    display: flex;
    flex-direction: column;
    padding: 0.75em 3em;
    gap: 0.1rem;
    /* style (really wanna make a gradient border with border-radius)*/
    border: var(--blueLine);
    text-transform: capitalize;
    border-radius: var(--curve);
    background-color: white;
  }

  fieldset>button {
    margin: 1em 0;
  }

  fieldset>legend, fieldset>label {
    color: var(--valid);
  }

  header,
  footer {
    margin: 0;
    padding: 1em;
    background-color: var(--darkPurple);
    color: var(--cream);
    text-align: center;
  }

  img {
    /*basic styling that applies to all images*/
    max-width: 100%;
    height: auto;
    object-fit: cover;
    margin: auto;
    border-radius: var(--curve);
  }

  video {
    max-width: 100%;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border-radius: var(--curve);
  }

  table {
    /*fetch API update*/
    font-family: arial;
    margin: auto;
    width: 100%;
    max-width: 100%;
  }

  th,
  td,
  tr {
    max-width: min-content;
    padding: 1%;
    font-size: clamp(14px, 4vw, 16px);
    border-right: solid var(--paleBlue) 3px;
    border-bottom: solid var(--paleBlue) 3px;
    overflow-wrap: break-word;
    /* Break long words */
    hyphens: auto;
    /* Add hyphens for better wrapping (optional) */
  }

  th {
    text-transform: capitalize;
    background: linear-gradient(var(--clear), lightblue);
  }

  td ul,
  td ol {
    margin: 1em;
    padding: 1%;
  }

  input,
  textarea,
  button,
  select,
  option {
    font-size: clamp(14px, 4vw, 16px);
    border: 3px solid;
    border-radius: 5px;
    padding: 5px;
    background: inherit;
  }

  /*form validation*/
  input:valid,
  textarea:valid,
  select:valid {
    border-color: var(--valid);
    box-shadow: 0 3px var(--valid);
  }

  input:invalid,
  textarea:invalid,
  select:invalid {
    border-color: var(--invalid);
  }

  button {
    border-color: var(--coolBlue);
    background-color: var(--cream);
  }

  button:hover,
  button:focus {
    cursor: pointer;
    outline: 3px solid var(--coolBlue);
  }

  /*===== Semantic Text Styling =====*/
  h1 {
    font-size: clamp(2em, 4vw, 2.5em);
    transition: ease 0.2s;
  }

  h2,
  legend {
    font-size: clamp(1.5em, 4vw, 1.8em);
  }

  section>h2 {
    color: white;
  }

  h3,
  fieldset>label {
    font-size: clamp(20px, 4vw, 22px);
  }

  p,
  li,
  a,
  input,
  textarea {
    font-size: clamp(16px, 4vw, 18px);
  }

  p {
    margin-bottom: 1em;
  }

  a {
    color: blue;
  }

  a:hover,
  a:focus {
    outline: 2px solid blue;
  }

  /*==== Navigation =====*/
  .desktop {
    display: none;
    /*hides .desktop links on mobile*/
  }

  header {
    /*flexes all the content horizontally and spaces it nicely*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    /*sticks to top of screen and overlays content*/
    top: 0;
    z-index: 2;
    /*keeps header on top of ALL content*/
    border-bottom: solid var(--darkerPurple) 5px;
    /* animation for size change */
    transition: ease 0.2s;
  }

  nav ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 15px;
  }

  nav ul li {
    list-style-type: none;
    text-transform: uppercase;
  }

  nav a {
    /*nav link colors*/
    color: var(--cream);
  }

  nav a:hover {
    /*base cream*/
    color: white;
    outline: none;
  }

  nav a:focus,
  #gallery-menu:focus {
    /*also applies to .link*/
    outline: 3px solid var(--cream);
    outline-offset: 7.5px;
  }

  #nav-toggle,
  #back, .links a {
    color: var(--cream);
    background-color: var(--clear);
    padding: 1px 2px;
    border: none;
    font-size: clamp(16px, 4vw, 18px);
    text-align: left;
  }

  #nav-toggle:hover,
  #nav-toggle:focus,
  #back:hover,
  #back:focus, .links a:hover, .links a:focus {
    cursor: pointer;
    color: var(--darkerPurple);
    background-color: var(--cream);
    border-radius: var(--curve);
    outline: none;
  }

  .links {
    /*link containing*/
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 0;
    padding: 1em;
    gap: 10px;

    /*onscreen position*/
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;

    /*color*/
    background-color: var(--coolBlue);
    border-left: var(--yellowLine);
    text-transform: capitalize;

    /*animation*/
    animation: slideIn;
    animation-duration: 0.8s;
  }

  #menu-drawer {
    display: none;
  }

  /*closed #menu-drawer, default position*/
  #menu-drawer.open-drawer {
    display: block;
  }

  #gallery-menu {
    overflow: hidden;
  }

  #gallery-menu:hover {
    /*gallery link functions the same as others*/
    color: white;
    cursor: pointer;
    overflow: hidden;
  }

  #galleries-drop {
    /*dropdown menu for galleries*/
    cursor: auto;
    overflow: hidden;
    display: none;
    position: fixed;
    right: 0.5em;
    /* link organization*/
    flex-direction: column;
    text-align: left;
    margin: 0;
    padding: 1em;
    min-width: max-content;
    gap: 10px;
    /* similar style to drawer */
    background-color: var(--coolBlue);
    border: var(--yellowLine);
    border-radius: var(--curve);
    text-transform: capitalize;
    /*animation*/
    animation: slideDown;
    animation-duration: 0.7s;
  }

  /*===== id styling =====
styling by #ids and children of #id parents */
  #index-cards .card:active {
    /*active click only applies to cards on index.html*/
    box-shadow: 0px 10px 20px var(--darkerPurple);
  }

  #about-hero {
    /*the hero image in about also relies on styling from .hero_image class*/
    background-image: var(--aboutHero);
    background-repeat: repeat-x;
    background-size: contain;
    background-position: center;
    position: relative;
    padding: 5%;
  }

  #about-hero h2 {
    font-family: var(--fancy);
  }

  #about-container {
    /*grid with one column for mobile*/
    display: grid;
    grid-template-columns: auto;
  }

  #about-container img {
    /*white and square border to make it stand out (and to look like a polaroid for fun)*/
    border-radius: 0;
    border: solid white 5px;
    width: 65%;
    /*the image is larger than the other images, and I don't want it to be too big*/
  }

  #skill-cards .container {
    /*reuses .container class as grid for about.html*/
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
  }

  #skill-cards .card {
    /*once more, reusing .card and applying style as child of #skill cards*/
    margin: 0;
    padding: 1em;
    background-color: var(--cream);
    color: white;
  }

  /*styling the text as children of #skill-cards*/
  #skill-cards h2 {
    text-align: center;
    color: white;
  }

  #skill-cards p {
    text-align: left;
    margin: 0;
  }

  #action-call {
    /* separate section styling to make it stand out from other elements*/
    padding: 1em;
    border-color: var(--cream);
    border-style: solid;
    border-width: 10px 3px 3px 3px;
    border-radius: 0;
    background: var(--coolFade);
    color: white;
    text-align: center;
  }

  #action-call h2 {
    font-family: var(--fancy);
    font-size: clamp(2em, 4vw, 2.5em);
  }

  /* tab div on media.html styleing */
  #audio-box {
    /* holds and centers content*/
    display: flex;
    padding: 1em;
    justify-content: center;
    text-align: center;
    background: linear-gradient(var(--cream) 3em, var(--clear)) .1em;
    border: var(--yellowLine);
    border-top: none;
    border-bottom-left-radius: var(--curve);
    border-bottom-right-radius: var(--curve);
    border-top-right-radius: var(--curve);
  }

  #audio-tab {
    /* button container */
    overflow: hidden;
    max-width: fit-content;
    border-top-left-radius: var(--curve);
    border-top-right-radius: var(--curve);
    background: var(--cream);
    padding: 0 1em;
    gap: 0;
  }

  #audio-tab button {
    margin: 0;
    padding: 0.5em 1em;
    border-radius: 0;
    border: none;
    background: var(--cream);
    outline: 5px solid var(--cream);
    cursor: pointer;
    transition: 0.3s;
  }

  #audio-tab button:hover,
  #audio-tab button:focus {
    /*scales up on hover and focus*/
    transform: scale(1.2);
  }

  /*===== class styling =====
styling by classes and children of classes*/

  .hero_image {
    height: 100%;
    background-image: var(--indexHero);
    margin: auto;
    padding: 15%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
  }

  .hero_image>h2 {
    font-size: clamp(3rem, 6vw, 5rem);
    text-shadow: 0 5px 15px var(--darkerPurple);
    -webkit-text-stroke: 1px white;
  }

  /*new index.html card organization; copied from module 10 animation assignment*/
  .container {
    /*applies flex to cards on index.html, reused for about.html as a grid*/
    margin: 2em auto;
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
  }

  .card {
    border-radius: var(--curve);
    background: var(--coolFade);
    /*grid to stack text on top of image*/
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    align-items: center;
    /*animation*/
    transition: transform 0.5s ease;
  }

  .card:hover,
  .card:focus {
    box-shadow: 0 5px 10px var(--darkerPurple);
  }

  .card:focus {
    /*cards on index.html have links onclick*/
    outline: 5px solid var(--coolBlue);
  }

  .card img {
    margin: auto;
    justify-self: center;
    align-self: center;
    object-fit: cover;
    grid-area: 1 / 1 / 2 / 2;
  }

  .card h3 {
    text-transform: capitalize;
    padding: 1%;
    font-family: var(--fancy);
    color: white;
    grid-area: 1 / 1 / 2 / 2;
    text-shadow: 0 15px 25px var(--darkerPurple);
    font-size: 400%;
    line-break: loose;
  }

  .image-grid {
    /*one column, basic mobile*/
    display: grid;
    grid-template-columns: auto;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
  }

  .image-grid img {
    margin: auto;
    padding: 0;
  }

  .span-2,
  .span-3 {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* lightbox overlay */
  .lightbox {
    /*basic function*/
    display: none;
    position: fixed;
    top: 1em;
    z-index: 3;
    height: 100%;
    width: 100%;
    /*margins*/
    margin: 0;
    padding: 2em;
    overflow: auto;
    /*color & design*/
    background: var(--darkPurple);
    border-radius: var(--curve);
    border: var(--yellowLine);
    align-items: center;
    justify-content: center;
    /* animation */
    animation: increase;
    animation-duration: 0.5s;
  }

  .light {
    /*div created by javascript that holds the images, which lightbox.js retrieves from*/
    position: relative;
    justify-content: center;
    margin: auto;
    padding: 0;
    width: 100%;
  }

  .clickMe:hover,
  .clickMe:focus {
    /*hover and focus effects for images*/
    cursor: pointer;
    transform: scale(1.05);
    transition: ease 0.7s;
    z-index: 1;
  }

  .clickMe:focus {
    outline: 3px solid var(--coolBlue);
  }

  .slides {
    /*images in the lightbox & light*/
    display: none;
    border-radius: 0;
  }

  .caption {
    /*Descriptions and background for individual images (separate from alt text)*/
    display: none;
    margin: 1em auto;
    padding: .75em;
    background: white;
    text-align: left;
    border-radius: var(--curve);
  }

  .close {
    /*x button in lightbox*/
    color: white;
    font-size: clamp(2em, 4vw, 2.5em);
    /*font-size: clamp(1.5em, 4vw, 1.8em*/
    font-weight: bold;
    position: sticky;
    padding: 0.25rem 0.5rem;
    margin: 1rem;
  }

  .close:hover,
  .close:focus {
    text-decoration: none;
    cursor: pointer;
    border: 3px white solid;
  }

  /* classes for media.html tab div*/
  .tab-content {
    /* javascript controls display */
    display: none;
    /*animation on change */
    animation: slideUp;
    animation-duration: 1s;
  }

  .tab-content>h3 {
    text-transform: capitalize;
  }

  /*===== media queries =====
  375px, 768px, 1280px*/
  @media (min-width: 900px) {

    /*tablets*/
    /*grid grow to have three columns*/
    #about-container {
      grid-template-columns: repeat(3, 1fr);
    }

    #about-container article {
      grid-column: span 2;
      /* spans two columns*/
      grid-row: 1;
      /*ensures article and image stay on the same row*/
    }

    #about-container img {
      grid-column: 3;
      /*goes to column 3 behind article*/
      grid-row: 1;
      width: 90%;
      /*image grows to 90% width*/
    }

    /*card grid switches to two columns*/
    #skill-cards .container {
      grid-template-columns: repeat(2, 1fr);
    }

    .image-grid {
      /*three column grid*/
      grid-template-columns: repeat(3, 1fr);
    }

    .span-2 {
      grid-column: span 2;
    }

    .span-3 {
      grid-column: span 3;
    }

    #digital-grid .clickMe:hover,
    #digital-grid .clickMe:focus {
      /*images on digital_art.html increase in size slightly more on larger screens*/
      transform: scale(1.1);
    }

    #traditional-grid .clickMe:hover,
    #traditional-grid .clickMe:focus {
      /*images on traditional_art.html are already big, so I'm having shrink*/
      transform: scale(0.95);
    }

  }

  @media (min-width: 1000px) {
    .desktop {
      display: block;
    }

    /*navigation links switch to header*/
    .links,
    .mobile-nav {
      display: none;
      /*ensures mobile nav is hidden from desktop*/
    }
  }

  @media (min-width: 1200px) {

    /*desktop & large tablets*/
    section {
      /*different section styling for larger screens*/
      border: var(--yellowLine);
      border-radius: var(--curve);
      background: var(--clear);
      padding: 1em;
    }

    /*grid grows to four columns*/
    #skill-cards .container {
      grid-template-columns: repeat(4, 1fr);
    }

    /*text stroke grows to fit bigger screen*/
    #about-hero h3 {
      -webkit-text-stroke: 1.5px white;
    }

    .card:hover,
    .card:focus {
      /*animation only applies to desktop*/
      box-shadow: 0 5px 10px var(--darkerPurple);
      transform: translateY(-10px);
    }

    /*grid grows to three columns*/
    .container {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {

    /*copied from module 10 animation assignment*/
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }

    .card {
      transition: none;
    }

    .card:hover {
      /* cards don't translate up, only shadow highlight / glow*/
      box-shadow: 0 5px 10px var(--darkerPurple);
      transform: none;
    }

    #about-hero {
      /* changes gif to static image */
      background-image: var(--aboutHeroStatic);
    }
  }