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

:root{
    font-family: "Lato", Arial, sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
    --bgmain: oklch(0.97 0.00 0);
    --bgheader: oklch(0.27 0.06 264);
    --bgfooter:oklch(0.32 0.02 260);
    --primair:oklch(0.55 0.14 254);
    --secundair: oklch(0.87 0.28 152);
}

body{
    margin: 0;
    color: oklch(0.20 0.02 260);
}

.container{
    margin: 0 auto;
    max-width: 80rem;
    padding-inline: 1rem;
}

header{
    background-color: var(--bgheader);
     color: oklch(0.95 0.00 0);
}


footer{
    background-color: var(--bgfooter);
    color: oklch(0.90 0.00 0);
    display: flex;
    justify-content: center;
    align-items: center;

    ul{
        display: flex;
        gap: 2rem;
        li{
            list-style: none;
        }
    }
}


h1, h2, h3 {
  color: oklch(0.55 0.14 254);
}

.intro {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2em;
    img {
        order: -1;
    }
}

a {    
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--secundair);
}


nav ul {
    padding: 1rem 2rem; 
    margin: 0;
    list-style: none;
    margin-left: -2rem;
}



nav a {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--primair);
  text-decoration: none;
  font-weight: 600;
  width: 170px;                 
  height: 48px;     


  transition: background-color .2s ease-in-out;
    
  &:hover,
  &:focus-visible {
    background-color: var(--secundair);
    color: var(--bgmain);
    }
}


ul.cards{

    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    gap: 2em;

    li {
        position: relative;
        flex-basis: 18rem;
        flex-shrink: 1;
        flex-grow: 1;

        display: flex;
        flex-direction: column;

        box-shadow: 0 0 0.2rem oklch(0 0 0 / 0.2), 0 0 2rem oklch(0 0 0 / 0.1);

        .content {
            padding: 0 1rem 1rem 1rem;
        }

        img {
            width: 100%;
            order: -1;
        }
    }

    .overlay-link {
        position: absolute;
        inset: 0;

        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;

    }

    a:not(.overlay-link){
        position: relative;
        z-index: 1;
    }
}

.vinden {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
}

form {
  max-width: 40rem;
  margin-inline: auto;
  padding: 2rem;

  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 0.625rem 1.875rem oklch(0 0 0 / 0.12);
}

form h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

form .message {
  margin-bottom: 2rem;
  color: oklch(0.45 0.02 260);
  font-size: 0.95rem;
}

form > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

label {
  font-weight: 600;
  font-size: 0.95rem;
}

input[type="text"],
textarea {
  font-family: inherit;
  font-size: 1rem;

  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  border: 0.0625rem solid oklch(0.8 0 0);
  background-color: oklch(0.98 0 0);

  transition: 
    border-color .2s ease,
    box-shadow .2s ease;
}

input[type="text"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--primair);
  box-shadow: 0 0 0 0.1875rem oklch(0.55 0.14 254 / 0.25);
}



.message.error {
  color: oklch(0.55 0.22 25);
  font-size: 0.85rem;
}



#btnSubmit {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  border: 2px solid var(--primair);
  text-decoration: none;
  font-weight: 600;
  width: 170px;                 
  height: 48px;     


  transition: background-color .2s ease-in-out;
    
  &:hover,
  &:focus-visible {
    background-color: var(--secundair);
    color: var(--bgmain);
    }
}