@charset "utf-8";


/* Font Import */

@import url("https://use.typekit.net/swe3vxd.css");


/* Presettings */

*, h1 {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
margin: 0;
padding: 0;
color: inherit;
font-family: museo-slab, serif;
font-size: inherit;
font-style: normal;
font-weight: 500;
line-height: 100%;
text-decoration: none;
cursor: inherit;
}

html {
background-color: white;
color: black;
font-size: clamp(20px, 2.5279017857142856vw, 50px);
cursor: crosshair;
}

html, body {
width: 100%;
height: 100%;
}


/* Basic Styles */

a:hover {
cursor: pointer;
}


/* Layout */

#canvas_area, #content_area {
display: flex;
position: fixed;
flex-direction: column;
width: 100%;
height: 100%;
}

#content_area {
pointer-events: none;
}

#canvas, #content {
height: 100%;
margin: 0.5077262693156733rem;
}

#canvas {
overflow: hidden;
background-color: rgb(237, 236, 232);
}

#content {
display: flex;
flex-direction: column;
}

#header, #footer {
display: flex;
padding: 0.3752759381898455rem 0.5077262693156733rem 0.35320088300220753rem 0.5077262693156733rem;
}

#footer {
margin-top: auto;
}

#header div, #footer div {
pointer-events: all;
}

#header div:nth-last-child(1), #footer div:nth-last-child(1) {
margin-left: auto;
}


/* Window Size A Start */

@media screen and (max-height: 300px) {


/* Layout */

#content_area {
display: none;
}


/* Window Size A End */

}


/* Window Size B Start */

@media screen and (max-width: 1000px) {


/* Presettings */

html {
font-size: 4.219409282700422vw;
}


/* Window Size B End */

}