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

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

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}


* {
    box-sizing: border-box;
}

a {
    color: black; /* Change this to your desired color */
}



hr {
    border: none; /* Remove the default border */
    height: 2px; /* Set the height of the line */
    background-color: black; /* Set the color of the line */
    margin: 30px 0px; /* Add some vertical spacing */
    opacity: 0.7; 
}

body {
    font-family: 'Satoshi', sans-serif;
    background-color: #f4f4f4;
    text-align: left;
    margin: 0;
    font-weight: 400;
    font-size: clamp(1.1rem, 1vw, 1.2rem);
}




h1 {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(2.5rem, 5vw, 6rem);
    margin: 0;
}


h2 {
    font-family: 'Satoshi', sans-serif;
    font-style: italic;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 400;
    margin: 0;
    opacity: 1;
}

h3 {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(1.5rem, 2vw, 4rem);
    font-weight: 700;
    font-style: italic;
    margin-bottom: 2%;
}

h4 {
    font-family: 'Satoshi';
    font-size: clamp(1.1rem, 1.5vw, 2.2rem);
    font-weight: 400;
    font-style: italic;
    margin: 0;
}


a {
    transition: color 0.2s ease;
    display: inline-block;
}

a:hover {
  color: #0066cc;
}

blockquote {
  border-left: 4px solid #ccc;
  margin: 1em 0;
  padding-left: 1em;
  font-style: italic;
}



.body-2 {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(1.25rem, 2vw, 4rem);
    font-weight: 800;
    font-style: italic;
}

.body-3 {
    font-family: 'Satoshi', sans-serif;
    font-size: clamp(1rem, 1vw, 1.2rem);
    font-weight: 400;
    background-color: #DEEBEF;
    padding-right: 5%;
    padding-left: 5%;
    padding-top: 10%;
    padding-bottom: 10%;
}

.container {
    display: flex;
    height: 100vh;
}

.panel {
    padding: 0;
    overflow-y: auto;
}


.panel.swiper {
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      position: relative;
      max-width: 100%;
      box-shadow: 8px 8px 16px 4px rgba(0, 0, 0, 0.5);
}


.swiper-button-prev {
    color: ghostwhite;
}

.swiper-button-next {
    color: ghostwhite;
}

.swiper .swiper-button-next.swiper-button-disabled,
.swiper .swiper-button-prev.swiper-button-disabled { display: none; }


.panel.left-margin {
    text-justify: center;
}

  

.about {
    flex: 0 0 20%;
    height: 100vh;
    margin: 0;
    padding:0;
    background-color: lightblue;
}

.project-description {
    height: 100%;
    min-height:0;
    flex: 0 0 80%;
    display: flex;
    padding: 2%;
    flex-direction: column;
    background-color: transparent;
}

.project-container {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    flex: 1;
    padding-bottom: 10%;
    padding-top: 5%;
    box-shadow: 8px 8px 16px 4px rgba(0, 0, 0, 0.5);
    background-color: transparent;
}


.project {
    flex: 1 1 40%;
}

.project-media {
    align-self: flex-start;
    flex: 1 1 60%;
    overflow: auto;
    padding: 0;
    height: auto;
    width: 100%;
    background-color: transparent;
    padding-left: 30px;
    padding-right:30px;
}


.project-media img, .project-media iframe {
    max-width: 100%;
    background-color: transparent;
}

.project-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

.project-media iframe {
    box-shadow: 8px 8px 16px 4px rgba(0, 0, 0, 0.3);
}

.swiper,
.swiper-slide {
    background-color: transparent;
}

.project-media .swiper {
    box-shadow: 8px 8px 16px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1200px) {
    .project, .project-media {
        flex: 1 1 100%;
        padding-left: 0;
        padding-right: 0;
    }
}



.ratingcontainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
   }

.awardcontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.awards {
    width: 30%;
    padding: 0%;
}

.rating {
    width: 90%;
     padding: 0%;
     box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2);

}

.headshot {

    max-width: 70%;
}

.aboutme {
    background-color: lightblue;
    padding-right: 10%;
    padding-left: 10%;
    padding-bottom: 10%;
}



.video-scaling {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    box-shadow: 8px 8px 16px 4px rgba(0, 0, 0, 0.3);
}


.sticky-element {
  position: fixed;
  top: 2%;
  right: 2%;
  background-color: lightblue;
  padding: 15px 15px;
  border-radius: 0px;
  z-index: 100;



}

.sticky-element a {
  color: white;
  text-decoration: none;
}

.icon-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: transparent;

}

.headshoticons {
    display: flex;
    justify-content: center;
}

.icon-container a {
    text-decoration: none;
}


.icon {
  width: clamp(30px, 2.5vw, 50px);
  height: clamp(30px, 2.5vw, 50px);
  transition: filter 0.2s ease;
  cursor: pointer;
}

.icon-container a:hover .icon {
  filter: invert(21%) sepia(92%) saturate(2378%) hue-rotate(201deg) brightness(92%) contrast(103%);
}