/* Root Variables */
:root{

  /* colors */
    --primary-color: #da7531;
    --secondary-color: #FE9E67;
    --secondary-light: #fad6a9;
    --darkest-color: #da6931;
   
    --extra-grey: #C6BEB8;
    --shade-one: #0005; 
    --shade-two: #5550;
    --shade-three: #101010;
    --shade-four: #333333;
    --article-bkgd-color: #C2C2C2;
    --font-stack: "Open Sans", sans-serif;



        /* box shadow preset*/
        --white-box-shadow: 0 0 .5rem #ffffff;
        --black-box-shadow: 0 0 0.5rem #0002;


        /* Heights */
        --banner-base-height: 50vh;
        --banner-large-height: 75vh;
    
    
        /* Verticle align */
        --banner-vertical-align: center;
    
    
        /* Horizontal align */
        --banner-hor-align: flex-start;
      
    
        /* Text align */
        --text-align: left;

        /* small photo */
        --small-img-size: 35vh;

        /* font scales major third*/
        --scale-xl: 2.441rem;
        --scale-large: 1.953rem;
        --scale-med: 1.563rem;
        --scale-small: 1.235rem;

            /* PC headings use --lg
          mobile headings use --sm */
          /* extra font sizes */
          --mobile-para: 0.5rem;
          --xsm: 0.7rem;
          --sm: 0.9rem;
          --md: 1.1rem;
          --lg: 1.5rem;
          --xlg: 1.9rem;
          --xxlg: 2.2rem;

}

/* <----------------------< FONTS >-----------------------------------> */

@font-face {
  font-family: 'ValorantFont';
  src: url('../content/fonts/Valorant\ Font.ttf') format('truetype');

}

/* Define Black Wukong font */
@font-face {
  font-family: 'BlackWukongFont';
  src: url('../content/fonts/Harukaze.ttf') format('truetype');
  

}

/* Define Sketch font */
@font-face {
  font-family: 'SketchFont';
  src: url('../content/fonts/Sketch_PersonalUseOnly.ttf') format('truetype');

}

/* Define Off-White font */
@font-face {
  font-family: 'OffWhiteFont';
  src: url('../content/fonts/Helvetica-Bold-Font.ttf') format('truetype');

  
}

/* Create classes for each font */
.valorant-font {
  font-family: 'ValorantFont', sans-serif;
}

.black-wukong-font {
  font-family: 'BlackWukongFont', sans-serif;
  letter-spacing: 0.5rem;
  font-weight: 200;
}

.sketch-font {
  font-family: 'SketchFont', sans-serif;
  letter-spacing: 0.5rem;
  
}

.off-white-font {
  font-family: 'OffWhiteFont', sans-serif;
  letter-spacing: 0.2rem;
 
}



/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Set core root defaults */
html {
  line-height: 1.5;
  font-family: var(--font-stack);
  font-size: 1.2rem;

    scroll-behavior: smooth;
  
}

html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  margin: 0;
  background-color: black;
  
}

/* Update default margin */
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  margin: 0 0 1.5rem;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a {
  text-decoration-skip-ink: auto;
  color: white;
}

