label{
    font-size: 10px;
}
.patterns{
    background-repeat: no-repeat;
    height: 500px;
}
@font-face {
    font-family: "raleway";
    src: url("https://glacseat.p8.saltech.systems/patterns/fonts/Raleway-Regular.ttf");
}
.pattern-color-creator-h1 {
    font-size: 50px;
    line-height: 50px; 
    text-align: left; 
    font-weight: 300; 
    color: #160D02; 
    font-family: 'brandon-grotesque';
}
.pattern-container {
    flex-shrink: 0;
    width: 85px;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.pattern-square {
    width: 60px; 
    height: 60px; 
    border: black 1px solid;
}
.pattern-square:hover {
    cursor: pointer;
}
.pattern-label {
    color: #160D02; 
    font-weight: 400; 
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
    width: 100%;
}
.color-palette-container {
    flex-shrink: 0;
    width: 75px;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
.color-palette {
    width: 50px; 
    height: 50px; 
    border: black 1px solid;
}
.color-palette:hover {
    cursor: pointer;
}
.color-palette-label {
    color: #160D02; 
    font-weight: 400; 
    font-size: 13px;
    margin-top: 5px;
    text-align: center;
    width: 100%;
}