Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Montserrat:wght@400;900&family=UnifrakturMaguntia&display=swap');
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
- a, abbr, acronym, address, big, cite, code,
- del, dfn, em, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var,
- b, u, i, center,
- dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- article, aside, canvas, details, embed,
- figure, figcaption, footer, header, hgroup,
- menu, nav, output, ruby, section, summary,
- time, mark, audio, input, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
- }
- /* HTML5 display-role reset for older browsers */
- article, aside, details, figcaption, figure,
- footer, header, hgroup, menu, nav, section {
- display: block;
- }
- body {
- line-height: 1;
- }
- ol, ul {
- list-style: none;
- }
- blockquote, q {
- quotes: none;
- }
- blockquote:before, blockquote:after,
- q:before, q:after {
- content: '';
- content: none;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- body {
- color: white;
- background-color: black;
- font-family: 'Montserrat', sans-serif;
- }
- .window {
- max-width: 60vw;
- height: 60vh;
- background: rgb(26 4 134 / 20%);
- color: white;
- border-radius: 1em;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 6em auto;
- padding: 2em;
- box-shadow: 1px 2px 10px 11px #000;
- }
- .window h1 {
- color: #f1c2ff;
- font-size: 1.5em;
- font-weight: 900;
- font-family: 'Josefin Sans';
- text-transform: uppercase;
- line-height: 1.5;
- text-align: center;
- padding: 1em 1em 0.25em 1em;
- }
- .window h2 {
- font-family: 'Josefin Sans';
- color: #ddd;
- letter-spacing: 2px;
- font-size: 1.5em;
- margin-bottom: 2em;
- text-align: center;
- }
- .window h2:after {
- border-bottom: 13px solid #c663ff;
- width: 10%;
- position: relative;
- }
- .window p {
- line-height: 1.6;
- color: #8279b5;
- padding: 0em 1em 2em 1em;
- text-align: center;
- }
- .window__response p {
- line-height: 1.6;
- color: #ada4e0;
- padding: 0em 1em 2em 1em;
- text-align: left;
- }
- .window form {
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- flex-direction: column;
- width: 300px;
- align-content: center;
- }
- input {
- background: #05011b;
- color: white;
- border: 2px solid #48399b;
- font-family: 'Josefin Sans';
- border-radius: 1em;
- margin: 0.5em 0.5em;
- text-transform: uppercase;
- }
- .window__name {
- width: 100%;
- padding: 10px;
- margin-bottom: 10px;
- box-sizing: border-box;
- height: 10vh;
- }
- .window__date {
- padding: 1em 1.5em;
- }
- .window__buttons {
- display: flex;
- justify-content: space-around;
- align-items: center;
- align-content: center;
- flex-wrap: nowrap;
- }
- .window__button, .window__button__clean {
- padding: 1.6em 6em;
- color: white;
- font-family: 'Josefin Sans';
- background: #4f35c2;
- box-shadow: none;
- cursor: pointer;
- border: none;
- margin: 1em 0.25em;
- border-radius: 0.85em;
- }
- .desc {
- display: flex;
- flex-direction: column;
- justify-content: center;
- z-index: 111;
- }
- .desc p {
- color: white;
- font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
- letter-spacing: 20px;
- font-size: 18px;
- text-align: left;
- font-weight: bold;
- padding: 0;
- margin: 0;
- line-height: 50px;
- /* cursor: pointer; */
- }
- .window__modal__area p:hover{
- color: red;
- }
- #modal > div > div.desc > p:nth-child(6){
- margin-top: 60px;
- }
- .numbers {
- display: flex;
- justify-content: center;
- align-items: center;
- animation: fadein 1s;
- }
- .window__modal__background {
- position: fixed;
- z-index: 1;
- padding-top: 100px;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgb(9 1 38 / 69%);
- background-color: rgb(9 1 38 / 69%);
- opacity: 0;
- transition: opacity 1s;
- display: none;
- }
- .window__modal__area {
- background-color: #261b68;
- box-shadow: 1px 2px 20px 0px #000;
- max-width: 60%;
- border-radius: 2em;
- padding: 4em 2em;
- display: flex;
- margin: 2em auto 8em auto;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .numerologyNumbers {
- padding: 20px 25px;
- background: #3824a1;
- max-width: 60px;
- font-weight: 900;
- max-height: 59px;
- color: #e2afff;
- font-size: 1.5em;
- margin: 1em;
- box-shadow: inset 1px 2px 10px 4px #9363ff;
- border-radius: 50%;
- animation-duration: 2s;
- animation-name: fadein;
- }
- .window__response h3 {
- font-size: 1.5em;
- font-family: 'Josefin Sans';
- text-transform: uppercase;
- text-align: left;
- padding: 1em 0;
- border-bottom: 3px solid #4e33b7;
- margin: 1em;
- }
- #modal {
- animation-duration: 2s;
- animation-name: fadein;
- }
- #modal.active {
- animation-duration: 2s;
- animation-name: fadeout;
- }
- @keyframes fadein {
- from {opacity: 0}
- to {opacity: 1}
- }
- @keyframes fadeout {
- from {opacity: 1}
- to {opacity: 0}
- }
- footer {
- text-align: center;
- font-size: x-small;
- color: #6569a9;
- max-height: 5vh;
- }
- .numerologyResult {
- margin: 1em;
- width: 230px;
- }
- #filter-container{
- display: flex;
- }
- #result {
- display: flex;
- flex-direction: column;
- font-size: 1.5em;
- width: 100%;
- font-family: 'Josefin Sans';
- text-transform: uppercase;
- text-align: left;
- padding: 1em 0;
- border-bottom: 3px solid #4e33b7;
- margin: 1em;
- }
- .filterEn{
- display: flex;
- align-items: center;
- }
- #bgFilterContainer{
- display: flex;
- flex-direction: column;
- font-size: 1.5em;
- font-family: 'Josefin Sans';
- text-transform: uppercase;
- text-align: left;
- padding: 1em 0;
- border-bottom: 3px solid #4e33b7;
- margin: 1em;
- font-size: 16px;
- }
- #filterNumber {
- height: 2em;
- width: 150px;
- font-size: 15px;
- }
- #bgFilterNumber{
- font-size: 12px;
- border-radius: 2em;
- padding: 0.7em;
- overflow: hidden;
- }
- #applyBgFilter{
- font-size: 12px;
- border-radius: 2em;
- padding: 0.5em;
- overflow: hidden;
- }
- #applyBgFilter:hover{
- background-color: chocolate;
- color: white;
- }
- #applyFilter {
- font-size: 12px;
- border-radius: 2em;
- padding: 0.5em;
- overflow: hidden;
- }
- #applyFilter:hover{
- background-color: chocolate;
- color: white;
- }
- .resultRow {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 10px;
- }
- .numerologyResult {
- flex: 1;
- text-align: center; /* Центриране на текста */
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement