/*fonts*/
@import
url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    font-family: 'Roboto', sans-serif;
}

/*Global fonts*/
h1 {
    font-size: 60pt;
}

h1, h2, h3 {
    font-weight: 100;
}

/*Universal formatting*/
* {
    box-sizing: border-box;
}

/*Fill the screen*/
body {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*Animate a fade-in entry for every site element*/
:not(body, div, section, html) {
    animation: loadin 1s ease forwards;
}

@keyframes loadin {
    from {
        opacity: 0;
        transform: translateY(10pt);
    }
    to {
        opacity: 1;
        transform: translateY(0pt);
    }
}

/* Organizational */
.content { /* Dynamically sets side margins to center content cross-platform */
    width: clamp(400px, 67%, 1280px);
}

.hbox {
    display: flex;
    flex-direction: row;
}

.vbox {
    display: flex;
    flex-direction: column;
}

.flex-center {
    display: flex;
    align-content: center;
    justify-items: center;
}

/* Canvas Styles */
#canvas-container {
    width: 80%;
    flex-grow: 1;
}
canvas {
    width: 100%;
    height: 100%;
}