* {
  margin: 0;        /* Removes margins from everything */
  padding: 0;       /* Often paired to reset padding too */
  box-sizing: border-box;  /* Makes width/height predictable */
}

::selection {
  background: var(--blue-1);
  color: #ffffff;
}

::-moz-selection {
  background: var(--blue-1);
  color: #ffffff;
}


:root{
    --background-contact: var(--grey-2);
    --background-primary: var(--grey-1);
    --blue-1: rgb(0 0 255 /1);
    --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
    --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
    --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
    --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
    --font-size-fluid-4: clamp(3.5rem, 16vw, 5rem);
    --grey-1: rgb(248 248 248 / 1);
    --grey-2: rgb(41 43 52 / 1);
    --grey-3: rgb(255 255 255 / 0.8);
    --grey-4: rgb(255 255 255 / 0.5);
    --size-fluid-1: clamp(.5rem, 1vw, 1rem);
    --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
    --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
    --size-fluid-4: clamp(2rem, 4vw, 3rem);
    --size-fluid-5: clamp(4rem, 5vw, 5rem);
    --size-fluid-6: clamp(5rem, 7vw, 7.5rem);
    --size-fluid-7: clamp(7.5rem, 10vw, 10rem);
    --size-fluid-8: clamp(10rem, 20vw, 15rem);
    --size-fluid-9: clamp(15rem, 30vw, 20rem);
    --size-fluid-10: clamp(20rem, 40vw, 35rem);
    --text-contact-paragraph: var(--grey-4);
    --text-contact-title: var(--grey-3);
    line-height: 1.2;

}



body {
    background-color: var(--background-primary);
    font-family: Barlow, sans-serif;
}



h1 {
    font-size: var(--font-size-fluid-2);
    font-family: Permanent_Marker, sans-serif;
    margin-block: 0%;
}

h2 {
    font-size: var(--font-size-fluid-1);
    font-family: Barlow-ExtraBold, sans-serif;
}


a {
    text-decoration-line: none;
    color: black;
}

a:hover, .language:hover {
    color: var(--blue-1);
}

.navbar {
    padding: var(--size-fluid-2) var(--size-fluid-3) var(--size-fluid-1) var(--size-fluid-3);
    background-color: var(--background-primary);
    display: flex;
    position: sticky;
    top: 0px;
    align-items: center;
    justify-content: space-between;
    z-index: 500;
}

.inverted {
    color: white;
    background: none;
}

.menu {
    display: flex;
    gap: var(--size-fluid-1);
    font-family: BarlowCondensed-Bold, sans-serif;
    font-size: var(--font-size-fluid-1);
    text-transform:uppercase;
}

.language {
    font-family: inherit;
    background-color: white;
    text-transform: inherit;
    border-width: 1px;
    border-radius: 0.375rem;
    font-size: var(--font-size-fluid-0);
    cursor: pointer;
    padding: 0 var(--size-fluid-1) 0 var(--size-fluid-1);
}


#hero {
    position: sticky;
    height: 100svh;
}

.hero-image {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0px;
    box-shadow: 0px 0px 15svw 15svw rgb(0 0 0 / 0.6) inset;
    background-image: url("assets/63f5567d77491c990de99239_MONCLER + RICK OWENS - 6_upscayl_4x_realesrgan-x4plus3.webp");
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}

/* Mobile breakpoint */
@media (max-aspect-ratio: 1) {
  .hero-image {
    background-image: url("assets/1339969.webp");
  }
}

.hero-title{
    display: flex;
    align-items: end;
    justify-content: center;
    height: 40%;
    width: 100%;
    position: absolute;
    top: 0px;
}

.title {
    position: fixed;
    font-family: BarlowCondensed-SemiBold, sans-serif;
    color: white;
    font-size: var(--font-size-fluid-4);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0px 2px 5px rgb(0 0 0 / 0.2);
}


#projects {
    display: flex;
    flex-direction: column;
    padding-left: var(--size-fluid-3);
    padding-bottom: var(--size-fluid-7);
    gap: var(--size-fluid-3);
}

.project-gallery{
    display: flex;
    height: 60svh;
    overflow: auto;
    column-gap: 4px;
}

.project-info{
    padding: var(--size-fluid-1) var(--size-fluid-3) 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.tasks {
    font-family: Barlow-Bold, sans-serif;
}

.gallery-image{
    height: 100%;
    object-fit: contain;
    flex-grow: 0;
    flex-shrink: 1;
}


#contact {
    position: relative;
    height: 85svh;
    padding: var(--size-fluid-7) var(--size-fluid-6) var(--size-fluid-5) var(--size-fluid-3);
    background-color: var(--background-contact);
    display: flex;
    gap: var(--size-fluid-3);
}

.contact-info {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--size-fluid-6);
}

.contact-column {
    display: flex;
    flex-direction: column;
    gap: var(--size-fluid-4);
}

.contact-flex {
    display: flex;
    flex-direction: column;
    gap: var(--size-fluid-1);
}

.contact-title {
    color: var(--text-contact-paragraph);
    font-size: var(--font-size-fluid-0)
}