a:hover,
a:focus-visible {
  color: #D96666;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

svg {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Containers ---------- */

.container {
  width: min(65em, 100%);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container--text {
  width: min(45em, 100%);
}

/* ----------------------------------------------- */
/*------------------ PAGE 1 ------------------*/
/* ----------------------------------------------- */

/* <----- Video -------------------------------> */

main {
    /* Adjust the value based on the height of your video container */
}

.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
  }
  
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* <----- Skip Links -------------------------------> */

.skip-links{
    padding: 0;
    margin:0;
    list-style: none;
  
  }
  
  .skip-links__link {
      position: absolute;
      top: -10rem;
      left: 0.5em;
      display: inline-block;
      padding: 0.55em 1.5em 0.5em;
      background-color: var(--color-secondary);
      color: white;
      border-radius: 0.25em;
      text-decoration: none;
      z-index: 10000000;
  } 
  
  .skip-links__link:focus {
     top: 1rem;
     color: white;
  }
  
  /* to top */
  
  .to-top {
    position: fixed;
    bottom: -0.5rem;
    right: 1.5rem;
    background-color: var(--primary-color);
    color: black;
    font-weight: bold;
    padding: 0.5rem 0.5rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    text-decoration: none;
    box-shadow: var(--black-box-shadow);
  
  
  }
  
  .to-top.visible {
     translate: 0;
  }
  
  .to-top:is(:hover, :focus-visible) {
    translate: 0;
    bottom: 0;
    color: var(--shade-three);
  }
  



/* <----- NAVBAR -------------------------------> */


/* mobile first*/

.navbar{
    flex-direction: column;
    background: linear-gradient(to bottom, var(--shade-four), var(--shade-one) ) ;
    overflow: hidden;
    /* box-shadow: var(--white-box-shadow); */
  }
  
   .navbar .container{
    padding: 0;
    gap: 1.5rem; 
   
  }
  
  
  .nav-list{
    flex-direction: column;
    text-align: center;
    margin: 0;
    padding: 0
  }

   /* nav li hover animation----------------------------- */

  .nav-list li {
    position: relative;
  }
  

  .nav-list li::after {
    content: '';
    position: absolute;
    width: 10%;
    height: 0.17rem;
    border-radius: 0.125rem;
    transition: background-color 0.3s ease; 
    top: 50%;
    left: 25%;
  }
  

  
  
  .nav-list li:hover::after {
    /* background-image: url("../content/li_arrow2.png") if you want to use a hover image; 
    background-size: cover; 
    background-position: center; */
    background-color: #fff;
  }
  
    /* nav li hover animation ----------------------------- */
  

  .logo-head{
    margin: 1.5rem;
  }
  
  
  /* things that dont have to be changed with query */
  
  .nav-list li{
    list-style:  none;
    color: white;
    padding: 0 1rem;
    transition: background-color 0.3s; 
   
  }
  
  .nav-list li .link {
    text-decoration: none;
    display: block;
    padding: 1.5rem;
    cursor: pointer; 
   
  }
  
  .nav-list li:hover,
  .nav-list li:focus,
  .nav-logo:hover,
  .nav-logo:focus{
    transform: scale(1.1);
    transition: transform 0.3s;
     
  }
  
  
  .logo-head-div{
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem 0rem;
  }
  
  .link:hover,
  .link:focus{
    color: white;
  }
  
  
  
  .nav-logo{
     width: 5em;
  }
  
  /* Web Media Queries */   


  @media only screen and (min-width: 45em){
    .navbar{
    
        display: flex;
        flex-direction: row;
        border-top: 0.5rem solid var(--darkest-color);
       
    }
    
    .navbar .container{
      display: flex;
      justify-content: space-between;
      padding: 0 1.5rem;
      
      align-items: center;  

    }
    
    .link{
      text-decoration: none;
      color: white; 
    }
    

    
    .nav-list {
        display: flex;
        flex-direction: row;
        margin: 0 ;  
    }

    .nav-list li::after {
        top: 75%;
        left: 26%;
        width: 50%;
      }
    
  }


/* <----- BANNER -------------------------------> */

.banner {
    background: linear-gradient(to top, var(--shade-three), var(--shade-one) ) ;
    background-size: cover; 
    background-position: bottom;
    
  }


  
  .banner .container{
    min-height: var(--banner-base-height);
    display: flex;
    justify-content: var(--banner-hor-align);
    align-items: var(--banner-vertical-align);
    text-align: var(--text-align);
    /* padding-top: 3rem; */
    padding-bottom: 3rem;
  }
  
  .banner__content{
    width: min(35em, 100%);
    margin: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  
  .banner__header{
    color: var(--secondary-color);
    font-size: 1.8rem;
    animation: HeadFadeIn 0.8s ease-in-out forwards;
    padding-top: 2rem;
  }


  .banner__img {
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards ;
    width: 22rem;
  
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
        0% {
            opacity: 0;
        }
    }



    @keyframes HeadFadeIn {
        0% {
            
            opacity: 0;
            transform: translateX(-10rem);

        }
        100% {
            
            opacity: 1;
            transform: translateX(0rem);
        }

    }

    .banner__content .btn {
        animation: HeadFadeIn 1.2s ease-in-out forwards;
    }

    .banner__content .btn:hover {
          background-color: #fad6a9;
    }

    

  
  .banner__para{
    color:white;
    font-size: 1.2rem;
    line-height: 2rem ;
    animation: HeadFadeIn 1s ease-in-out forwards;
  }
  
  .banner--top{
    --banner-vertical-align: flex-start;
  } 
  
  .banner--bottom{
    --banner-vertical-align: flex-end;
  }
  
  .banner--center{ 
    --banner-vertical-align: center;
    --banner-hor-align: center;
    --text-align: center;
  } 
  
  .banner--large{
    min-height: var(--banner-large-height);
  } 
  
  .banner--right{
    --banner-hor-align: flex-end;
    --text-align: right;
    
  }


  /* banner media queries */
  
  @media only screen and (min-width: 45em){
    .banner__content{
      
      margin: 0rem;
    }
  }

   /* <----- SKILLS -------------------------------> */

   #skills
  {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    align-items: start;
  }

  #skills .container{
    margin-top: 4rem;
  }

   .skills-content{
     display: flex;
     flex-direction: column;

     padding-top: 3rem;
     padding-bottom: 3rem;
     background: linear-gradient(to bottom, var(--shade-three), var(--shade-one) )
   }

  

   .skills-header {
      display:flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 2rem;
      grid-column: 1 / -1;
     
   }

   #trans{
       opacity: 0; 
     
   }

   .skills-header1 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: none;
    margin-bottom: 2rem;
    grid-column: 1 / -1;
  
   
 }



   .skills-header__h2 {
       font-size: 2.2rem;
       color: white;
      
       
       
   }

   .skills-header__h3{
    font-size: 2.2rem;
    color: white;
    filter: drop-shadow(var(--white-box-shadow));
   }

   .skill .card__info .card__text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
   }
   

  
   .skill{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /* flex: 1; */
   }

   .skill .card__img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%; /* Adjust as needed */
}

   .skill .card__img img {
    padding: 1rem;
     
}

