@import url('https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root
{
 --color-bg: #f0f0f0;
 --color-text: #333;
 --color-link: #03c;
 --color-blue: #006;
}

*
{
 font-family: "Jost", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
}

body
{
 margin: 0;
 padding: 0;
 font-size: 16pt;
 line-height: 1.5em;
 background-color: var(--color-bg);
 overflow-x: hidden;
}

.center
{
 text-align: center;
}

a
{
 text-decoration: none;
 color: var(--color-link);
}

ul
{
 line-height: 2em;
}

h1, h2
{
 font-family: "Arsenal SC", serif;
 font-weight: 400;
 font-style: normal;
 text-align: center;
}

h1
{
 font-size: 40pt;
 margin: 0;
 line-height: 1em;
}

h2
{
 font-size: 52pt;
 margin: .5em 0;
}

header
{
 background-color: var(--color-blue);
 color: #fff;
 padding: 1em;
}

section
{
 width: 100%;
}

#history
{
 width: 100vw;
 height: 112px;
 overflow: hidden;
 position: relative;
}

#history ul
{
 display: flex;
 flex-direction: row;
 margin: 0;
 padding: 0;
 list-style: none;
 position: relative;
 left: 0;
 top: 0;
 height: 112px;
 min-width: max-content;
 transition: left 0.1s ease-out;
}

#history li
{
 flex: none;
 width: 150px;
 height: 112px;
 display: block;
 margin: 0;
}

#history img
{
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
}

section#works
{
 background-color: var(--color-blue);
 color: #fff;
 padding: 0 0 2rem 0;
}

section#works a
{
 color: #fff;
}

#works-list
{
 width: 90%;
 margin: 0 auto;
 max-width: 1400px;
 text-align: center;
}

#works-list > div
{
 display: inline-block;
 width: 45%;
 margin: 0 2% 2em 2%;
 font-size: 12pt;
}

#works-list > div.hide
{
 display: none;
 opacity: 0;
}

#works-list > div > img
{
 display: block;
 margin-bottom: 0;
 width: 100%;
 transition: transform .5s;
}

#works-list > div:hover > img
{
 transform: scale(1.1);
 transform-origin: 50% 50%;
}

.wrapper
{
 max-width: 900px;
 margin: 0 auto;
 padding: 2rem;
}

.button-blue
{
 text-transform: uppercase;
 background-color: #fff;
 color: var(--color-blue);
 border: 0;
 padding: 15px 45px;
 cursor: pointer;
}

@media (max-width: 800px)
{
 body {font-size: 14pt;}
 h1 {font-size: 30pt;}
 h2 {font-size: 38pt;}
 .wrapper {padding: 1rem;}
 #works-list > div {width: 100%; margin: 0 0 2em 0; font-size: 12pt;}
}

@media (max-width: 600px)
{
 h1 {font-size: 24pt;}
 h2 {font-size: 30pt;}
}