/* Font face */

@font-face {
  font-family: 'Helvetica';
  src: url("../font/helvetica.ttf") format("truetype");
}

/* CSS variables */
:root {
  --color-bg: orange;
  --color-primary: lightgrey;
  --color-light:
  --first-size: 5vw;
  --second-size: 2vw;
}

/* CSS */

body {
  background-color: var(--color-bg);
}

main {
  background-color: var(--color-primary);
  padding: 1rem;
  display: none;
  width: 40vw;
}

#draggable {
  width: 3vw;
  height: 10vw;
  position: fixed;
  top: 40px;
  left: 40px;
  border: 1px solid black;
  border-radius: 400px;
}

#draggable {
  width: 20vw;
  height: 20vw;
  position: fixed;
  top: 40px;
  left: 40px;
  border: 1px solid black;
  border-radius: 80px;
}

.on {
  width: 20vw;
  height: 20vw;
  border-radius: 80px;
}

.on:hover {
  animation: pulse 0.5s infinite;
  background-color: rgba(222, 107, 0, 0.61);
}

@keyframes pulse {
  0% {
    background-color: rgba(222, 107, 0, 0.61);
  }
  100% {
    background-color: #FE7A00;
  }
}

article {
  margin: 20rem;
}


.terminal {
  background-color: rgba(61, 126, 111, 0,89);
  border: none;
  font-family: times;
  font-size: 14px;
  padding: 10px;
  border: 1px solid black;
}

.board {
  width: 10vw;
  height: 10vw;
  border: 1px solid black;
}