@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Playfair+Display:wght@700&display=swap');

body {
    margin: 0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

object,svg{
    pointer-events: none;
}

/* Navbar */
.topnav{
    position: absolute;
    top: 40px;
    right: 12.5vw; /* 180px */
}

.topnav ul{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    column-gap: 4.583vw; /* 66px */
}

.topnav li {
    list-style-type: none;
}

.topnav a {
    text-decoration: none;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem; /* 20px */
    line-height: 1.5rem; /* 24px */
    
    /* Shades 0 */
    color: #FFFFFF;    
}


.topnav a:hover{
    color: #D14E96;
    cursor: pointer;
}

/* Home */

.home {
    background: url(\images\\gradient.png) no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    display: grid;
    place-items: center;
    align-items: center;
    min-height: 120vh;

    color: white;
}

.home__text {
    min-height: 55vh;
}

.home h1 {
    color: white;
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 6.563rem; /* 105px */
    line-height: 8.75rem; /* 140px */
    text-align: center;
    letter-spacing: -0.01em;
    margin:0;
    /* margin-left: 12.5vw;
    margin-right: 12.5vw; */
    margin-bottom: 30px;
}

.home h2 {
    text-align: center;
    color: #D8D5EB;
    font-family: 'Montserrat';
    font-style:normal;
    font-weight: 400;
    font-size: 2rem; /* 32px */
    line-height: 3.25rem; /* 52 px */
    margin-left: 12.5vw;
    margin-right: 12.5vw;
    margin-top:30px;
}

.scroll-arrowz {
    width: 47px;
}

/* Wave done */

.wave {
    position: absolute;
    bottom: -5px;
    left: 0;
    overflow: hidden;
    line-height: 0;

    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
  }

  .wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 20vh;
  }

  .wave .shape-fill {
    fill: white;
  }

  /* Scroll-hint */
.scroll-hint{
    position: absolute;
    bottom: 22vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-hint h5 {

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.625rem; /* 26px */
    margin-bottom: 30px;
    text-align: center;
    color: #D8D5EB;
}

/* Projects */
.projects h1 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 3.75rem; /* 60px */
    line-height: 5rem; /* 80px */
    text-align: center;
    letter-spacing: 0.015em;
    margin-bottom: 100px;
}

.projects {
    margin-left: 12.5vw;
    margin-right: 12.5vw;
    padding-bottom: 200px;
}

.projects-container {
    /* min-height: 120vh; */

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2.625rem; /* 42px */
    max-width: 1082px;
    margin: auto;
}

.projects-single-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    gap: 2.625rem; /* 42px */
}

.projects-double-col{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2.625rem;
}

.grid-project {
    position: relative;
}

.grid-project-1 {
}

.grid-project-2 {
}

.grid-project-3 {
}

.grid-project-41 {

}

.grid-project-42 {

}

/* TODO image */
.grid-project img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 95vh;
    object-fit: contain;
}

.grid-project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: 600ms ease-out;

}

.grid-project:hover .grid-project-overlay {
    transform: scale(0.6);
    filter: opacity(0) blur(2px);
    transition: 600ms ease-out; 
}

.grid-project-1:hover .grid-project-overlay {
    background-color: #E5DCE3;
    box-shadow: 0 0 100px 100px #E5DCE3;
}

.grid-project-1B:hover .grid-project-overlay {
    background-color: #E5DCE3;
    box-shadow: 0 0 100px 100px #E5DCE3;
}

.grid-project-2:hover .grid-project-overlay {
    background-color: #E4EDEC;
    box-shadow: 0 0 100px 100px #E4EDEC;
}
  
.grid-project-3:hover .grid-project-overlay {
      background-color: #e6cbcc;
      box-shadow: 0 0 100px 100px #e6cbcc;
}

.grid-project-41:hover .grid-project-overlay {
    background-color: #e7e5f5;
    box-shadow: 0 0 100px 100px #e7e5f5;
}

.grid-project-42:hover .grid-project-overlay {
    /* background-color: #ebe8f4;
    box-shadow: 0 0 100px 100px #ebe8f4; */
}
  
.grid-project:hover .grid-project-hover{
    filter: opacity(1);
    transition: 600ms ease-in;
}

  
  
/* Contact */

.contact {
    min-height: 80vh;
    margin-left: 12.5vw;
    margin-right: 12.5vw;
    padding-bottom: 5vh;
}

