:root{ /*variables*/
    --colorBackground: #ffffff;
    --colorText: #000000;
    --colorPrimary: #0099ff;
    --colorSecondary: #96c5ff;
    --colorAccent: #00f9ff;
    --colorText2: #000000;
}

div.content{
    width: clamp(75vw, 150vh, 90vw);
    min-height: clamp(9vw, 18vh, 18vh);
    padding-top: clamp(0.5vw, 1vh, 1vh);
    padding-bottom: clamp(0.5vw, 1vh, 1vh);
    margin-bottom: 0;
}



div.colorShow{
    height: clamp(3vw, 6vh, 6vh);
    width: clamp(6vw, 12vh, 12vh);
    border: #000000 var(--borderWidth) solid;
    margin: clamp(1vw, 2vh, 2vh);
}



div.colorSelectCont{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
div.colorSelect{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: clamp(1.5vw, 3vh, 3vh);
}
div.colorSelect p{
    margin: clamp(0.75vw, 1.5vh, 1.5vh);
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    color: var(--Primary);
}

#showcaseDiv{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--colorBackground);
    margin-top: clamp(3vw, 6vh, 6vh);
    padding: clamp(1.5vw, 3vh, 3vh);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    margin-bottom: clamp(1vw, 2vh, 2vh);
}
#showcaseDiv div{
    display: flex;
    justify-content: center;
    align-items: center;
}
#showcaseHeading{
    margin: clamp(1vw, 2vh, 2vh);
    color: var(--colorText);
    font-size: clamp(2.5vw, 4vh, 5vh);
    font-weight: 600;
}
#showcaseText{
    color: var(--colorText);
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
    font-weight: 400;
    margin: clamp(0.25vw, 0.5vh, 0.5vh);
}
#showcaseButton{
    margin: clamp(2vw, 3vh, 4vh);
    text-decoration: none;
    text-align: center;
    padding: clamp(0.75vw, 1vh, 1.5vh);
    background-color: var(--colorSecondary);
    color: var(--colorText2);
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    font-weight: 500;
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    border-radius: clamp(1vw, 2vh, 2vh);
}

@media (min-width: 1200px){
    #showcaseButton:hover{
        background-color: var(--colorAccent);
    }
}
#showcaseButton:active{
    background-color: var(--colorAccent);
}
#showcaseButton2{
    margin: clamp(2vw, 3vh, 4vh);
    text-decoration: none;
    text-align: center;
    padding: clamp(0.75vw, 1vh, 1.5vh);
    background-color: var(--colorPrimary);
    color: var(--colorText2);
    font-size: clamp(1.2vw, 2vh, 2.4vh);
    font-weight: 500;
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    border-radius: clamp(1vw, 2vh, 2vh);
}
@media (min-width: 1200px){
    #showcaseButton2:hover{
        background-color: var(--colorAccent);
    }
}
#showcaseButton2:active{
    background-color: var(--colorAccent);
}