.contact-text {
    color: var(--text-contact-title);
    font-size: var(--font-size-fluid-0)
}

.bottom{
    position: absolute;
    padding: inherit;
    bottom: 0px;
    right: 0px;
}

#contact-home {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100svh;
    width: 100%;
    background-color: var(--background-primary);
    z-index: 1000;
    overflow: hidden;
}


/* ----- FONTS ----- */


@font-face {
    font-family: Barlow;
    src:
        url('assets/Barlow/woff2/Barlow-Regular.woff2'),
        url('assets/Barlow/woff/Barlow-Regular.woff');
    font-display: swap;
}

@font-face {
    font-family: Barlow-Bold;
    src:
        url('assets/Barlow/woff2/Barlow-Medium.woff2'),
        url('assets/Barlow/woff/Barlow-Medium.woff');
    font-display: swap;        
}

@font-face {
    font-family: Barlow-ExtraBold;
    src:
        url('assets/Barlow/woff2/Barlow-ExtraBold.woff2'),
        url('assets/Barlow/woff/Barlow-ExtraBold.woff');
    font-display: swap;
}

@font-face {
    font-family: BarlowCondensed-SemiBold;
    src:
        url('assets/Barlow/woff2/BarlowCondensed-SemiBold.woff2'),
        url('assets/Barlow/woff/BarlowCondensed-SemiBold.woff');
    font-display: swap;
}

@font-face {
    font-family: BarlowCondensed-Bold;
    src:
        url('assets/Barlow/woff2/BarlowCondensed-Bold.woff2'),
        url('assets/Barlow/woff/BarlowCondensed-Bold.woff');
    font-display: swap;
}

@font-face {
    font-family: Permanent_Marker;
    src: url('assets/Permanent_Marker/PermanentMarker-Regular.ttf');
    font-display: swap;

}


/* ----- BOUTON ----- */


.button {
    padding: var(--size-fluid-1) 0 0 0;
}

.toggle-input {
    display: none;
}

.toggle-btn{
    display: inline-flex;
    padding: 0.5ch 1ch 0.5ch 1ch;
    font-size: var(--font-size-fluid-0);
    background: white;
    cursor: pointer;
    border-radius: 0.375rem;
    border: 1px solid rgb(226 232 240 /1);
}

.toggle-btn:hover {
    background: rgb(241 245 249 / 1);
}

.toggle-content {
    max-height: 0;
    overflow: hidden;
}

.toggle-input:checked + .toggle-btn + .toggle-content {
    max-height: 200px; /* Adjust based on your text height */
    padding: var(--size-fluid-1) 0 0 var(--size-fluid-1);
    max-width: 60ch;
}


/* ----- MARQUEE ----- */

.marquee {
    width: 100%; /* Full viewport width */
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
}

.left{
  animation: scroll-left 30s linear infinite; /* Adjust speed with duration */
}
.right{
  animation: scroll-right 30s linear infinite; /* Adjust speed with duration */
}

.marquee-content span {
    font-family: Barlow-Bold, sans-serif;
    font-size: 12svh;
    text-transform: capitalize;
}

@keyframes scroll-left {
    0% { transform: translateX(0%); } /* Start off-screen right */
    100% { transform: translateX(-50.3%); } /* End off-screen left */
}
@keyframes scroll-right {
    0% { transform: translateX(-50.3%); }
    100% { transform: translateX(0%); }
}




/* ----- FORM ----- */

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 76%;
    width: 100%;
    padding: var(--size-fluid-3) var(--size-fluid-3) var(--size-fluid-3) var(--size-fluid-3);
    gap: var(--size-fluid-2);
}

#contact-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--size-fluid-10);
    height: 50svh;
    background: white;
    padding: var(--size-fluid-3);
    border-radius: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    gap: var(--size-fluid-2);
}

.form-title {
    font-family: Barlow-Bold, sans-serif;
    font-size: var(--font-size-fluid-2);
}

input, textarea {
    width: 100%;
    padding: var(--size-fluid-1);
    border: 1px solid #ddd;
    border-radius: 0px;
    font-family: Barlow, sans-serif;
    font-size: var(--font-size-fluid-1);
    resize: none;
}

textarea {
    height: 100%;
}

input:focus, textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.3);
}

.send-btn {
    font-family: Barlow-Bold, sans-serif;
    padding: var(--size-fluid-1);
    background-color: black;
    color: white;
    border: none;
    border-radius: 0px;
    font-size: var(--font-size-fluid-1);
    cursor: pointer;
}

.send-btn:hover{
    background-color: var(--blue-1);
}

#thank-you {
    display: none;
    font-family: Barlow-Bold, sans-serif;
    padding: var(--size-fluid-3);
    font-size: var(--font-size-fluid-1);
    background: white;
    border-radius: 0px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}


/* ----- 404 ----- */
.error-container {
    font-family: Barlow, sans-serif;
    font-size: var(--font-size-fluid-0);
    text-align: center;
    padding: var(--size-fluid-4) var(--size-fluid-4);
    gap: var(--size-fluid-1);
}

.error-container h1 {
    font-family: Barlow-Bold, sans-serif;
}

.error-container a {
    text-decoration: underline;
}