html, body {
    margin: 0;
    padding: 0;
    background-color: rgb(76, 172, 47);
    box-sizing: border-box;
    border: 1px solid rgb(160, 163, 159);
    font-family: "Poppins", "Roboto", sans-serif;
    background-color: #8a5a2e;
    background-image: url("https://www.transparenttextures.com/patterns/wood-pattern.png");
    background-blend-mode: multiply;
    background-size: cover;

    
    

}

.outerWall{
    height: 550px;
    width: 550px;
    border-radius: 5px;
    margin: auto;
    border: 2px solid rgb(255, 96, 75);

}


h1{
    margin: 60px auto;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;

    background-color: rgb(255, 255, 255);
    width: 550px;
    padding: 10px 0;
    border-radius: 5px;
    border: 2px solid rgb(255, 96, 75);
    box-shadow: 0 6px 20px rgba(80, 40, 10, 0.35);

    
}

.getColorWall{
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
    height: 90px;
    padding: 0 15px; /* statt gap und negativen margins */  

}




.colorPicker{
    width: 61px;
    height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgb(150, 87, 36);
    border-radius: 5px;
    cursor: pointer;

}



.addColorButton:hover, .randomColorButton:hover{
    background-color: rgb(220, 220, 220);
}


.select {
    position: relative;
    display: inline-block;
    width: 312px; /* gleiche Breite wie vorher */
    }

    .colorDropdown {
    width: 100%;              /* füllt .select komplett aus */
    height: 42px;
    border: 1px solid rgb(150, 87, 36);
    border-radius: 5px;
    padding: 0 40px 0 12px;   /* Platz rechts für Pfeil */
    font-size: 15px;
    cursor: pointer;
    appearance: none;
    background-color: #fff;
    }

    /* künstlicher Pfeil */
    .select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;              /* Pfeilposition – ändert Abstand */
    width: 10px;
    height: 6px;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    }


/* Pfeil weiter nach links? -> right größer machen (z. B. 20px) */





.addColorButton{
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    border: 1px solid rgb(150, 87, 36);
    width: 123px;
    height: 42px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;

}


.addColorButton:hover, .randomColorButton:hover{
    background-color: rgb(233, 232, 232);

}


.randomColorButton {
    outline: none;
    background-color: white;
    border: 1px solid rgb(150, 87, 36);
    width: 123px;
    height: 42px;
    border-radius: 5px;
    transition: background 0.2s, transform 0.1s;

}


.colorSchemeWall{
    width: 100%;
    height: 414px;
    display: flex;
    
}

.colorBox{
    height: 100%;
    flex: 1;
    
}

.ColorCode{
    background-color: white;
    height: 46px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;    
    font-size: 12px;
    font-weight: 500; /* 'medium' durch Zahl ersetzt */

}

.getColorWall, .colorSchemeWall, .ColorCode {
box-shadow: 0 6px 20px rgba(80, 40, 10, 0.35);
}