/*=============Typo*/
@font-face {
  font-family: 'lineal';
  src: url('../typo/Lineal-Heavy.ttf');
}

@font-face {
  font-family: 'pressStart2P';
  src: url('../typo/PressStart2P-Regular.ttf');
}

@font-face {
  font-family: 'velvelyne';
  src: url('../typo/Velvelyne-Light.ttf') format('truetype');
  font-weight:lighter;
}

@font-face {
  font-family: 'velvelyne';
  src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
  font-weight: bold;
}

/*============General*/

body, html {
    padding: 0;
    margin: 0;
}

body {
  min-width: 100vw;
  min-height: 100vh;
  overflow: auto;
}

:root {
    --back-color: black;
    --main-color: white;
    --accent-color: #3CFF00;
    --neon-color: #3CFF00;

    color: var(--main-color);
    font-size: 1rem;
    background: var(--back-color);
    font-family: 'velvelyne', sans-serif;
    font-weight: bold;
}

body > *{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
}

/*===================Animation*/
@keyframes blink {
  0%   { color: var(--accent-color);}
  15%  { color: var(--main-color);}
  35%  { color: var(--main-color);}
  50%  { color: var(--accent-color);}
  65%  { color: var(--main-color);}
  85%  { color: var(--main-color);}
  100%  { color: var(--accent-color);}
}

/*===================Layout*/
#welcome-panel {
  text-align: center;
}

#welcome-panel strong{
  font-family:'lineal';
  font-weight: normal;
  font-size: 22.2px;
}

h1 {
    font-family: 'lineal', sans-serif;
    font-weight: bolder;
}

h2{
  font-family: 'pressStart2P';
  font-size: 13.12px;
  font-weight: normal;
  animation: blink 1.61s infinite;
}

#ui-canvas {
  display: block;
  height: 1350px;
  width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

canvas{
  max-width: 100%;
}

#cutter-panel{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.33px;
  margin-top: 13.12px;
}

#download{
  margin: 7.77px;
}