numerologia/www.css

calculadora de numerología...numerology calculator

* {
  box-sizing: border-box;
  transition: 90ms filter;
}

:root {
  background: #111;
  color: lime;
}

::selection {
  background: gold;
  color: #000;
}

:any-link {
  color: deepskyblue;
}

:hover {
  filter: hue-rotate(300deg);
}

:enabled,
:disabled {
  font-size: 1.5rem;
  border-style: solid;
  border-radius: 0;
  border-color: lime;
  background: lime;
  color: #000;
}

:disabled {
  border-style: dashed;
  border-color: #777;
  background: #999;
  color: #000;
}

::placeholder {
  color: currentColor;
}

:focus  {
  filter: hue-rotate(60deg);
  outline-color: lime;
  outline-style: solid;
  outline-width: thick;
}

:active {
  filter: hue-rotate(240deg);
}

:invalid {
  filter: hue-rotate(90deg);
}

html {
  font-family: sans-serif;
  font-size: calc(2ex + 1vmin);
  line-height: 2;
}

body {
  box-sizing: border-box;
  max-width: 60em;
  margin: auto;
  margin-block-start: 2rem;
  margin-block-end: 5rem;
  padding-inline-start: 5vw;
  padding-inline-end: 5vw;
  overflow-wrap: anywhere;
}

output {
  filter: hue-rotate(300deg);
}

i {
  font-style: inherit;
  font-weight: bolder;
}

address {
  font: inherit;
  margin: 0;
}

section a {
  margin-inline-end: 1ex;
}

input {
  border-width: thick;
  padding: .5ex;
  max-width: 80%;
  min-width: 40%;
}

button {
  border-width: thick;
  padding: .5ex;
  max-width: 20%;
  min-width: 5ex;
}

small,
address {
 font-weight: 300;
}

h3 { line-height: normal; font-size: 1.333rem }
h2 { line-height: normal; font-size: 1.666rem }
h1 { line-height: normal; font-size: 2rem }
h2 a { font-weight: 400 }
h1 i { font-size: .666em; font-weight: lighter }
small { font-size: .666em; line-height: 1 }
small:first-of-type { font-size: .8em }
label { line-height: 1.5; font-size: 2rem }
output { font-weight: 500 }
b { font-weight: 700 }

header {
  line-height: 1.2;
  margin-block-end: 1rem;
}

form p {
  margin-block-start: 1ex;
  margin-block-end: 0;
}

form p:first-of-type {
  margin-block-start: 1em;
}

main,
label,
section {
  display: block;
}

form,
aside,
header,
footer {
  display: block;
  margin: 0;
  margin-block-end: 2em;
}

aside {
  max-width: 33em;
}

[hidden] + kbd,
[hidden] { display: none }

[role=status] {
  font-size: 1.5rem;
  margin-block-end: 1rem;
}

@media (max-width: 60em) {
  input {
    max-width: 66%;
    min-width: 66%;
  }

  button {
    max-width: 22%;
    min-width: 22%;
  }
}