.skill .card__img i {
  padding: 1rem;
  color: white;
  width: 100%;
}



   @media only screen and (min-width: 60em){

    #skills{
      grid-template-columns: 1fr 1fr ;
    }
         
        .skill {
            flex-direction: row;
        }

        .skill .card__img {
             width: 20%;

        }

        .skill .card__img img {
            padding: 3rem;
        }

        .skill .card__img i {
          padding: 3rem;
      }

        .skill .card__info .card__text-box{
            
            align-items: flex-start;
            text-align: left;
        }
   }






  /* <----- FOOTER -------------------------------> */

.footer{
      background: linear-gradient(to top, var(--shade-four), var(--shade-one) ) ;
      color: white;
      border-bottom: 0.5rem solid var(--darkest-color);
    }
  
  
    .footer .container{
      padding-top: 3rem;
      padding-bottom: 3rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;    
  
    }
  
    .footer__logo{
      display: flex;
      gap: 0.75rem;
      align-items: center;
      color: white;
      text-decoration: none;
  
    }
  
    .span__title{
        text-transform: uppercase;
    } 
  
    .footer__logo:hover,
    .footer__logo:focus{
      
      transform: scale(1.1);
      transition: transform 0.3s;
    }

    .flex-center-column {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
  text-align: center;      /* center the text inside */
  gap: 1rem;               /* optional spacing between heading and button */
  min-height: 200px;       /* gives some vertical space */
}


  
    .footer__icon{
      width: 8em;
    }
  
    .footer__nav{
      border-top: none;
    }
  
    .footer__title{
      font-size: 1.525rem;
      font-weight: bold;
      line-height: 1.3;
    }
  
    .footer__list{
      padding-left: 1.5rem;
      margin: 0;
      border-left: 0.125rem solid var(--secondary-color);
      list-style-type: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
  
    }
  
    .footer__link{
      color: white;
      text-decoration: none;
  
    }
  
    .footer__link:hover,
    .footer__link:focus{
      color: var(--secondary-color);
    }
  
    .footer-small-links{
      display: flex;
      flex-direction: column;
      
    }
  
    .footer__copyright{
      padding-bottom: 1rem;
    }

    .footer__copyright2{
       display: flex;
       flex-direction: row;
       align-items: center;
    }

    .small-media-logo {
        padding: 0.5rem;
        width: 3rem;
    }

    .small-media-logo:hover,
    .small-media-logo:focus{
      
      transform: scale(1.1);
      transition: transform 0.3s;
    }

    /* alt bkgd for contact page */

    .alt-fade-bkgd {
        background: linear-gradient(to bottom, var(--shade-three), var(--shade-one) )
    }


  
  
    /* footer media queries */
  
  
    @media only screen and (min-width: 45em){
  
       .footer .container{
          flex-direction: row;
          justify-content: space-between;
  
       }
  
       .footer__logo{
        flex: 2 0;
        align-self: flex-start;
       }
  
       .footer__nav {
        flex: 2 0;
       }
  
  
  
    }
  
    /* <----- BUTTONS -------------------------------> */
  
  
    .btn{
      display: inline-block;
      border-radius: 0.2rem;
      padding: 1rem 2rem;
      margin: 0.2rem;
      text-decoration: none;
    
    }
  
    .btn--secondary{
      color: black;
      background: var(--primary-color);
      border: none;
      font-size: 1.2rem;
  }
  
  .btn:hover,
  .btn:focus{
    color: black;
    transform: scale(1.02);
    transition: ease-in-out 0.3s;
    box-shadow: var(--black-box-shadow);
    cursor: pointer;
  }

   /* note, make sure to get rid of the previous hover scale effect if you run with this animation */

   .btn-card {
   
    color: white;
    background: linear-gradient(to left, var(--primary-color), var(--darkest-color) );
    border: none;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;

     /* transition */
     transition: background-color .2s, border-color .2s, color .2s;
   }



  .btn-card:hover,
  .btn-card:focus-visible,

  .form-btn:hover,
  .form-btn:focus-visible{
     cursor: pointer;
     background: linear-gradient(to left, var(--primary-color), var(--secondary-light) );  
   
    
  }

  /* ----------------------------------------------- */
