/* used media queries

@media (max-width: 468px)  {}
@media (max-width: 768px)  {}
@media (max-width: 1024px) {}
@media (max-width: 1400px) {}
@media (max-width: 1600px) {}
*/

/* Define the "system" font family */


@media (max-width: 1024px) {
    html { font-size: 17px; }
}

@media (max-width: 468px) {
    html { font-size: 15px; }
}

/* Modules will scale with document (rem values) */
header { font-size: 1rem; }
footer { font-size: 0.75rem; }
main   { font-size: 1rem; }

/* Type will scale with modules (em values) */
h1, .looks_like_h1 { font-size: 90px; }
h2, .looks_like_h2 { font-size: 2.5em; }
h3, .looks_like_h3 { font-size: 2em; }


code {
    background:#EEE;
    padding:1px 4px;
    border-radius:3px;
    font-size: 0.8em;
    color:#666;
    border:1px solid #666;
}

/* buttons */

 /**
     * Reset button styles
     * It takes some work to achieve a “blank slate” look.
     */
 button {
     padding: 0;
     border: none;
     font: inherit;
     color: inherit;
     font-size: 12px;

     background-color: transparent;
     /* show a hand cursor on hover; some argue that we
      should keep the default arrow cursor for buttons */
     cursor: pointer;
 }

 /**
     * Button component
     */
 .btn {
     /* default for <button>, but needed for <a> */
     display: inline-block;
     text-align: center;
     text-decoration: none;
     width: 250px;

     /* create a small space when buttons wrap on 2 lines */
     margin: 6px 0px;


     /* invisible border (will be colored on hover/focus) */
     border: solid 1px;
     border-radius: 0px;

     /* button size comes from text + padding, avoid height */
     padding: 0.8em 1em;

     /* make sure colors have enough contrast! */
     color: #000000;
     background-color: transparent;
 }

 /* old-school "down" effect on clic + color tweak */
 .btn:active {
     transform: translateY(1px);
     filter: saturate(150%);
 }

 /* inverse colors on hover */
 .btn:hover {
     color: #fff;
     border-color: currentColor;
     background-color: black;
     border: solid 1px;
 }

 /* Firefox: remove the inner border shown on focus */
 .btn::-moz-focus-inner {
     border: none;
 }

 /* make sure we have a visible focus ring */
 .btn:focus {
     outline: none;
     box-shadow: 0 0 0 3px #111111,
         0 0 0 1.5px #111111;
 }

 /* hide focus style if not from keyboard navigation */
 .js-focus-visible .btn:focus:not(.focus-visible) {
     box-shadow: none;
 }