Advertisement
bebo231312312321

Untitled

Feb 28th, 2024
651
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Montserrat:wght@400;900&family=UnifrakturMaguntia&display=swap');
  2.  
  3. html, body, div, span, applet, object, iframe,
  4. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  5. a, abbr, acronym, address, big, cite, code,
  6. del, dfn, em, img, ins, kbd, q, s, samp,
  7. small, strike, strong, sub, sup, tt, var,
  8. b, u, i, center,
  9. dl, dt, dd, ol, ul, li,
  10. fieldset, form, label, legend,
  11. table, caption, tbody, tfoot, thead, tr, th, td,
  12. article, aside, canvas, details, embed,
  13. figure, figcaption, footer, header, hgroup,
  14. menu, nav, output, ruby, section, summary,
  15. time, mark, audio, input, video {
  16.     margin: 0;
  17.     padding: 0;
  18.     border: 0;
  19.     font-size: 100%;
  20.     font: inherit;
  21.     vertical-align: baseline;
  22. }
  23. /* HTML5 display-role reset for older browsers */
  24. article, aside, details, figcaption, figure,
  25. footer, header, hgroup, menu, nav, section {
  26.     display: block;
  27. }
  28. body {
  29.     line-height: 1;
  30. }
  31. ol, ul {
  32.     list-style: none;
  33. }
  34. blockquote, q {
  35.     quotes: none;
  36. }
  37. blockquote:before, blockquote:after,
  38. q:before, q:after {
  39.     content: '';
  40.     content: none;
  41. }
  42. table {
  43.     border-collapse: collapse;
  44.     border-spacing: 0;
  45. }
  46.  
  47. body {
  48.     color: white;
  49.     background-color: black;
  50.     font-family: 'Montserrat', sans-serif;
  51. }
  52.  
  53. .window {
  54.     max-width: 60vw;
  55.     height: 60vh;
  56.     background: rgb(26 4 134 / 20%);
  57.     color: white;
  58.     border-radius: 1em;
  59.     display: flex;
  60.     flex-direction: column;
  61.     align-items: center;
  62.     margin: 6em auto;
  63.     padding: 2em;
  64.     box-shadow: 1px 2px 10px 11px #000;
  65. }
  66.  
  67. .window h1 {
  68.     color: #f1c2ff;
  69.     font-size: 1.5em;
  70.     font-weight: 900;
  71.     font-family: 'Josefin Sans';
  72.     text-transform: uppercase;
  73.     line-height: 1.5;
  74.     text-align: center;
  75.     padding: 1em 1em 0.25em 1em;
  76. }
  77.  
  78. .window h2 {
  79.     font-family: 'Josefin Sans';
  80.     color: #ddd;
  81.     letter-spacing: 2px;
  82.     font-size: 1.5em;
  83.     margin-bottom: 2em;
  84.     text-align: center;
  85. }
  86.  
  87. .window h2:after {
  88.     border-bottom: 13px solid #c663ff;
  89.     width: 10%;
  90.     position: relative;
  91. }
  92.  
  93. .window p {
  94.     line-height: 1.6;
  95.     color: #8279b5;
  96.     padding: 0em 1em 2em 1em;
  97.     text-align: center;
  98.  
  99. }
  100.  
  101. .window__response p {
  102.     line-height: 1.6;
  103.     color: #ada4e0;
  104.     padding: 0em 1em 2em 1em;
  105.     text-align: left;
  106. }
  107.  
  108. .window form {
  109.     display: flex;
  110.     justify-content: space-evenly;
  111.     align-items: center;
  112.     flex-direction: column;
  113.     width: 300px;
  114.     align-content: center;
  115. }
  116.  
  117.  
  118. input {
  119.     background: #05011b;
  120.     color: white;
  121.     border: 2px solid #48399b;
  122.     font-family: 'Josefin Sans';
  123.     border-radius: 1em;
  124.     margin: 0.5em 0.5em;
  125.     text-transform: uppercase;
  126. }
  127.  
  128. .window__name {
  129.         width: 100%;
  130.         padding: 10px;
  131.         margin-bottom: 10px;
  132.         box-sizing: border-box;
  133.         height: 10vh;
  134.     }
  135.  
  136.  
  137. .window__date {
  138.    
  139.     padding: 1em 1.5em;
  140. }
  141.  
  142.  
  143. .window__buttons {
  144.     display: flex;
  145.     justify-content: space-around;
  146.     align-items: center;
  147.     align-content: center;
  148.     flex-wrap: nowrap;
  149. }
  150.  
  151.  
  152. .window__button, .window__button__clean {
  153.     padding: 1.6em 6em;
  154.     color: white;
  155.     font-family: 'Josefin Sans';
  156.     background: #4f35c2;
  157.     box-shadow: none;
  158.     cursor: pointer;
  159.     border: none;
  160.     margin: 1em 0.25em;
  161.     border-radius: 0.85em;
  162. }
  163. .desc {
  164.     display: flex;
  165.     flex-direction: column;
  166.     justify-content: center;
  167.     z-index: 111;
  168.  
  169.    
  170. }
  171. .desc p {
  172.     color: white;
  173. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  174.     letter-spacing: 20px;
  175.     font-size: 18px;
  176.     text-align: left;
  177.     font-weight: bold;
  178.     padding: 0;
  179.     margin: 0;
  180.     line-height: 50px;
  181.     /* cursor: pointer; */
  182. }
  183. .window__modal__area p:hover{
  184.     color: red;
  185. }
  186.  
  187. #modal > div > div.desc > p:nth-child(6){
  188.     margin-top: 60px;
  189. }
  190. .numbers {
  191.     display: flex;
  192.     justify-content: center;
  193.     align-items: center;
  194.     animation: fadein 1s;
  195. }
  196.  
  197. .window__modal__background {
  198.     position: fixed;
  199.     z-index: 1;
  200.     padding-top: 100px;
  201.     left: 0;
  202.     top: 0;
  203.     width: 100%;
  204.     height: 100%;
  205.     overflow: auto;
  206.     background-color: rgb(9 1 38 / 69%);
  207.     background-color: rgb(9 1 38 / 69%);
  208.     opacity: 0;
  209.     transition: opacity 1s;
  210.     display: none;
  211.   }
  212.  
  213.   .window__modal__area {
  214.     background-color: #261b68;
  215.     box-shadow: 1px 2px 20px 0px #000;
  216.     max-width: 60%;
  217.     border-radius: 2em;
  218.     padding: 4em 2em;
  219.     display: flex;
  220.     margin: 2em auto 8em auto;
  221.     flex-direction: column;
  222.     align-items: center;
  223.     justify-content: center;
  224. }
  225.  
  226. .numerologyNumbers {
  227.     padding: 20px 25px;
  228.     background: #3824a1;
  229.     max-width: 60px;
  230.     font-weight: 900;
  231.     max-height: 59px;
  232.     color: #e2afff;
  233.     font-size: 1.5em;
  234.     margin: 1em;
  235.     box-shadow: inset 1px 2px 10px 4px #9363ff;
  236.     border-radius: 50%;
  237.     animation-duration: 2s;
  238.     animation-name: fadein;
  239.  
  240. }
  241.  
  242. .window__response h3 {
  243.     font-size: 1.5em;
  244.     font-family: 'Josefin Sans';
  245.     text-transform: uppercase;
  246.     text-align: left;
  247.     padding: 1em 0;
  248.     border-bottom: 3px solid #4e33b7;
  249.     margin: 1em;
  250. }
  251.  
  252. #modal {
  253.     animation-duration: 2s;
  254.     animation-name: fadein;
  255.   }
  256.  
  257.   #modal.active {
  258.     animation-duration: 2s;
  259.     animation-name: fadeout;
  260.   }
  261.  
  262.   @keyframes fadein {
  263.     from {opacity: 0}
  264.     to {opacity: 1}
  265.   }
  266.  
  267.   @keyframes fadeout {
  268.     from {opacity: 1}
  269.     to {opacity: 0}
  270.   }
  271.  
  272.  
  273.   footer {
  274.     text-align: center;
  275.     font-size: x-small;
  276.     color: #6569a9;
  277.     max-height: 5vh;
  278. }
  279. .numerologyResult {
  280.     margin: 1em;
  281.     width: 230px;
  282. }
  283. #filter-container{
  284.     display: flex;
  285. }
  286. #result {
  287.     display: flex;
  288.     flex-direction: column;
  289.     font-size: 1.5em;
  290.     width: 100%;
  291.     font-family: 'Josefin Sans';
  292.     text-transform: uppercase;
  293.     text-align: left;
  294.     padding: 1em 0;
  295.     border-bottom: 3px solid #4e33b7;
  296.     margin: 1em;
  297. }
  298. .filterEn{
  299.     display: flex;
  300.     align-items: center;
  301. }
  302. #bgFilterContainer{
  303.     display: flex;
  304.     flex-direction: column;
  305.     font-size: 1.5em;
  306.     font-family: 'Josefin Sans';
  307.     text-transform: uppercase;
  308.     text-align: left;
  309.     padding: 1em 0;
  310.     border-bottom: 3px solid #4e33b7;
  311.     margin: 1em;
  312.     font-size: 16px;
  313.  
  314. }
  315. #filterNumber {
  316.     height: 2em;
  317.     width: 150px;
  318.     font-size: 15px;
  319. }
  320. #bgFilterNumber{
  321.     font-size: 12px;
  322.     border-radius: 2em;
  323.     padding: 0.7em;
  324.     overflow: hidden;
  325. }
  326.  
  327.  
  328. #applyBgFilter{
  329.     font-size: 12px;
  330.     border-radius: 2em;
  331.     padding: 0.5em;
  332.     overflow: hidden;
  333. }
  334. #applyBgFilter:hover{
  335.     background-color: chocolate;
  336.     color: white;
  337. }
  338. #applyFilter {
  339.     font-size: 12px;
  340.     border-radius: 2em;
  341.     padding: 0.5em;
  342.     overflow: hidden;
  343. }
  344. #applyFilter:hover{
  345.     background-color: chocolate;
  346.     color: white;
  347. }
  348. .resultRow {
  349.     display: flex;
  350.     justify-content: space-between;
  351.     align-items: center;
  352.     margin-bottom: 10px;
  353. }
  354.  
  355. .numerologyResult {
  356.     flex: 1;
  357.     text-align: center; /* Центриране на текста */
  358. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement