/*
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;
}
}