/*------------------ PAGE 2 - Portfolio ------------------*/
/* ----------------------------------------------- */





  /* <----- CARDS -------------------------------> */

/*  Mobile First */



.card-content{
    padding-top: 3rem;
    padding-bottom: 3rem;
    background: linear-gradient(to bottom, var(--shade-three), var(--shade-one) ) ;
    
  }
      
  .card-content .container{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .card-content__title{
     color: black;
     font-size: 2.444;
  }
  
  .card{
    flex: 1;
    display: flex; 
    justify-content: space-between;
  
    flex-direction: column;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3rem);
    box-shadow: var(--white-box-shadow);
    margin-bottom: 1rem;
    
  }
  
  
  .card__info{
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 2rem;
   
  }
  
  .card-content__text{
    color: white;
  }
  
  .card-content__title{
    color: white;
    font-size: var(--scale-small);
    line-height: 1.3;
    
  }
  
  
  
  .card-btn{
      
  }
  
  
  .card__img img{
      padding: 3rem;
      display: block;
      width: 100%;
      object-fit: contain;
      /* aspect-ratio: 16 / 9; */
      border-top-right-radius: 1rem;
      border-top-left-radius: 1rem;
     
      
  }


  
  /* Card media queries */
  
  @media only screen and (min-width: 45em){


    
      .card-content .container{
        display: grid;
        grid-template-columns: 1fr 1fr ;
        min-width: 75%;
        
      }  
  
      .card-content__title{
        font-size: var(--scale-med);
    }
    } 
    
  
  @media only screen and (min-width: 60em){
      
      .card-content .container{
        grid-template-columns: repeat(3, 1fr);
      }
  
  
      .card-content__title{
          font-size: var(--scale-large);
      }
  
  }

  /* <--------------------< Design Port photos >--------------------------> */


.design-nav{
  display: none;
  
  
  overflow: hidden;
  padding: 3rem;
}

.design-nav__header{

}

.design-nav__list{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}


.design-nav-list__item{
 padding: 1rem;
 transition: transform 0.3s ease,  0.3s ease;
}


.design-nav-list__item img{
  text-decoration: none;
}

.design-nav-list__item{
  width: 5rem;
}


  


.sketches__cont{
  display: flex;
  flex-direction: row;
}

