/*
JohnsonJohn.com MAIN CSS File
Updated 11.25.2024
*/
@font-face {
    font-family : Inter;
    font-style : normal;
    font-weight : 400;
    src : url(Inter.woff2) format("woff2");
    }
    * {
    box-sizing : border-box;
    padding : 0;
    margin : 0;
    background : 0 0;
    text-decoration : none;
    outline : 0;
    font-family : inherit;
    font-size : inherit;
    line-height : inherit;
    font-weight : inherit;
    color : inherit;
    font-feature-settings : "onum", "kern", "liga", "clig", "calt";
    }
    body, html {
    width : 100%;
    height : 100%;
    background : #141414;
    color : #e5e5e5;
    font-family : Inter, sans-serif;
    }
    body {
    display : grid;
    grid-template-rows : 1fr auto;
    }
    main {
    padding : 0 50px;
    align-self : center;
    justify-self : center;
    text-align : center;
    }
    h1 {
    font-variation-settings : 'wght' 600, 'slnt' 0;
    font-size : 40px;
    line-height : 60px;
    }
    button {
    font-variation-settings : 'wght' 400, 'slnt' 0;
    border : none;
    appearance : none;
    font-size : 20px;
    line-height : 30px;
    padding : 10px 30px;
    border-radius : 9999px;
    background : #191919;
    color : #999;
    margin-top : 1em;
    transition : color 0.4s ease-out, background 0.4s ease-out;
    cursor : pointer;
    }
    button:hover {
    background : #00f;
    color : #fff;
    }
    footer {
    font-variation-settings : 'wght' 500, 'slnt' 0;
    text-align : center;
    padding : 30px 50px;
    font-size : 14px;
    color : #666;
    }
    a {
    transition : color 0.4s ease-out;
    }
    a:hover {
    color : #fff;
    }
    @media (max-width: 800px) {
    h1 {
    font-size : 30px;
    line-height : 50px;
    }
    button {
    font-size : 16px;
    line-height : 25px;
    }
    footer {
    font-size : 12px;
    line-height : 30px;
    }
    }