/* define variables (custom fonts, colors, etc.) */

@font-face {
	font-family: 'monaspace';
	src: url('assets/fonts/Monaspace Krypton Var.woff2') format('woff2 supports variations'),
		url('assets/fonts/Monaspace Krypton Var.woff2') format('woff2-variations');
	/* Fallback syntax */
	font-weight: 200 800;
	/* Defines the supported range of weights */
	font-stretch: 100 125;
	/* Add other axis ranges here as needed (e.g., font-stretch) */
}

:root {
    --bean-hair: #1e2129;
    --bean-skin: #535562;
    --bean-skin-markings: #414253;
    --bean-skin-light: #8e91a3;
    --bean-shirt: #14161e;
}

/* css for base elements */

html {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	font-family: "monaspace", monospace;
	color: white;
	background-color: var(--bean-hair);
}

h1 {
	color: var(--bean-skin);
	user-select: none;
	font-stretch:110%;
	margin-top:0;
}

h2 {
	color: var(--bean-skin-light);
	user-select: none;
	font-stretch:110%;
}

table {
  border-collapse: collapse;
}

th, td {
  padding:5px;
}

button {
    transition:0.2s;
    background-color: var(--bean-skin);
    font-family: "monaspace", monospace;
    border: none;
    border-radius: 25px;
    corner-shape: squircle;
    color: white;
    box-shadow: 0 5px 10px var(--bean-shirt);
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: var(--bean-skin-markings);
    color: var(--bean-skin-light);
    box-shadow: 0 2px 20px var(--bean-shirt);
    font-weight:800;
    font-stretch:115%;
    transition:0.2s;
}

hr {
    border: none;
    border-top: 2px solid var(--bean-skin);
    margin: 1em 0;
}


/* css for custom elements */

.noselect {
    user-select: none;
}

.outerdiv {
    display: table;
    position: absolute;
    height:98%;
    width: 98%;
}

.middlediv {
    display: table-cell;
    vertical-align: middle;
}

.innerdiv {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

.innerdivhome {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.innerdivthin {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.parent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 3 / 2; }

.navbutton {
    transition:0.2s;
    background-color: var(--bean-skin);
    font-family: "monaspace", monospace;
    border: none;
    border-radius: 25px;
    corner-shape: squircle;
    color: white;
    box-shadow: 0 5px 10px var(--bean-shirt);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width:70%;
    user-select:none;
    text-align:left;
    margin-bottom:10px;
}


@media (min-width: 768px) {
    .parent {
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 15px;
        grid-row-gap: 0px;
    }
    .innerdivhome {
        margin-left: auto;
        margin-right: auto;
        width: 600px;
    }
    
    .innerdivthin {
        margin-left: auto;
        margin-right: auto;
        width: 350px;
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; }
    
    .navbutton {
        transition:0.2s;
        background-color: var(--bean-skin);
        font-family: "monaspace", monospace;
        border: none;
        border-radius: 25px;
        corner-shape: squircle;
        color: white;
        box-shadow: 0 5px 10px var(--bean-shirt);
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        width:100%;
        user-select:none;
        text-align:left;
        margin-bottom:10px;
    }
}