@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
    /* font-family: 'Poppins', sans-serif; */
    
     :root {
        --black: #000000;
        --white: #ffffff;
        --primary-black: #171924;
        --secondary-black: #222531;
        --primary-green: #c7f343;
        --secondary-green: #d1ff52;
    }
    
    * {
        padding: 0;
        border: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Poppins', sans-serif;
        height: 100%;
    }
    
    .color_scheme {
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
    }
    
    .square {
        height: 50px;
        width: 50px;
        filter: drop-shadow(1px 1px 1px gray);
    }
    
    .color_scheme .square:nth-child(n):hover {
        width: 100px;
    }
    
    .color_scheme .square:nth-child(1) {
        background-color: var(--black);
    }
    
    .color_scheme .square:nth-child(2) {
        background-color: var(--white);
    }
    
    .color_scheme .square:nth-child(3) {
        background-color: var(--primary-black);
    }
    
    .color_scheme .square:nth-child(4) {
        background-color: var(--secondary-black);
    }
    
    .color_scheme .square:nth-child(5) {
        background-color: var(--primary-green);
    }
    
    .color_scheme .square:nth-child(6) {
        background-color: var(--secondary-green);
    }