.touch h1 {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-size: 3.75rem; /* 60px */
    line-height: 5rem; /* 80px */
    text-align: center;
    letter-spacing: 0.015em;
    color: #343338;
    margin-top:0px;
    margin-bottom: 40px;
}

.touch h2 {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.625rem; /* 26px */
    line-height: 2.625rem; /* 42px */
    /* or 42px */

    text-align: center;
    color: #343338;
    margin-top:0px;
    margin-bottom: 100px;
}

 /* Contact form */
.contact-form {
    background: #FAF9FF;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 12.778vw; /* 184px */
    gap: 10px;
}

.contact-form-inner { 
    width: 100%
}

.contact-form h3{
    text-align: center;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 1.625rem; /* 26px */

    color: #343338;
}

.contact-form label{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 1.125rem; /* 18px */
    line-height: 1.375; /* 22px */

    color: #343338;
}

.contact-form input {
    border: 1px solid #7A7885;
    border-radius: 6px;
    height: 50px;
    width: 100%;
    margin-top: 10px;
    padding-left: 20px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem; /* 20px */
    
}

.input-container:focus-within label {
    color: #5140AD;
}

input[type="text"]:focus-visible {
    outline-color: #5140AD;
    border: 2px solid #5140AD;
}

input[type="text"]:focus {
    border: 2px solid #5140AD;
}

/**
stackoverflow.com/questions/7920742/delay-html5-invalid-pseudo-class-until-the-first-event
 * All required inputs initially are white.
 */
 :required {
    background-color: white;
  }
  
  /**
   * If a required input has been touched and is valid, it should be white.
   */
  .touched:required:valid {
    background-color: white;
  }
  
  /**
   * If a required input has been touched and is invalid, it should be pink.
   */
  input.touched:required:invalid {
    border: 2px solid #AD4040;
  }

  textarea.touched:required:invalid {
    border: 2px solid #AD4040;
  }

  label.touched {
    color:#AD4040;
  }

  label.valid {
    color:#343338;
  }

  

textarea:focus-visible {
    outline-color: #5140AD; 
    border: 2px solid #5140AD;
}

textarea:focus {
    border: 2px solid #5140AD;
}

.contact-form-inner__message{
    min-height: 120px;
}

.contact-form-inner__message textarea{
    min-height: 120px;
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    margin-top: 10px;
    padding: 20px;

    resize: none;

    border: 1px solid #7A7885;
    border-radius: 6px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem; /* 20px */
    line-height: 1.5rem; /* 24px */
}

.btn-send {
    width: 100%;
    height: 60px;

    background: #5140AD;
    border: 1px solid #7A7885;
    border-radius: 6px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 1.25rem; /* 20px */
    line-height: 1.5rem; /* 24px */
    text-align: center;
    color: #FFFFFF;
}

.btn-send:hover {
    background: #6051AD;
    cursor: pointer;
}

.btn-send:focus {
    background: #422FAD;
}

/* ... or via email */

.via-email{
    padding-left: 12.778vw; /* 184px */
    padding-right: 12.778vw; /* 184px */
    margin-top: 80px;
    margin-bottom: 40px;
    text-align: center;
}

.via-email h3 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 1.625rem; /* 26px */

color: #343338;
}

.btn-copy{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;

    width: 100%;
    height: 70px;

    background: #FFFFFF;
    border: 1px solid #7A7885;
    border-radius: 6px;

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.25rem;/* 20px; */
    line-height: 1.5rem;/* 24px; */
    text-align: center;
    color: #63616B;

    margin: auto;
    margin-top: 40px;
}

.notification {
    display: flex;
    opacity: 0;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    height: 1.25rem;
    
    /* Paragraph 03 Regular */
    
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25rem;
    text-align: center;

    margin-top: 10px;
}

.notification-success{
    color: #40AD4B;
}

.notification-validation{
    color: #AD4040;
    margin-bottom:10px;
    height: 1.25rem;
}

.validation-show{
    opacity: 1;
}

.notification-svg-container{
    display: inline-block;
	position: relative;
	width: 1.5rem;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 

}

#email-notification{
    transition: opacity 0.5s ease-out;
}

@media (max-width: 750px) {

    .home__text {
        min-height: 70vh;
    }

    .home h1{
        font-size: 4rem;
        line-height: 4rem; /* todo */
    }

    .home h2{
        font-size: 1rem;
    }

    .topnav {
        position: relative;
        margin: auto;
        top:unset;
        right: unset;
    }
    .topnav ul{
        padding-left: 0;
    }

    .btn-copy {
        font-size: 0.8rem;
        margin: auto;
    }
}

