API tools faq
paste
unknown2004

py css

unknown2004
Nov 27th, 2023
1,428
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 23.13 KB | None | 0 0
raw download clone embed print report
  1. @import url(fontawesome-all.min.css);
  2. @import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
  3. /*
  4.     Eventually by HTML5 UP
  5.     html5up.net | @ajlkn
  6.     Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
  7. */
  8. html, body, div, span, applet, object,
  9. iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
  10. pre, a, abbr, acronym, address, big, cite,
  11. code, del, dfn, em, img, ins, kbd, q, s, samp,
  12. small, strike, strong, sub, sup, tt, var, b,
  13. u, i, center, dl, dt, dd, ol, ul, li, fieldset,
  14. form, label, legend, table, caption, tbody,
  15. tfoot, thead, tr, th, td, article, aside,
  16. canvas, details, embed, figure, figcaption,
  17. footer, header, hgroup, menu, nav, output, ruby,
  18. section, summary, time, mark, audio, video {
  19.   margin: 0;
  20.   padding: 0;
  21.   border: 0;
  22.   font-size: 100%;
  23.   font: inherit;
  24.   vertical-align: baseline; }
  25.  
  26. article, aside, details, figcaption, figure,
  27. footer, header, hgroup, menu, nav, section {
  28.   display: block; }
  29.  
  30. body {
  31.   line-height: 1; }
  32.  
  33. ol, ul {
  34.   list-style: none; }
  35.  
  36. blockquote, q {
  37.   quotes: none; }
  38.   blockquote:before, blockquote:after, q:before, q:after {
  39.     content: '';
  40.     content: none; }
  41.  
  42. table {
  43.   border-collapse: collapse;
  44.   border-spacing: 0; }
  45.  
  46. body {
  47.   -webkit-text-size-adjust: none; }
  48.  
  49. mark {
  50.   background-color: transparent;
  51.   color: inherit; }
  52.  
  53. input::-moz-focus-inner {
  54.   border: 0;
  55.   padding: 0; }
  56.  
  57. input, select, textarea {
  58.   -moz-appearance: none;
  59.   -webkit-appearance: none;
  60.   -ms-appearance: none;
  61.   appearance: none; }
  62.  
  63. /* Basic */
  64. @-ms-viewport {
  65.   width: device-width; }
  66.  
  67. body {
  68.   -ms-overflow-style: scrollbar; }
  69.  
  70. @media screen and (max-width: 480px) {
  71.   html, body {
  72.     min-width: 320px; } }
  73.  
  74. html {
  75.   box-sizing: border-box; }
  76.  
  77. *, *:before, *:after {
  78.   box-sizing: inherit; }
  79.  
  80. html, body {
  81.   height: 100%;
  82.   overflow-x: hidden;
  83.   width: 100%; }
  84.   @media screen and (max-height: 640px) {
  85.     html, body {
  86.       height: auto;
  87.       min-height: 100%; } }
  88.  
  89. body {
  90.   display: -moz-flex;
  91.   display: -webkit-flex;
  92.   display: -ms-flex;
  93.   display: flex;
  94.   -moz-flex-direction: column;
  95.   -webkit-flex-direction: column;
  96.   -ms-flex-direction: column;
  97.   flex-direction: column;
  98.   -moz-justify-content: center;
  99.   -webkit-justify-content: center;
  100.   -ms-justify-content: center;
  101.   justify-content: center;
  102.   background-color: #000;
  103.   padding: 6em 4em 4em 4em; }
  104.   body.is-preload *, body.is-preload *:before, body.is-preload *:after {
  105.     -moz-animation: none !important;
  106.     -webkit-animation: none !important;
  107.     -ms-animation: none !important;
  108.     animation: none !important;
  109.     -moz-transition: none !important;
  110.     -webkit-transition: none !important;
  111.     -ms-transition: none !important;
  112.     transition: none !important; }
  113.   body > * {
  114.     position: relative;
  115.     z-index: 2; }
  116.   @media screen and (max-width: 1680px) {
  117.     body {
  118.       padding: 6em 3.5em 3.5em 3.5em; } }
  119.   @media screen and (max-width: 736px) {
  120.     body {
  121.       padding: 5em 2em 2em 2em; } }
  122.   @media screen and (max-width: 360px) {
  123.     body {
  124.       padding: 5em 1.25em 1.25em 1.25em; } }
  125.  
  126. /* BG */
  127. #bg {
  128.   -moz-transition: opacity 2s ease-in-out;
  129.   -webkit-transition: opacity 2s ease-in-out;
  130.   -ms-transition: opacity 2s ease-in-out;
  131.   transition: opacity 2s ease-in-out;
  132.   height: 100%;
  133.   left: 0;
  134.   opacity: 0.375;
  135.   position: fixed;
  136.   top: 0;
  137.   width: 100%;
  138.   z-index: 1; }
  139.   #bg div {
  140.     -moz-transition: opacity 3s ease;
  141.     -webkit-transition: opacity 3s ease;
  142.     -ms-transition: opacity 3s ease;
  143.     transition: opacity 3s ease;
  144.     background-size: cover;
  145.     height: 100%;
  146.     left: 0;
  147.     opacity: 0;
  148.     position: absolute;
  149.     top: 0;
  150.     visibility: hidden;
  151.     width: 150%; }
  152.     #bg div.visible {
  153.       -moz-animation: bg 45s linear infinite;
  154.       -webkit-animation: bg 45s linear infinite;
  155.       -ms-animation: bg 45s linear infinite;
  156.       animation: bg 45s linear infinite;
  157.       opacity: 1;
  158.       visibility: visible;
  159.       z-index: 1; }
  160.       #bg div.visible.top {
  161.         z-index: 2; }
  162.       @media screen and (max-width: 1280px) {
  163.         #bg div.visible {
  164.           -moz-animation: bg 29.25s linear infinite;
  165.           -webkit-animation: bg 29.25s linear infinite;
  166.           -ms-animation: bg 29.25s linear infinite;
  167.           animation: bg 29.25s linear infinite; } }
  168.       @media screen and (max-width: 736px) {
  169.         #bg div.visible {
  170.           -moz-animation: bg 18s linear infinite;
  171.           -webkit-animation: bg 18s linear infinite;
  172.           -ms-animation: bg 18s linear infinite;
  173.           animation: bg 18s linear infinite; } }
  174.     #bg div:only-child {
  175.       -moz-animation-direction: alternate !important;
  176.       -webkit-animation-direction: alternate !important;
  177.       -ms-animation-direction: alternate !important;
  178.       animation-direction: alternate !important; }
  179.   body.is-preload #bg {
  180.     opacity: 0; }
  181.  
  182. @-moz-keyframes bg {
  183.   0% {
  184.     -moz-transform: translateX(0);
  185.     -webkit-transform: translateX(0);
  186.     -ms-transform: translateX(0);
  187.     transform: translateX(0); }
  188.   100% {
  189.     -moz-transform: translateX(-25%);
  190.     -webkit-transform: translateX(-25%);
  191.     -ms-transform: translateX(-25%);
  192.     transform: translateX(-25%); } }
  193.  
  194. @-webkit-keyframes bg {
  195.   0% {
  196.     -moz-transform: translateX(0);
  197.     -webkit-transform: translateX(0);
  198.     -ms-transform: translateX(0);
  199.     transform: translateX(0); }
  200.   100% {
  201.     -moz-transform: translateX(-25%);
  202.     -webkit-transform: translateX(-25%);
  203.     -ms-transform: translateX(-25%);
  204.     transform: translateX(-25%); } }
  205.  
  206. @-ms-keyframes bg {
  207.   0% {
  208.     -moz-transform: translateX(0);
  209.     -webkit-transform: translateX(0);
  210.     -ms-transform: translateX(0);
  211.     transform: translateX(0); }
  212.   100% {
  213.     -moz-transform: translateX(-25%);
  214.     -webkit-transform: translateX(-25%);
  215.     -ms-transform: translateX(-25%);
  216.     transform: translateX(-25%); } }
  217.  
  218. @keyframes bg {
  219.   0% {
  220.     -moz-transform: translateX(0);
  221.     -webkit-transform: translateX(0);
  222.     -ms-transform: translateX(0);
  223.     transform: translateX(0); }
  224.   100% {
  225.     -moz-transform: translateX(-25%);
  226.     -webkit-transform: translateX(-25%);
  227.     -ms-transform: translateX(-25%);
  228.     transform: translateX(-25%); } }
  229.  
  230. /* Type */
  231. body, input, select, textarea {
  232.   color: rgba(255, 255, 255, 0.75);
  233.   font-family: "Roboto", sans-serif;
  234.   font-size: 16pt;
  235.   font-weight: 400;
  236.   letter-spacing: -0.01em;
  237.   line-height: 1.65em; }
  238.   @media screen and (max-width: 1680px) {
  239.     body, input, select, textarea {
  240.       font-size: 12pt; } }
  241.   @media screen and (max-width: 1280px) {
  242.     body, input, select, textarea {
  243.       font-size: 11pt; } }
  244.   @media screen and (max-width: 980px) {
  245.     body, input, select, textarea {
  246.       font-size: 12pt; } }
  247.   @media screen and (max-width: 736px) {
  248.     body, input, select, textarea {
  249.       font-size: 12pt; } }
  250.   @media screen and (max-width: 480px) {
  251.     body, input, select, textarea {
  252.       font-size: 12pt; } }
  253.  
  254. a {
  255.   -moz-transition: border-bottom-color 0.2s ease, color 0.2s ease;
  256.   -webkit-transition: border-bottom-color 0.2s ease, color 0.2s ease;
  257.   -ms-transition: border-bottom-color 0.2s ease, color 0.2s ease;
  258.   transition: border-bottom-color 0.2s ease, color 0.2s ease;
  259.   border-bottom: dotted 1px rgba(255, 255, 255, 0.25);
  260.   color: #1cb495;
  261.   text-decoration: none; }
  262.   a:hover {
  263.     border-bottom-color: transparent;
  264.     color: #1cb495 !important;
  265.     text-decoration: none; }
  266.  
  267. strong, b {
  268.   color: #fff;
  269.   font-weight: 700; }
  270.  
  271. em, i {
  272.   font-style: italic; }
  273.  
  274. p {
  275.   margin: 0 0 2em 0; }
  276.  
  277. h1, h2, h3, h4, h5, h6 {
  278.   color: #fff;
  279.   font-weight: 700;
  280.   line-height: 1em;
  281.   margin: 0 0 1em 0; }
  282.   h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  283.     color: inherit;
  284.     text-decoration: none; }
  285.  
  286. h1 {
  287.   font-size: 2.5em;
  288.   line-height: 1.25em; }
  289.  
  290. h2 {
  291.   font-size: 1.75em;
  292.   line-height: 1.5em; }
  293.  
  294. h3 {
  295.   font-size: 1.35em;
  296.   line-height: 1.5em; }
  297.  
  298. h4 {
  299.   font-size: 1.1em;
  300.   line-height: 1.5em; }
  301.  
  302. h5 {
  303.   font-size: 0.9em;
  304.   line-height: 1.5em; }
  305.  
  306. h6 {
  307.   font-size: 0.7em;
  308.   line-height: 1.5em; }
  309.  
  310. sub {
  311.   font-size: 0.8em;
  312.   position: relative;
  313.   top: 0.5em; }
  314.  
  315. sup {
  316.   font-size: 0.8em;
  317.   position: relative;
  318.   top: -0.5em; }
  319.  
  320. blockquote {
  321.   border-left: solid 8px rgba(255, 255, 255, 0.35);
  322.   font-style: italic;
  323.   margin: 0 0 2em 0;
  324.   padding: 0.5em 0 0.5em 2em; }
  325.  
  326. code {
  327.   background: rgba(255, 255, 255, 0.125);
  328.   border-radius: 6px;
  329.   border: solid 2px rgba(255, 255, 255, 0.35);
  330.   font-family: "Courier New", monospace;
  331.   font-size: 0.9em;
  332.   margin: 0 0.25em;
  333.   padding: 0.25em 0.65em; }
  334.  
  335. pre {
  336.   -webkit-overflow-scrolling: touch;
  337.   font-family: "Courier New", monospace;
  338.   font-size: 0.9em;
  339.   margin: 0 0 2em 0; }
  340.   pre code {
  341.     display: block;
  342.     line-height: 1.75em;
  343.     padding: 1em 1.5em;
  344.     overflow-x: auto; }
  345.  
  346. hr {
  347.   border: 0;
  348.   border-bottom: solid 2px rgba(255, 255, 255, 0.35);
  349.   margin: 2em 0; }
  350.   hr.major {
  351.     margin: 3em 0; }
  352.  
  353. /* Section/Article */
  354. section.special, article.special {
  355.   text-align: center; }
  356.  
  357. header p {
  358.   color: rgba(255, 255, 255, 0.5);
  359.   position: relative;
  360.   margin: 0 0 1.5em 0; }
  361.  
  362. header h2 + p {
  363.   font-size: 1.25em;
  364.   margin-top: -1em;
  365.   line-height: 1.5em; }
  366.  
  367. header h3 + p {
  368.   font-size: 1.1em;
  369.   margin-top: -0.8em;
  370.   line-height: 1.5em; }
  371.  
  372. header h4 + p,
  373. header h5 + p,
  374. header h6 + p {
  375.   font-size: 0.9em;
  376.   margin-top: -0.6em;
  377.   line-height: 1.5em; }
  378.  
  379. @media screen and (max-width: 980px) {
  380.   header br {
  381.     display: none; } }
  382.  
  383. @media screen and (max-width: 736px) {
  384.   header br {
  385.     display: inline; } }
  386.  
  387. @media screen and (max-width: 480px) {
  388.   header br {
  389.     display: none; } }
  390.  
  391. /* Icon */
  392. .icon {
  393.   text-decoration: none;
  394.   border-bottom: none;
  395.   position: relative; }
  396.   .icon:before {
  397.     -moz-osx-font-smoothing: grayscale;
  398.     -webkit-font-smoothing: antialiased;
  399.     display: inline-block;
  400.     font-style: normal;
  401.     font-variant: normal;
  402.     text-rendering: auto;
  403.     line-height: 1;
  404.     text-transform: none !important;
  405.     font-family: 'Font Awesome 5 Free';
  406.     font-weight: 400; }
  407.   .icon > .label {
  408.     display: none; }
  409.   .icon:before {
  410.     line-height: inherit; }
  411.   .icon.solid:before {
  412.     font-weight: 900; }
  413.   .icon.brands:before {
  414.     font-family: 'Font Awesome 5 Brands'; }
  415.  
  416. /* List */
  417. ol {
  418.   list-style: decimal;
  419.   margin: 0 0 2em 0;
  420.   padding-left: 1.25em; }
  421.   ol li {
  422.     padding-left: 0.25em; }
  423.  
  424. ul {
  425.   list-style: disc;
  426.   margin: 0 0 2em 0;
  427.   padding-left: 1em; }
  428.   ul li {
  429.     padding-left: 0.5em; }
  430.  
  431. /* Icons */
  432. ul.icons {
  433.   cursor: default;
  434.   list-style: none;
  435.   padding-left: 0; }
  436.   ul.icons li {
  437.     display: inline-block;
  438.     padding: 0 1em 0 0; }
  439.     ul.icons li:last-child {
  440.       padding-right: 0; }
  441.     ul.icons li .icon:before {
  442.       font-size: 1.25em; }
  443.     ul.icons li a {
  444.       color: inherit; }
  445.  
  446. /* Form */
  447. form {
  448.   margin: 0 0 2em 0; }
  449.   form .message {
  450.     text-decoration: none;
  451.     -moz-transition: opacity 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
  452.     -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  453.     -ms-transition: opacity 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
  454.     transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  455.     -moz-transform: scale(1.05);
  456.     -webkit-transform: scale(1.05);
  457.     -ms-transform: scale(1.05);
  458.     transform: scale(1.05);
  459.     height: 2.75em;
  460.     line-height: 2.75em;
  461.     opacity: 0; }
  462.     form .message:before {
  463.       -moz-osx-font-smoothing: grayscale;
  464.       -webkit-font-smoothing: antialiased;
  465.       display: inline-block;
  466.       font-style: normal;
  467.       font-variant: normal;
  468.       text-rendering: auto;
  469.       line-height: 1;
  470.       text-transform: none !important;
  471.       font-family: 'Font Awesome 5 Free';
  472.       font-weight: 900; }
  473.     form .message:before {
  474.       margin-right: 0.5em; }
  475.     form .message.visible {
  476.       -moz-transform: scale(1);
  477.       -webkit-transform: scale(1);
  478.       -ms-transform: scale(1);
  479.       transform: scale(1);
  480.       opacity: 1; }
  481.     form .message.success {
  482.       color: #1cb495; }
  483.       form .message.success:before {
  484.         content: '\f00c'; }
  485.     form .message.failure {
  486.       color: #ff2361; }
  487.       form .message.failure:before {
  488.         content: '\f119'; }
  489.  
  490. label {
  491.   color: #fff;
  492.   display: block;
  493.   font-size: 0.9em;
  494.   font-weight: 700;
  495.   margin: 0 0 1em 0; }
  496.  
  497. @-moz-keyframes focus {
  498.   0% {
  499.     -moz-transform: scale(1);
  500.     -webkit-transform: scale(1);
  501.     -ms-transform: scale(1);
  502.     transform: scale(1); }
  503.   50% {
  504.     -moz-transform: scale(1.025);
  505.     -webkit-transform: scale(1.025);
  506.     -ms-transform: scale(1.025);
  507.     transform: scale(1.025); }
  508.   100% {
  509.     -moz-transform: scale(1);
  510.     -webkit-transform: scale(1);
  511.     -ms-transform: scale(1);
  512.     transform: scale(1); } }
  513.  
  514. @-webkit-keyframes focus {
  515.   0% {
  516.     -moz-transform: scale(1);
  517.     -webkit-transform: scale(1);
  518.     -ms-transform: scale(1);
  519.     transform: scale(1); }
  520.   50% {
  521.     -moz-transform: scale(1.025);
  522.     -webkit-transform: scale(1.025);
  523.     -ms-transform: scale(1.025);
  524.     transform: scale(1.025); }
  525.   100% {
  526.     -moz-transform: scale(1);
  527.     -webkit-transform: scale(1);
  528.     -ms-transform: scale(1);
  529.     transform: scale(1); } }
  530.  
  531. @-ms-keyframes focus {
  532.   0% {
  533.     -moz-transform: scale(1);
  534.     -webkit-transform: scale(1);
  535.     -ms-transform: scale(1);
  536.     transform: scale(1); }
  537.   50% {
  538.     -moz-transform: scale(1.025);
  539.     -webkit-transform: scale(1.025);
  540.     -ms-transform: scale(1.025);
  541.     transform: scale(1.025); }
  542.   100% {
  543.     -moz-transform: scale(1);
  544.     -webkit-transform: scale(1);
  545.     -ms-transform: scale(1);
  546.     transform: scale(1); } }
  547.  
  548. @keyframes focus {
  549.   0% {
  550.     -moz-transform: scale(1);
  551.     -webkit-transform: scale(1);
  552.     -ms-transform: scale(1);
  553.     transform: scale(1); }
  554.   50% {
  555.     -moz-transform: scale(1.025);
  556.     -webkit-transform: scale(1.025);
  557.     -ms-transform: scale(1.025);
  558.     transform: scale(1.025); }
  559.   100% {
  560.     -moz-transform: scale(1);
  561.     -webkit-transform: scale(1);
  562.     -ms-transform: scale(1);
  563.     transform: scale(1); } }
  564.  
  565. input[type="text"],
  566. input[type="password"],
  567. input[type="email"],
  568. select,
  569. textarea {
  570.   -moz-appearance: none;
  571.   -webkit-appearance: none;
  572.   -ms-appearance: none;
  573.   appearance: none;
  574.   -moz-transform: scale(1);
  575.   -webkit-transform: scale(1);
  576.   -ms-transform: scale(1);
  577.   transform: scale(1);
  578.   -moz-transition: border-color 0.2s ease, background-color 0.2s ease;
  579.   -webkit-transition: border-color 0.2s ease, background-color 0.2s ease;
  580.   -ms-transition: border-color 0.2s ease, background-color 0.2s ease;
  581.   transition: border-color 0.2s ease, background-color 0.2s ease;
  582.   background-color: transparent;
  583.   border-radius: 6px;
  584.   border: none;
  585.   border: solid 2px rgba(255, 255, 255, 0.35);
  586.   color: inherit;
  587.   display: block;
  588.   outline: 0;
  589.   padding: 0 1em;
  590.   text-decoration: none;
  591.   width: 100%; }
  592.   input[type="text"]:invalid,
  593.   input[type="password"]:invalid,
  594.   input[type="email"]:invalid,
  595.   select:invalid,
  596.   textarea:invalid {
  597.     box-shadow: none; }
  598.   input[type="text"]:focus,
  599.   input[type="password"]:focus,
  600.   input[type="email"]:focus,
  601.   select:focus,
  602.   textarea:focus {
  603.     -moz-animation: focus 0.1s;
  604.     -webkit-animation: focus 0.1s;
  605.     -ms-animation: focus 0.1s;
  606.     animation: focus 0.1s;
  607.     background-color: rgba(255, 255, 255, 0.125);
  608.     border-color: #1cb495; }
  609.  
  610. select {
  611.   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.35)' /%3E%3C/svg%3E");
  612.   background-size: 1.25rem;
  613.   background-repeat: no-repeat;
  614.   background-position: calc(100% - 1rem) center;
  615.   height: 2.75em;
  616.   padding-right: 2.75em;
  617.   text-overflow: ellipsis; }
  618.   select option {
  619.     color: #fff;
  620.     background: #000; }
  621.   select:focus::-ms-value {
  622.     background-color: transparent; }
  623.   select::-ms-expand {
  624.     display: none; }
  625.  
  626. input[type="text"],
  627. input[type="password"],
  628. input[type="email"],
  629. select {
  630.   height: 2.75em; }
  631.  
  632. textarea {
  633.   padding: 0.75em 1em; }
  634.  
  635. input[type="checkbox"],
  636. input[type="radio"] {
  637.   -moz-appearance: none;
  638.   -webkit-appearance: none;
  639.   -ms-appearance: none;
  640.   appearance: none;
  641.   display: block;
  642.   float: left;
  643.   margin-right: -2em;
  644.   opacity: 0;
  645.   width: 1em;
  646.   z-index: -1; }
  647.   input[type="checkbox"] + label,
  648.   input[type="radio"] + label {
  649.     text-decoration: none;
  650.     color: rgba(255, 255, 255, 0.75);
  651.     cursor: pointer;
  652.     display: inline-block;
  653.     font-size: 1em;
  654.     font-weight: 400;
  655.     padding-left: 2.4em;
  656.     padding-right: 0.75em;
  657.     position: relative; }
  658.     input[type="checkbox"] + label:before,
  659.     input[type="radio"] + label:before {
  660.       -moz-osx-font-smoothing: grayscale;
  661.       -webkit-font-smoothing: antialiased;
  662.       display: inline-block;
  663.       font-style: normal;
  664.       font-variant: normal;
  665.       text-rendering: auto;
  666.       line-height: 1;
  667.       text-transform: none !important;
  668.       font-family: 'Font Awesome 5 Free';
  669.       font-weight: 900; }
  670.     input[type="checkbox"] + label:before,
  671.     input[type="radio"] + label:before {
  672.       background: rgba(255, 255, 255, 0.125);
  673.       border-radius: 6px;
  674.       border: solid 2px rgba(255, 255, 255, 0.35);
  675.       content: '';
  676.       display: inline-block;
  677.       font-size: 0.8em;
  678.       height: 1.65em;
  679.       left: 0;
  680.       line-height: 1.65em;
  681.       position: absolute;
  682.       text-align: center;
  683.       top: 0;
  684.       width: 1.65em; }
  685.   input[type="checkbox"]:checked + label:before,
  686.   input[type="radio"]:checked + label:before {
  687.     background: #1cb495;
  688.     border-color: #1cb495;
  689.     color: #ffffff;
  690.     content: '\f00c'; }
  691.   input[type="checkbox"]:focus + label:before,
  692.   input[type="radio"]:focus + label:before {
  693.     border-color: #1cb495;
  694.     box-shadow: 0 0 0 2px #1cb495; }
  695.  
  696. input[type="checkbox"] + label:before {
  697.   border-radius: 6px; }
  698.  
  699. input[type="radio"] + label:before {
  700.   border-radius: 100%; }
  701.  
  702. ::-webkit-input-placeholder {
  703.   color: rgba(255, 255, 255, 0.5) !important;
  704.   opacity: 1.0; }
  705.  
  706. :-moz-placeholder {
  707.   color: rgba(255, 255, 255, 0.5) !important;
  708.   opacity: 1.0; }
  709.  
  710. ::-moz-placeholder {
  711.   color: rgba(255, 255, 255, 0.5) !important;
  712.   opacity: 1.0; }
  713.  
  714. :-ms-input-placeholder {
  715.   color: rgba(255, 255, 255, 0.5) !important;
  716.   opacity: 1.0; }
  717.  
  718. .formerize-placeholder {
  719.   color: rgba(255, 255, 255, 0.5) !important;
  720.   opacity: 1.0; }
  721.  
  722. /* Button */
  723. input[type="submit"],
  724. input[type="reset"],
  725. input[type="button"],
  726. button,
  727. .button {
  728.   -moz-appearance: none;
  729.   -webkit-appearance: none;
  730.   -ms-appearance: none;
  731.   appearance: none;
  732.   -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  733.   -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  734.   -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  735.   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  736.   background-color: #1cb495;
  737.   border-radius: 6px;
  738.   border: 0;
  739.   color: #ffffff !important;
  740.   cursor: pointer;
  741.   display: inline-block;
  742.   font-weight: 700;
  743.   height: 2.75em;
  744.   line-height: 2.75em;
  745.   padding: 0 1.125em;
  746.   text-align: center;
  747.   text-decoration: none;
  748.   white-space: nowrap; }
  749.   input[type="submit"]:hover,
  750.   input[type="reset"]:hover,
  751.   input[type="button"]:hover,
  752.   button:hover,
  753.   .button:hover {
  754.     background-color: #1fcaa7; }
  755.   input[type="submit"]:active,
  756.   input[type="reset"]:active,
  757.   input[type="button"]:active,
  758.   button:active,
  759.   .button:active {
  760.     background-color: #199e83; }
  761.   input[type="submit"].disabled, input[type="submit"]:disabled,
  762.   input[type="reset"].disabled,
  763.   input[type="reset"]:disabled,
  764.   input[type="button"].disabled,
  765.   input[type="button"]:disabled,
  766.   button.disabled,
  767.   button:disabled,
  768.   .button.disabled,
  769.   .button:disabled {
  770.     opacity: 0.5; }
  771.   @media screen and (max-width: 480px) {
  772.     input[type="submit"],
  773.     input[type="reset"],
  774.     input[type="button"],
  775.     button,
  776.     .button {
  777.       padding: 0; } }
  778.  
  779. /* Header */
  780. #header h1 {
  781.   font-size: 3.25em;
  782.   margin: 0 0 0.55em 0; }
  783.  
  784. #header p {
  785.   font-size: 1.35em;
  786.   line-height: 1.65em; }
  787.  
  788. #header a {
  789.   color: inherit; }
  790.  
  791. @media screen and (max-width: 736px) {
  792.   #header h1 {
  793.     font-size: 2em; }
  794.   #header p {
  795.     font-size: 1em; } }
  796.  
  797. @media screen and (max-width: 480px) {
  798.   #header {
  799.     margin: 0 0 1em 0; } }
  800.  
  801. /* Signup Form */
  802. #signup-form {
  803.   display: -moz-flex;
  804.   display: -webkit-flex;
  805.   display: -ms-flex;
  806.   display: flex;
  807.   position: relative; }
  808.   #signup-form input[type="text"],
  809.   #signup-form input[type="password"],
  810.   #signup-form input[type="email"] {
  811.     width: 18em; }
  812.   #signup-form > * {
  813.     margin: 0 0 0 1em; }
  814.   #signup-form > :first-child {
  815.     margin: 0 0 0 0; }
  816.   @media screen and (max-width: 480px) {
  817.     #signup-form {
  818.       -moz-flex-direction: column;
  819.       -webkit-flex-direction: column;
  820.       -ms-flex-direction: column;
  821.       flex-direction: column; }
  822.       #signup-form input[type="type"],
  823.       #signup-form input[type="password"],
  824.       #signup-form input[type="email"] {
  825.         width: 100%; }
  826.       #signup-form > * {
  827.         margin: 1.25em 0 0 0; }
  828.       #signup-form .message {
  829.         bottom: -1.5em;
  830.         font-size: 0.9em;
  831.         height: 1em;
  832.         left: 0;
  833.         line-height: inherit;
  834.         margin-top: 0;
  835.         position: absolute; } }
  836.  
  837. /* Footer */
  838. #footer {
  839.   -moz-transition: opacity 0.5s ease-in-out;
  840.   -webkit-transition: opacity 0.5s ease-in-out;
  841.   -ms-transition: opacity 0.5s ease-in-out;
  842.   transition: opacity 0.5s ease-in-out;
  843.   bottom: 4em;
  844.   color: rgba(255, 255, 255, 0.5);
  845.   left: 4em;
  846.   opacity: 0.5;
  847.   position: absolute; }
  848.   #footer .icons {
  849.     margin: 0 0 0.5em 0; }
  850.   #footer .copyright {
  851.     font-size: 0.8em;
  852.     list-style: none;
  853.     padding: 0; }
  854.     #footer .copyright li {
  855.       border-left: solid 1px rgba(255, 255, 255, 0.25);
  856.       display: inline-block;
  857.       line-height: 1em;
  858.       margin: 0 0 0 0.75em;
  859.       padding: 0 0 0 0.75em; }
  860.       #footer .copyright li:first-child {
  861.         border-left: 0;
  862.         margin-left: 0;
  863.         padding-left: 0; }
  864.     #footer .copyright a {
  865.       color: inherit; }
  866.   #footer:hover {
  867.     opacity: 1; }
  868.   #footer > :last-child {
  869.     margin-bottom: 0; }
  870.   @media screen and (max-width: 1680px) {
  871.     #footer {
  872.       bottom: 3.5em;
  873.       left: 3.5em; } }
  874.   @media screen and (max-width: 736px) {
  875.     #footer {
  876.       bottom: 2em;
  877.       left: 2em; } }
  878.   @media screen and (max-width: 360px) {
  879.     #footer {
  880.       bottom: 1.25em;
  881.       left: 1.25em; } }
  882.   @media screen and (max-height: 640px) {
  883.     #footer {
  884.       bottom: auto;
  885.       left: auto;
  886.       margin: 1em 0 0 0;
  887.       position: relative; } }
  888.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!