* {
  font-family: 'Levitation', 'HOLYSWEET', 'Autumn Flowers', 'a Alloy Ink', 'KBSticktoit', 'Honeybee', 'Arthur Matilde';
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Levitation';     
  src: url('./fonts/levitation-font/Levitation-7BnPB.ttf') format('truetype');
}

@font-face {
  font-family: 'HOLYSWEET';     
  src: url('./fonts/holysweet-font/Holysweet-rgn4K.otf') format('opentype');
}

@font-face {
  font-family: 'Autumn Flowers';
  src: url('./fonts/autumnflowers-font/AutumnFlowers-9YVZK.otf') format('opentype');
}

@font-face {
  font-family: 'a Alloy Ink';
  src: url('./fonts/a-alloy-ink-font/AlloyInk-lgdWw.otf') format('opentype');
}

@font-face {
  font-family: 'KBSticktoit';     
  src: url('./fonts/kbsticktoit-font/Kbsticktoit-vJ3M.ttf') format('truetype');
}
@font-face {
  font-family: 'Honeybee';     
  src: url('./fonts/honeybee-font/HoneybeePersonalUseRegular-YzBn4.ttf') format('truetype');
}

@font-face {
  font-family: 'Arthur Matilde';
  src: url('./fonts/arthur-matilde-version-font/') format('opentype');
}


body {
  background-color: #AFE1AF;
 
}

.main-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.1rem;
  margin: 0 auto;
  margin-top: 0.1rem;
  /* border: 2px solid brown; */
}

.drawing-container{
 width: 100%;
 /* height: 86vh; */
 height: 80vh;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 /* border: 2px solid yellow; */
}

.title1 {
  font-size: 20px;
  @media screen and (min-width: 768px) {
    font-size: 30px;
  }
}

.title2 {
  font-size: 15px;
  font-family: 'HOLYSWEET'; 
  @media screen and (min-width: 768px) {
    font-size: 22px;
  }
}

.drawing-box {
  width: 100%;
  height: 100%;
  background-color: #2a2a2a;
  border: 4px solid blue;
}

.result-container{
  width: 100%;
  /* height: 14vh; */
  height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
}

.display-result-box{
  /* width: 100%;
  height: 85.5%; */
  font-family: 'Arthur Matilde'; 
  font-weight: 900;
  color: red;
  /* border: 4px solid black; */
}

.circle {
  border-radius: 50%;
  position: fixed;
  /* border: 1px solid; */
}

.first-circle {
  border: 2px solid rgb(169,76,76);
  background-color: rgba(169,76,76, 0.7);
}

.second-circle {
  border: 2px solid rgb(65, 105, 225);
  background-color: rgba(65, 105, 225, 0.7);
}