/*** The new CSS reset: https://elad2412.github.io/the-new-css-reset/ GitHub page: https://github.com/elad2412/the-new-css-reset this is version 1.7.2 (last updated 23.6.2022) ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* css */ @font-face { font-family: DIN1451; src: url(./din1451alt.woff) format("woff"); font-weight: 400; font-style: normal } /* @font-face { font-family: Material Icons; src: url(./MaterialIcons-Regular.woff) format("woff"), url(./MaterialIcons-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal } */ body { font-family: DIN1451, sans-serif; background: #fff; color: #333; display: flex; height: 100vh; margin: 0; align-items: center; justify-content: center; position: relative; min-height: 550px; --blur: 2px; } p { padding-bottom: 1em; } main{ } .border { box-sizing: border-box; position: relative; background: #999; background-image: -webkit-gradient(linear, right top, left bottom, from(#AAA), to(#999)); padding: 17px; box-shadow: -1px 1px var(--blur) 1px rgba(0, 0, 0, 0.10), -2px 2px var(--blur) 1px rgba(0, 0, 0, 0.09), -3px 3px var(--blur) 1px rgba(0, 0, 0, 0.08), -4px 4px var(--blur) 1px rgba(0, 0, 0, 0.07), -5px 5px var(--blur) 1px rgba(0, 0, 0, 0.06), -6px 6px var(--blur) 1px rgba(0, 0, 0, 0.05), -7px 7px var(--blur) 1px rgba(0, 0, 0, 0.04), -8px 8px var(--blur) 1px rgba(0, 0, 0, 0.03), -9px 9px var(--blur) 1px rgba(0, 0, 0, 0.03), -10px 10px var(--blur) 1px rgba(0, 0, 0, 0.03), -11px 11px var(--blur) 1px rgba(0, 0, 0, 0.03), -12px 12px var(--blur) 1px rgba(0, 0, 0, 0.02), -13px 13px var(--blur) 1px rgba(0, 0, 0, 0.02), -14px 14px var(--blur) 1px rgba(0, 0, 0, 0.01), -15px 15px var(--blur) 1px rgba(0, 0, 0, 0.01), -16px 16px var(--blur) 1px rgba(0, 0, 0, 0.01); } .frame { left: 3%; top: 2.5%; box-shadow: inset -1px 1px 5px 1px rgba(0, 0, 0, 0.24); background: rgb(255, 255, 255); align-items: center; display: flex; padding: 33px; box-sizing: border-box; } canvas { box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.2); height: 320px; width: 320px; background-size: cover; background-position: center center; } .canvaslike { height: 320px; width: 320px; background-size: cover; background-position: center center; } .footer { position: absolute; font-size: 0.8em; bottom: 10px; max-width: 420px; padding-left: 10px; padding-right: 10px; } .frame svg{ box-shadow: inset 0 0 0px 0 rgba(0, 0, 0, 0.2); width: 320px; height: 320px; } .shiftomat{ fill: #666666; } .svnthn{ fill: #F3F3F3; } .svnthn:hover{ fill: #999999; } a:link, a:visited, a:active, a:hover { color: #333; background-color: transparent; text-decoration: underline; } /* media */ @media only screen and (max-width: 440px) { .frame svg{ width: 240px; height: 240px; } } @media only screen and (max-width: 360px) { .frame svg{ width: 160px; height: 160px; } }