/*

==============================================================

Pssst... 👀  
How nice of you to take a peek in here!  
Not everyone takes the time to look under the hood.  
So here’s a well-deserved digital high five 🖐  

Got a briefing, spotted a bug, or just want to say hi?  
Let’s connect!
Mail: mauro.vanderflaes@gmail.com
Instagram: @maurovanderflaes
Linkedin: Mauro Van der Flaes

==============================================================

*/


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
================
Font styles
================
*/

@font-face {
  font-family: 'Thunder-ExtraBoldLC';
  src: url('fonts/Thunder-ExtraBoldLC.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans-CondBold';
  src: url('fonts/OpenSans-CondBold.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans-CondLight';
  src: url('fonts/OpenSans-CondLight.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}


:root {
  --titles: "Thunder-ExtraBoldLC";
  --subtitles: "OpenSans-CondBold";
  --text: "OpenSans-CondLight";
}

.titles {
  font-family: "Thunder-ExtraBoldLC", serif;
  font-style: normal;
}

.subtitles {
  font-family: "OpenSans-CondBold", serif;
  font-optical-sizing: auto;
}

.text {
  font-family: "OpenSans-CondLight", serif;
  font-optical-sizing: auto;
}

h1 {
  font-family: var(--titles);
  font-size: 5em;
  font-weight: 100;
  padding-bottom: 0;
  text-transform: uppercase;
}

h2 {
  font-family: var(--subtitles);
  text-transform: uppercase;
  color: var(--PearlWhite);
}

h3 {
  font-family: var(--subtitles);
  text-transform: uppercase;
  color: var(--PearlWhite);
}

p {
  font-family: var(--text);
}

a {
  font-family: var(--subtitles);
  color: var(--PearlWhite);
  text-decoration: none;
  text-transform: uppercase;
}

/*
================
Color styles
================
*/
:root {
  --PearlWhite: #EAEAE7;
  --IvoryBeige: #E8D8C4;
  --AntiqueRed: #6D2932;
  --MerlotRed: #561C24;
  --OnyxGrey: #40403D;
  --shadow-color: rgba(0, 0, 0, 0.5);
}

/*
================
Body styles
================
*/

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;

}

body {
  margin: 0;
  background-color: var(--MerlotRed);
  color: var(--IvoryBeige);
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.no-drag {
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/*
================
Nav styles
================
*/

nav {
  overflow: hidden;
  background-color: var(--MerlotRed);
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  display: flex;
  justify-content: space-evenly;
  padding: 4% 0%;
  z-index: 999;
  font-size: 1.4em;
}

/*
================
Home styles
================
*/

.home {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15%;
  flex-direction: column;
  min-width: 100%;
}

.video-portrait-wrapper {
  border-radius: 100px 100px 0% 0%;
  width: 85vw;
  height: 60vh;
  aspect-ratio: 3 / 4;
  margin: 20px auto;
  background: black;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  z-index: 1;
}

.video-portrait-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-controls {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-left: 2%;
  z-index: 10;
}

.video-controls button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-controls button:hover {
  transform: scale(1.2);
}

.video-controls img.icon {
  width: 32px;
  height: 32px;
  user-select: none;
  pointer-events: none;
}

.video-portrait-wrapper img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.video-banner img {
  width: 100%;
  height: auto;
  max-height: 25%; /* Pas aan naar wens, bv. 20% of 15% */
  object-fit: contain;
}


.logo {
  width: 80%;
  display: flex;
  justify-content: center;
  margin-left: 10%;
  margin-top: -12%;
  padding: 0;
  position: relative;
  z-index: 900;
}

.home-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0;
}

.home-text h2 {
  font-size: 10vw;
  margin: 0;
  padding: 0;
}

.checkout {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 5%;
}

.checkout img {
  width: 10%;
  height: auto;
  rotate: 90deg;
}


/*
================
Work styles
================
*/

.work {
  margin-top: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.work h2 {
  font-size: 6.5em;
  color: var(--IvoryBeige);
  font-family: var(--titles);
}

.workpieces {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2%;
}

.video-portrait-wrapper-work {
  border-radius: 10% / 5% 0%;
  width: 80vw;
  height: 82vh;
  aspect-ratio: 3 / 4;
  margin: 20px auto;
  background: black;
  overflow: hidden;
  display: block;
  position: relative;
}

.video-portrait-wrapper-work video,
.video-portrait-wrapper-work img {
  border-radius: 10% / 5% 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-portrait-wrapper-work img {
  transition: transform 0.4s ease;
}

.video-portrait-wrapper-work:hover img {
  transform: scale(1.05);
}

.seework {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
}

.seework h3 {
  white-space: nowrap;
  font-size: 2em;
}

.seework img {
  width: 10%;
  height: auto;
}



/*
================
About styles
================
*/

.about {
  display: flex;
  justify-content: center;
  margin-top: 30%;
  margin-right: 10%;
  margin-left: 10%;
}

.about-con {
  display: flex;
  flex-direction: column-reverse;
}

.about-text {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.about-text img {
  width: 100%;
  margin-bottom: 2%;
}

.about-text h2 {
  font-size: 1.4em;
  margin-bottom: 2%;
}

.about-text p {
  font-size: 1.2em;
  margin-bottom: 0;
}

#ik {
  width: 85vw;
  height: 60vh;
  border-radius: 20% 20% 0% 0%;
  object-fit: cover;
  object-position: 50% 20%;
  margin-bottom: 2%;
}

#panda-con {
  display: none;
}

#panda {
  display: none;
}

/*
================
Connect styles
================
*/

.connect {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 30% 10% 0% 10%;
}

.connect h2 {
  color: var(--IvoryBeige);
  font-size: 4.4em;
  font-family: var(--titles);
}

.socials {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 10%;
}

.socials a {
  font-size: 4em;
  line-height: 85%;
}

.socials a:hover {
  color: var(--AntiqueRed);
}

.connect p {
  margin-bottom: 8%;
  font-size: 1.2em;
}

/*
================
Project styles
================
*/

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

.project-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: 20%;
  margin-left: 8%;
  margin-bottom: 5%;
}

.back {
  rotate: 180deg;
  width: 35%;
}

.project-h2 {
  margin-right: 5%;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.project-image {
  width: 90%;
  margin-bottom: 5%;
}

.project-p {
  margin-left: 5%;
  margin-right: 5%;
}

/*
================
All work styles
================
*/

.allwork {
  margin-top: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.workback {
  width: 20%;
  rotate: -180deg;
  margin-left: -5%;
  margin-bottom: 10%;
}

.allwork h2 {
  font-size: 6.5em;
  color: var(--IvoryBeige);
  font-family: var(--titles);
}

.allworkpieces {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2%;
  margin-bottom: 10%;
}

.video-portrait-wrapper-allwork {
  border-radius: 10% / 5% 0%;
  width: 80vw;
  height: 82vh;
  aspect-ratio: 3 / 4;
  margin: 20px auto;
  background: black;
  overflow: hidden;
  display: block;
  position: relative;
}

.video-portrait-wrapper-allwork video,
.video-portrait-wrapper-allwork img {
  border-radius: 10% / 5% 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seeallwork {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  margin-bottom: 50%;
}

.seeallwork h3 {
  white-space: nowrap;
  font-size: 2em;
}

.seeallwork img {
  width: 10%;
  height: auto;
}

.video-portrait-wrapper-allwork img {
  transition: transform 0.4s ease;
}

.video-portrait-wrapper-allwork:hover img {
  transform: scale(1.05);
}