@font-face {
  font-family: "Akronim-Regular";
  src: url("./fonts/Akronim-Regular.ttf");
}

@font-face {
  font-family: "Arvo-Regular";
  src: url("./fonts/Arvo-Regular.ttf");
}

@font-face {
  font-family: "PTSansNarrow-Regular";
  src: url("./fonts/PTSansNarrow-Regular.ttf");
}

@font-face {
  font-family: "Ephesis-Regular";
  src: url("./fonts/Ephesis-Regular.ttf");
}

@font-face {
  font-family: "DancingScript-Regular";
  src: url("./fonts/static/DancingScript-Regular.ttf");
}

@font-face {
  font-family: "StickNoBills-Regular";
  src: url("./fonts/static/StickNoBills-Regular.ttf");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Arvo-Regular";
  background-color: rgb(51, 51, 51);
  color: white;
}

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

.text-center {
  text-align: center;
}

/* Title */
.title {
  text-align: center;
  font-size: 50px;
}

.button {
  cursor: pointer;
  display: block;
  color: white;
  font-size: 19px;
  padding: 0.5rem 2rem;
  margin: 0.2rem 1rem 0.5rem 1rem;
  background-color: rgb(0, 100, 200);
  border-radius: 8px;
  border: none;
}

.button:hover {
  background-color: rgb(0, 41, 82);
}

.hidden {
  display: none;
}

#controls {
  border: white 2px solid;
  border-radius: 14px;
  width: 50%;
  margin: auto;
  padding: 50px;
}

#downloadName:focus {
  border: none;
  border-radius: 2pt;
  box-shadow: 0 0 0 2pt rgb(0, 100, 200);
  outline: none;
}


#canvas-div{
  position: relative;
  width: 100%;
  left:50%;
  transform: translateX(-50%);
}

#text-box{
  width: 70%;
  height: 80%;
  border: rgb(200, 0,0) 2px solid;
  position: absolute;
  left:0;
  right:0;
  margin:auto;
}

#canvas {
  width: 90%;
  max-width: 800px;
  height:100%;
  /* Display */
  left: 0;
  right: 0;
  /* position: absolute; */
  margin: 0.2rem auto;
  display: block;
  /* Border */
  border: rgb(0, 100, 200) 2px solid;
  border-radius: 4px;
}


/* Spans */
.blue {
  color: rgb(0, 100, 200);
}

/* Image */
#overlay {
  display: none;
}

a {
  text-decoration: none;
  color: rgb(200, 200, 200);
}

a:hover {
  color: white;
}

footer {
  padding: 1rem;
}

/* Select */

select {
  margin: 0.1rem 0.5rem;
}

@media only screen and (max-width: 600px) {
  .center {
    flex-direction: column;
    justify-content: flex-start;
  }
}