/*  Roboto  */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
*{
    padding: 0;
    margin: 0;
}
a, p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
label{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}
h1{
    font-size: 60px;
    font-family: "Roboto Condensed", serif;
    font-weight: 500;
}
h2{
    font-size: 30px;
    font-family: "Roboto Condensed", serif;
    font-weight: 400;
}
nav{
    ul{
        list-style: none;
    }
    li{
        float: right;
        margin: 30px;
    }
    a{
        font-size: 35px;
        text-decoration: none;
        color: black;
        display: inline-block;
  position: relative;
    }
    a::after{
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 5px;
        bottom: -5px;
        left: 0;
        background-color: black;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
        
      }
      a:hover{
        transition: transform 0.5 ease-in;
      }
      a:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left;
      }
    img{
        margin-left: 30px;
        float: left;
        width: 10%;
    }
    overflow: hidden;
}
header{
    display: grid;
    align-items: center;
    background: url(../afbeeldingen/verfwinkel.jpeg);
    background-size: cover;
    height: 85vh;
    
}
#main-index{
    color: white;
    margin: 50px;
    width: 75%;
    p{
        margin-top: 20px;
        width: 60%;
    }
}
#main-kleur{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    row-gap: 50px;
    column-gap: 50px;
    #color-section{
        grid-column: 1/3;
        display: grid;
        grid-template-columns: 100px 100px 100px 100px 100px;
        column-gap: 50px;
        row-gap: 30px;
        justify-items: center;
        button{
            margin-top: 20px;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            border:none;
        }
        #kl1{
            grid-row: 1/2;
            grid-column: 1/2;
            background: #D7BCA6;
        }
        #kl2{
            grid-row: 1/2;
            grid-column: 2/3;
            background: #F1E7D7;
        }
        #kl3{
            grid-row: 1/2;
            grid-column: 3/4;
            background: #3E4542;
        }
        #kl4{
            grid-row: 1/2;
            grid-column: 4/5;
            background: #2C475A;
        }
        #kl5{
            grid-row: 1/2;
            grid-column: 5/6;
            background: #CE4E37;
        }
        #kl6{
            grid-row: 3/4;
            grid-column: 1/2;
            background: #F3DF6D;
        }
        #kl7{
            grid-row: 3/4;
            grid-column: 2/3;
            background: #749482;
        }
        #kl8{
            grid-row: 3/4;
            grid-column: 3/4;
            background: #A67657;
        }
        #kl9{
            grid-row: 3/4;
            grid-column: 4/5;
            background: #AA997F;
        }
        #kl10{
            grid-row: 3/4;
            grid-column: 5/6;
            background: #48453F;
        }
        #l1{
            grid-row: 2/3;
            grid-column: 1/2;
        }
        #l2{
            grid-row: 2/3;
            grid-column: 2/3;
        }
        #l3{
            grid-row: 2/3;
            grid-column: 3/4;
        }
        #l4{
            grid-row: 2/3;
            grid-column: 4/5;
        }
        #l5{
            grid-row: 2/3;
            grid-column: 5/6;
        }
        #l6{
            grid-row: 4/5;
            grid-column: 1/2;
        }
        #l7{
            grid-row: 4/5;
            grid-column: 2/3;
        }
        label{
            
            text-align: center;
        }
    }
    #showcase-section{
        margin-top: 20px;
        h2, input, button, p{
            margin-top: 10px;
            margin-left: 40px;
        }
        p{
            margin-bottom: 20px;
        }
        span{
            font-weight: bolder;
        }
        input{
            border: black solid 1px;
            height: 40px;
            border-radius: 10px;
            margin-top: 20px;
            padding-left: 10px;
            
        }

        input:focus{
            border-color: black;
            outline: none;
        }
        #aantalD, #aantalR{
            display: none;
        }
        button{
            width: 100px;
            height:40px;
            border-radius: 10px;
            margin-top: 20px;
           margin-bottom: 10px;
            border: none;
            background-color: black;
            color: white;
            border: black 2px solid;
        }
        button:hover{
            background:white;
            
            color:black;
            transition: 0.5s;
        }
    }
    figure{
        img{
            width: 75%;
        }
    }
}
footer{
    display: grid;
    justify-content: center;
    text-align: center;
    margin: 20px;
}