:root {
  --bs-primary: #2888CC;
  --bs-primary-rgb: 40, 136, 204;
}

.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #2379b5;
  --bs-btn-hover-border-color: #2379b5;
  --bs-btn-active-bg: #216ea3;
  --bs-btn-active-border-color: #216ea3;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}

@font-face {  /* 사용자 설정 폰트를 추가할 때 쓰이는 데코? */
  font-family: 'Major Mono Display'; /* required , 사용하고자하는 폰트의 별명 */
  src : url("./fonts/mmd.woff") format('woff'); /* required , 폰트의 저장 경로, url() 함수와 format() 함수를 사용하여 경로 정의 */
  font-size: normal;  /* 이 밑으로는 모두 optional , 왜 쓰이는지는 잘 모르겠음...*/
  font-weight: normal;
  font-display: swap;
  
}


.mmd {  /* .은 클래스를 정의하는 심볼. 클래스는 우선 태그보다 높은 우선순위를 갖고.. html element에서 property로 class = 해서 설정가능*/
  font-family: 'Major Mono Display';
  font-size : 2.5rem;
}




.color1 {
  color : #276A3A
}
.color2 {
  color : #BD2222
}
.color3 {
  color : #244196
}
.color4 {
  color : #83d25c
}
.color5 {
  color : #B51d9c
}
.color6 {
  color : #E2C02C
}

html {
  font-size : 62.5%;
}

body {
  font-size : 1.6rem;
}