img{
    max-width: 100%;
}
.imagecontainer{
    display: flex;
    flex-wrap: wrap;
}  
.imagecontainer img{
    flex: 1 1 7vmax;
    max-width: 100%;
    min-width: 7vmax;
}
.dialogimagecontainer{
    gap: 10px;
    padding: 10px;
}
#pixelimagecontainer img{
    max-width: clamp(25%,25%,33%);
}
.openableimage{
    padding: 4px;
    border: 4px solid transparent;
    filter: brightness(0.9);
    transition: border 0.1s ease-out;
}
.openableimage:hover{
    border: 4px solid var(--accent);
    box-shadow: 0 0 20px var(--accent);
    filter: brightness(1.1);
    transition: border 0.1s ease-in;
}
#photodialog{
    width: fit-content;
    height: fit-content;
    padding: 5px;
    #photodialogimage{
        max-height: 75vh;
    }
}
#photodialog[open]{
    display: flex;
}
.linkimage{
    padding: 3px;
    border: 3px solid transparent;
    filter: brightness(0.9);
    transition: border 0.1s ease-out;
    width: 32px;
}
.linkimage:hover{
    border: 3px solid var(--accent);
    box-shadow: 0 0 10px var(--accent);
    filter: brightness(1.1);
    transition: border 0.1s ease-in;
}