/* Google Fonts API Link */
@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Delicious Handrawn', cursive;
}
:root{
  --primary-background-color: #847577;
  --secondary-background-color: #a6a2a2;
  --ternary-color: #a6a2a2;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-red: #f00f00;
}
button{
  padding: 0.5rem;
  margin: 0 1rem;
  background-color: var(--ternary-color);
  border: none;
  color: var(--color-white);
  font-size: 20px;
}
button:hover{
  transform: scale(1.1);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
h1{
  padding: 2rem;
  font-size: 34px;
  color: var(--color-white);
}
h2{
  padding: 1rem;
  font-size: 24px;
  color: var(--color-white);
}
a{
  text-decoration: none;
  color: var(--color-white);
}
#container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-background-color);
  height: 100vh;
  width: 100vw;
}
.etch-a-sketch{
  display: flex;
  gap: 2rem;

}
.options-container{
  background-color: var(--color-red);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 240px;
  max-width: 360px;
}
.sketchpad{
  display: flex;
  background-color: var(--color-red);
  /* width: 960px; */
  /* height: auto; */
  padding: 2rem;
}
#sketchpad-screen{
  background-color: var(--color-white);
  height: 720px;
  width: 720px;
  justify-self: center;
  margin: auto;
}
/* Square styles are done in JS file */
.copyright-text{
  padding: 1rem;
  font-size: 18px;
  color: var(--color-white);
}