/*==========================================================

STF / 4211

Minimal Landing Page

Everything you will commonly edit is near the top.

==========================================================*/


/*==========================================================

COLOURS

==========================================================*/

:root {

    --paper: #f6f2eb;

    --text: #34312d;

    --body: #4b4641;

    --muted: #726d67;

    --link: #34312d;

    --max-width: 1460px;

    --content-width: 560px;

}


/*==========================================================

LOCAL FONTS

Copy the font files into

/fonts/

==========================================================*/

@font-face {

    font-family: "JetBrains Mono";

    src: url("fonts/JetBrainsMono-Regular.woff2");

}

@font-face {

    font-family: "JetBrains Mono Bold";

    src: url("fonts/JetBrainsMono-Bold.woff2");

}

@font-face {

    font-family: "IBM Plex Sans";

    src: url("fonts/IBMPlexSans-Regular.woff2");

}

@font-face {

    font-family: "IBM Plex Sans Medium";

    src: url("fonts/IBMPlexSans-Medium.woff2");

}



/*==========================================================

GLOBAL

==========================================================*/

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



body {

    background:var(--paper);

    color:var(--body);

    font-family:"IBM Plex Sans", sans-serif;

    min-height:100vh;

}



.page {

    max-width:var(--max-width);

    margin:auto;

    min-height:100vh;

    padding:72px;

    display:flex;

    flex-direction:column;

}



/*==========================================================

MAIN LAYOUT

==========================================================*/

.hero {

    flex:1;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:start;

}



.content {

    max-width:var(--content-width);

}



/*==========================================================

TITLE

==========================================================*/

h1 {

    font-family:"JetBrains Mono Bold";

    color:var(--text);

    font-size:4.0rem;

    letter-spacing:-2px;

    margin-bottom:28px;

}

h1 span {

    font-size:1.08em;

}



h2 {

    font-family:"IBM Plex Sans Medium";

    color:var(--text);

    font-size:1.65rem;

    font-weight:500;

    line-height:1.35;

    margin-left:20px;

    margin-bottom:24px;

}



/*==========================================================

BODY TEXT

==========================================================*/

.intro {

    margin-left:32px;

}



.intro p {

    margin-bottom:24px;

    font-size:1.15rem;

    line-height:1.55;

}



/*==========================================================

IMAGE

==========================================================*/

.art {

    display:flex;

    justify-content:flex-end;

    align-items:flex-start;

}



.art img {

    width:500px;

    max-width:100%;

    object-fit:contain;

}



/*==========================================================

FOOTER

==========================================================*/

footer {

    margin-top:40px;

    padding-top:30px;

}



.footer-left {

    max-width:820px;

}



footer p {

    font-size:0.85rem;

    line-height:1.25;

    color:var(--muted);

}



footer a {

    color:var(--link);

    text-decoration:none;

    border-bottom:1px solid transparent;

    transition:.2s;

}



footer a:hover {

    border-bottom:1px solid var(--text);

}



/*==========================================================

RESPONSIVE

==========================================================*/

@media (max-width:980px){

.page{

padding:42px;

}

.hero{

grid-template-columns:1fr;

gap:70px;

}

.content{

max-width:100%;

}

.art{

justify-content:flex-start;

}

.art img{

width:340px;

}

h1{

font-size:3.2rem;

margin-bottom:42px;

}

h2{

font-size:1.6rem;

}

.intro p{

font-size:1rem;

}

footer{

margin-top:70px;

}

}