.grid { letter-spacing: 0px; display: flex; justify-content: center; display: grid; grid-template-columns: 300px 300px 300px; gap: 20px; } .grid .title { border: transparent solid 10px; border-radius: 5px; text-align: center; padding: 3px; max-width: auto; height: auto; display: flex; flex-direction: column; justify-content: center; transition: 0.2s ease-in-out; } .grid .title:hover { backdrop-filter: blur(5px) brightness(80%); -webkit-backdrop-filter: blur(5px) brightness(80%); transition: 0.2s ease-in-out; } .grid .image { border-radius: 5px; overflow: hidden; height: 180px; width: auto; } .grid img { width: 100%; height: 100%; object-fit: cover; display: flex; justify-content: center; } .center_img { overflow: hidden; width: 400px; padding: 5px; display: block; margin-left: auto; margin-right: auto; } .center_img img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; } .button { display: flex; justify-content: center; width: auto; } .button div { border: 3px solid transparent; border-radius: 5px; padding: 5px; max-width: max-content; text-align: center; backdrop-filter: blur(1px) brightness(70%); -webkit-backdrop-filter: blur(1px) brightness(70%); transition: 0.2s ease-in-out; } .button div:hover { backdrop-filter: blur(5px) brightness(60%); -webkit-backdrop-filter: blur(5px) brightness(60%); transition: 0.2s ease-in-out; } .button div a { color: white; } .text { border: transparent solid 10px; border-radius: 5px; padding: 3px; backdrop-filter: blur(5px) brightness(80%); -webkit-backdrop-filter: blur(5px) brightness(80%); color: white; } .title { font-size: 18px; } @font-face { font-family: "Prompt"; src: url("/resources/Fonts/Prompt/Prompt-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } html { height: 100vh; } body { text-align: center; justify-content: center; width: 90%; max-width: auto; margin: 2em auto; font: 19px "Prompt"; letter-spacing: -1px; background-image: url("resources/page_background.jpg"); background-repeat: no-repeat; background-position: top center; background-size: cover; background-attachment: fixed; } body a:link { color: #00ffff; } body a:visited { color: #8ad4ff; } body a:hover { color: #ffffff; } /*main { border: transparent solid 10px; border-radius: 5px; padding: 3px; backdrop-filter: blur(5px) brightness(80%); }*/ header { text-align: center; } header .subheader { font-style: italic; font-size: 25px; } /*# sourceMappingURL=beauty.css.map */