.sketchesBtn-next, .sketchesBtn-prev, 
.coverArtBtn-next, .coverArtBtn-prev,
.owBtn-next, .owBtn-prev,
.movieBtn-next, .movieBtn-prev {
   background-color: transparent;
   color: white;
   border: none;
   transition: transform 0.3s ease, background-color 0.3s ease;
   cursor: pointer;
   margin: 0.5rem;
   padding: 0;
}

.sketchesBtn-next:hover,
.sketchesBtn-next:focus,
.sketchesBtn-prev:hover,
.sketchesBtn-prev:focus,
.coverArtBtn-next:hover,
.coverArtBtn-next:focus,
.coverArtBtn-prev:hover,
.coverArtBtn-prev:focus,
.owBtn-next:hover,
.owBtn-next:focus,
.owBtn-prev:hover,
.owBtn-prev:focus,
.movieBtn-next:hover,
.movieBtn-next:focus,
.movieBtn-pre:hover,  
.movieBtn-pre:focus {
  transform: scale(1.1);
  filter: drop-shadow(var(--white-box-shadow));
}


.sketchesBtn-next i,
.sketchesBtn-prev i,
.coverArtBtn-next i,
.coverArtBtn-prev i,
.owBtn-next i,
.owBtn-prev i,
.movieBtn-next i,
.movieBtn-prev i {
  font-size: 2rem;
}

.sketches-card{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.sketches__img{
   width: 15rem;
}


  .off-white__img{
    width: 15rem;
  }

  .cover-art__img{
   width: 15rem;
  }

  .movie__img{
    width: 15rem;
  }

  /* .halo__vid{
    box-shadow: var(--white-box-shadow);
  } */

  #val-design__btn{
    
    background: rgb(255, 70, 85);
    border: 0.125rem solid white;
    color: white;
  }

  #val-design__btn:hover{
   
    border: 0.125rem solid white;
    box-shadow: var(--white-box-shadow);
    color: white;
   
  }

  .design-port{
   
    padding-bottom: 3rem;
    background: linear-gradient(to top, var(--shade-three), var(--shade-one) ) ;
    
    
  }

  .design-port .container{
    /* display: grid;
    grid-template-columns: 1fr; */

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 3rem;
  }


  .design-card{
 
    display: flex; 
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3rem);
    box-shadow: var(--white-box-shadow);
    margin-bottom: 3rem;
    padding: 1rem;
    
  }

  .design-port__title{
    color: white;
    font-size: var(--scale-small);
    padding: 0.5rem;
    line-height: 1.3;
    margin: 0;
    text-align: center;
  }

  .design-card .container{
    padding-left: 0rem;
    padding-right: 0rem;
  }

  .design-port__img{
    border-radius: 0.5rem;
    border: 0.125rem solid white;
    box-shadow: var(--white-box-shadow);
    
  }

  .design__img {
    margin: 1rem;
   
  }

  .design-port__cover_img{
    border-radius: 0.5rem;
    border: 0.125rem solid white;
    box-shadow: var(--white-box-shadow);
   
    
  }

  .design-card__info{
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
  }

   /* design-port media queries */

    @media only screen and (min-width: 45em){

      .design-port{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

  .design-nav__header{
    font-size: var(--md);
    color: white;
    margin: 0;
  }

      .design-port .container{
         min-width: 75%;
        
         
      }

      .sketches__img{
       width: 40rem;
     }

     .off-white__img{
      width: 40rem;
    }
  
    .cover-art__img{
      width: 40rem;
    }

    .movie__img{
      width: 40rem;
    }
     

      .design-nav{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-bottom: 4rem;
        width: 75%;
        border-radius: 0.5rem;
        box-shadow: var(--white-box-shadow);
        background-color: rgba(0, 0, 0, 0.5);
      }
      
      .design-nav__list{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0;
        padding: 0
      }

      .design-nav-list__item:hover,
      .design-nav-list__item:focus{
         transform: scale(1.1); /* Scale slightly bigger */
         filter: drop-shadow(--white-box-shadow);
         cursor: pointer;
      }
      
      
      .design-nav-list__item{
        width: 5rem;
      }
      
      .design-nav-list__item img{
       
        
      }
    

      .design-port{
        
      }
    
      .design-card{
  
       
        padding: 1rem;
        margin-bottom: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    
      
      }  

      .design__img {
        margin: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex:1;
      }

      .design-port__img {

       

      }

      .design-port__title{
        font-size: var(--scale-med);
    }

      .cover-art{
        
      

      }

      .cover-art__title {
        grid-column: 1 / -1;
      }
    } 

    

    @media only screen and (min-width: 60em){

      .design-port .container{
       
     }

     .sketches__img{
      width: 55rem;
   }



  .off-white__img{
   width: 55rem;
 }

 .cover-art__img{
   width: 55rem;
 }

 .movie__img{
   width: 55rem;
 }

      .design-port{
        grid-template-columns: 1fr ;
      }
      
      .design-card{
        padding: 0.5rem;
        margin-bottom: 2rem;
      }  

      .design-port__img {
       
  
      }

      .design-port__title{
        font-size: var(--scale-large);
    }

      .cover-art{
    
    }

    .cover-art__title {
      grid-column: 1 / -1;
    }
  
  }




  
   /* ----------------------------------------------- */
/*------------------ PAGE 3 - Contact ------------------*/
/* ----------------------------------------------- */

  /* ---------- form ---------- */
    
/* mobile first */

.profile-picture__cont{
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 3rem;
}

.profile-picture{
  border-radius: 120rem;
  width: 15rem;
  border: 0.125rem solid white;
  box-shadow: var(--white-box-shadow);
}


.contact-me{
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(to top, var(--shade-three), var(--shade-one) );
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.contact__wrap{
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3rem);
    color: white;
    border-radius: 1.5rem;
    box-shadow:var(--white-box-shadow);
    overflow: hidden;
}

.form-grid{
    padding: 3rem 2.5rem;
    display: grid;
    --cols: 1;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 1.5rem;
}

.contact__title{
    margin-bottom: 0;
    font-size: 2.5rem;
}

input, select, textarea {
    color: black;
    background-color: white;
    font-weight: 200;
}


.checkbox{
    width: 1rem;
    height: 1rem;

}



#email-radio, #tel-radio{
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    justify-content: center;
}