@media (max-width: 500px) {

    .home__text {
        min-height: 80vh;
    }

    .home h1{
        font-size: 4rem;
        line-height: 4rem; /* todo */
    }

    .home h2{
        font-size: 1rem;
    }

    .projects-container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .projects{
        margin: auto;
    }

    .contact{
        margin: auto;
    }
    .btn-copy {
        font-size: 1rem;
        margin:auto;
    }
}

.btn-copy h3{
    width: fit-content;
}

/* @media (min-width: 1200px) {
    .contact {
        max-width: 1082px;
        margin: auto;
    }

    .contact-form{
        max-width: 714px;
        padding: 50px 184px;
    }

    .via-email{
        max-width: 714px;
        padding-left:  184px;        
        padding-right:  184px;        
    }
} */

@media (max-height: 970px ) {
    .home h1 {
        font-size: 5.25rem;
        line-height: 7rem;
        margin-bottom: 24px;
    }

    .home h2 {
        font-size: 1.4rem;
        line-height: 2.6rem;
        margin-top: 16px;
    }

    .home h5 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .scroll-arrowz {
        width: 37px;
    }
}

@media  (max-width:900px) {
    .home h1 {
        font-size: 3.2815rem;
        line-height: 4.375rem;
        margin-bottom: 15px;
    }

    .home h2 {
        font-size: 1rem;
        line-height: 1.625rem;
        margin-top: 10px;
    }

    .home h5 {
        font-size: 0.8125rem;
        margin-bottom: 15px;
    }

    .scroll-arrowz {
        width: 37px;
    }
}

@media (max-height: 800px) {
    .projects-double-col img {
        max-height: 87vh; /* TODO */
    }
}

.copy-svg-container{
    border:none;
    background: none;
    display: inline-block;
	position: relative;
	width: 1.563rem;
    height: 1.875rem;
    margin-left: 1rem;
	vertical-align: middle; 
	overflow: hidden; 
    pointer-events: all;
}

.copy-svg-container:hover{
    cursor: pointer;
}

.svg-content{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.svg-content:hover{
    cursor: pointer;
}

/* footer */
.footer-gradient {
    background: url(\images\\gradient-footer2a.png) no-repeat ; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    position: relative;
    min-height: 70vh;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 12.5vw;
}

.footer-text{
    color: #D8D5EB;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap:12px;

}

.wave-footer {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);

    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
  }

  .wave-footer svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 20vh;
    transform: rotateY(180deg);
  }

  .wave-footer .shape-fill {
    fill: white;
  }

  @media (max-height: 500px) {
    .topnav {
        position: relative;
        top: unset;
        right: unset;
    }

    .scroll-hint {
        position: relative;
    }
    
    .scroll-hint {
        height: 0px;
    }

    .footer-gradient{
        min-height: 200vh;
    }

    .scroll-arrowz {
        width: 37px;
    }
}


.cursor-yummy, .cursor-sustainability, .cursor-bookstore,
.cursor-brainstorm, .cursor-natural,
.cursor-artshop {
    position: fixed;
    right: 0;
    border-radius: 50%;
    pointer-events: none;
    transition: transform .1s;

    text-align: center;
    color: white;

    width: 150px;
    height: 150px;
    z-index: 9999;
    display: grid;
    place-content: center;
    opacity: 0;
}
.cursor-yummy {
    background: #983C80;
}

.cursor-sustainability {
    background: #67d1e4;
}

.cursor-bookstore {
    background: #17C3B2;
}

.cursor-brainstorm {
    background: #A02129;
}

.cursor-natural {
    background: #6A60A9;
}

.cursor-artshop {
    background: #8FB1E4;
}

@media (pointer: coarse) {
    .cursor-yummy, .cursor-sustainability, .cursor-bookstore,
    .cursor-brainstorm, .cursor-natural,
    .cursor-artshop  {
        opacity: 0;
    }
}
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
    
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}

.blockspam {
    display: none;
  }

.hidden {
    display: grid;
    place-items: center;
    align-items: center;

    opacity: 0;
    filter: blur(5px);
    transform: translateY(-100%);
    transition: all 3s;
    transition-delay:1s;
}

.delay, .delay2 {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(200%);
    transition: all 3s;
    transition-delay: 2s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
       
}

/* input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-animation: autofill 0s forwards;
  animation: autofill 0s forwards;
}

@keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
}

@-webkit-keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
    font-size: inherit;
  }
} */