h1.toolName{
    font-size: clamp(3vw, 5vh, 6vh);
    font-weight: 600;
}

div.toolsSection{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: clamp(3.5vw, 7vh, 7vh);
}
div.toolsSection h1{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-size: clamp(2.3vw, 4.6vh, 4.6vh);
    font-weight: 500;
    color: var(--Primary);
    background-color: var(--Pozadi2);
    padding: clamp(0.5vw, 1vh, 1vh);
    padding-left: clamp(4vw, 4vh, 8vh);
    
}
div.toolsSection h1 img{
    object-fit: contain;
    height: clamp(2vw, 4vh, 4vh);
    margin-left: clamp(1vw, 2vh, 2vh);
}

div.toolsSection.second{
    padding-bottom: clamp(4.5vw, 9vh, 9vh);
}
div.toolsSection.second h1{
    background-color: #0d0d0d;
}

div.toolsSection div.sectionContent{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    padding-left: clamp(1.5vw, 3vh, 3vh);
}
div.toolsSection div.sectionContent a.tool{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: clamp(1vw, 2vh, 2vh);
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.02) var(--Pozadi2);
    background-color: var(--Pozadi);
    padding: clamp(1vw, 2vh, 2vh);
    width: clamp(11vw, 22vh, 22vh);
    height: clamp(11vw, 22vh, 22vh);
    margin-top: clamp(2.5vw, 5vh, 5vh);
    margin-left: clamp(1.5vw, 3vh, 3vh);
    margin-right: clamp(1.5vw, 3vh, 3vh);
    transition-property: box-shadow;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}
div.toolsSection div.sectionContent a.tool img{
    object-fit: contain;
    height: 40%;
}
div.toolsSection div.sectionContent a.tool h3{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    min-height: 55%;
    line-height: normal;
    color: var(--Primary);
    font-weight: 500;
    font-size: clamp(1.2vw, 2.4vh, 2.4vh);
}

@media (min-width: 1200px){
    div.toolsSection div.sectionContent a.tool:hover{
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Primary);
        transition-duration: 0.4s;
    }
    div.toolsSection div.sectionContent a.tool.locked:hover{
        box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
        transition-duration: 0.4s;
    }
}
div.toolsSection div.sectionContent a.tool:active{
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Primary);
    transition-duration: 0.4s;
}
div.toolsSection div.sectionContent a.tool.locked:active{
    box-shadow: 0 0 calc(clamp(50vw, 100vh, 100vw)*0.025) var(--Ruda);
    transition-duration: 0.4s;
}