.email-radio, .phone-radio{
   display: flex;
   justify-content: center;
   align-items: center;
}

.email-radio {
  margin-right: 2rem;
}



.form-unit__row{
    display: inline-flex;
    justify-content: center;
}


input, select, textarea, .form-btn{
    display: block;
    width: 100%;
    padding: .25rem;
    border: 0.0625rem solid #ccc;
    border-radius: .25rem;

}

#message::placeholder {
  color: black; 
}

.terms-link{
    color: var(--secondary-light);
}


.full-width-label{
    display: block;
    width: 100%;
    font-size: .875rem;
    font-weight: bold;
    text-transform: uppercase;
    
}

/* redone contact page with no form <------------------ */

.support-content{
  background: linear-gradient(to bottom, var(--shade-three), var(--shade-one)); 
  width: 100%;
  height: 100vh;
}

.support-content .container{
  
  padding-top: var(--mobile-pd-top-cont);
  height: 80%;
}

.support-case-gd2{
 
}

.support-case{
  text-align: center;
  color: white;
  margin: 0.1rem;
}

.support-case p{
  font-size: var(--mobile-para);
}

.support__h1{
   color: white;
   font-size: var(--sm);
   padding: 0;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

.support-case__logos{
  display: flex;
  justify-content: center;
  align-items: center;
}



@media only screen and (min-width: 45em){
  .support-content .container{
    padding-top: var(--pc-pd-top-cont);
  }

  .support__btn{
    padding: var(--pc-btn);
    font-size: var(--lg);
  }

  .support__h1{
     font-size: var(--xlg);
  }

  .support-case p{
    font-size: var(--sm);
  }

  .support-case{
    margin: 4rem;
  }

  .support-case-gd2{
      padding: 0;
      margin: 2rem;
  }


} 

/*----------- CODE TO IMPLEMENT BELOW -----------*/

/* for styles, this make it easier  */

 fieldset {
    display: contents;
    padding: 0;
    margin: 0;
    border: none;
} 

label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;

}

.radio-grid{
    display: grid;
    gap: 1.3rem;
    grid-template-columns: subgrid;   
} 



/* ---------- Media Queries ---------- */

@media only screen and (min-width: 45em){
   
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    
      .full {
        grid-column: 1 / -1;
      }



}