@font-face {
	font-family: 'SharpGroteskBook20';
	src: url('/fonts/SharpGrotesk/SharpGroteskBook20.eot');
	src: url('/fonts/SharpGrotesk/SharpGroteskBook20.eot?#iefix') format('embedded-opentype'),
		url('/fonts/SharpGrotesk/SharpGroteskBook20.woff2') format('woff2'),
		url('/fonts/SharpGrotesk/SharpGroteskBook20.woff') format('woff');
}

@font-face {
	font-family: 'SharpGroteskBook22';
	src: url('/fonts/SharpGrotesk/SharpGroteskBook22.eot');
	src: url('/fonts/SharpGrotesk/SharpGroteskBook22.eot?#iefix') format('embedded-opentype'),
		url('/fonts/SharpGrotesk/SharpGroteskBook22.woff2') format('woff2'),
		url('/fonts/SharpGrotesk/SharpGroteskBook22.woff') format('woff');
}

@font-face {
	font-family: 'SharpGroteskMedium20';
	src: url('/fonts/SharpGrotesk/SharpGroteskMedium20.eot');
	src: url('/fonts/SharpGrotesk/SharpGroteskMedium20.eot?#iefix') format('embedded-opentype'),
		url('/fonts/SharpGrotesk/SharpGroteskMedium20.woff2') format('woff2'),
		url('/fonts/SharpGrotesk/SharpGroteskMedium20.woff') format('woff');
}
*{
    margin: 0;
    padding: 0;
}
body{
    font-size: 16px;
    line-height: 1.618;
    font-weight: 200;
    width: 100vw;
    height: 100vh;
    overflow-x: scroll;
    background:radial-gradient(circle, hsl(245, 5.8823529412%, 42.5%), hsl(245, 20%, 75%)) no-repeat fixed;
    color: #fff;
    font-family: SharpGroteskBook20;
}
header{
    margin-bottom: 0;
    z-index: 10;
    margin-top: 0;
    display: grid;
    align-items: center;
    position: fixed;
    width: calc(100% - clamp(2rem, 12vmin, 10rem));;
    padding: clamp(1rem, 6vmin, 5rem);
    grid-template-columns: 17vw auto;
    top: 0;
}
header .logo{
    width: 100%;
}
header .logo img{
    vertical-align: middle;
 
}
header .logo img:first-of-type{
    margin-right: 1rem;
}
header .paper{
    text-align: right;
}
section:first-of-type{
margin-top: 20vh;
}
section{
    padding: 8vh clamp(0rem, 8%, clamp(1rem, 6vmin, 5rem)* 2) 4vh;
    font-size: clamp(.8em, 1.25vw, 1em);
    margin: calc(clamp(1rem, 6vmin, 5rem)* 2) auto;
    max-width: 1024px;
}
section h2{
    font-weight: 400;
    font-size: clamp(230%, 3.5vw, 345%);
    line-height: 1.15;
    text-align: center;
    padding-bottom: 5vh;
}
.general-intro, .closing-text{
    text-align:center;
    margin-bottom: 5vh;
}
.case-item{
    display: grid;
    grid-template-columns: 1fr 20% 1fr;
    grid-column-gap: .75%;
    margin-top: -1px;
}
article.tree.list .case-item figure, 
article.tree.list .case-item .description{
    margin: 10% 0;
    transition: scale .5scubic-bezier(0,0,.25,1);
    transform-origin: left;
}
figure{
    text-align: center;
}
article.tree div.tree.img{
    background-image: url("./images/case-bckgrnd-img.svg");
}
article.tree div.tree{
    background: url("./images/case-bckgrnd.svg") no-repeat center top / 100%;
}
article.tree div.tree.end{
    background: url("./images/case-bckgrnd-end.svg") no-repeat center top / 100%;
}
article.tree div.tree.img.end{
    background-image: url("./images/case-bckgrnd-end-img.svg");
}
h3{
    font-size: 1.4rem;
}
a{
    color: #fff;
    text-decoration: underline;
}
.paper a{
    text-decoration: none;
}
@media (max-width: 780px) {
    article.tree.list .case-item {
        grid-template-columns: 1fr;
    }
    section:first-of-type {
        margin-top: 10vh;
    }
}
@media (max-width: 1180px) {
    section{
        max-width:760px;
    }
}