custom.scss

$crimson : #DC143C;

@import "../../node_modules/bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$custom-colors: (
    "crimson": $crimson
);
    
$theme-colors: map-merge($theme-colors, $custom-colors);

@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-icons/font/bootstrap-icons'; 

@font-face {
    font-family: "Plex-Bold";
    src: url("../fonts/IBMPlexSansKR-Bold.ttf");
}

@font-face {
    font-family: "Plex-SemiBold";
    src: url("../fonts/IBMPlexSansKR-SemiBold.ttf");
}

@font-face {
    font-family: "Plex-Medi";
    src: url("../fonts/IBMPlexSansKR-Medium.ttf");
}

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

@font-face {
    font-family: "Plex-Light";
    src: url("../fonts/IBMPlexSansKR-Light.ttf");
}

@font-face {
    font-family: "Plex-ExtraLight";
    src: url("../fonts/IBMPlexSansKR-ExtraLight.ttf");
}

@font-face {
    font-family: "Plex-Text";
    src: url("../fonts/IBMPlexSansKR-Text.ttf");
}

h1, h2, h3, h4, h5, h6, label, select {
    font-family: "Plex-Bold";
}

input, label, textarea {
    font-family: "Plex-Text";
}

button {
    font-family: "Plex-Reg";
}

@include media-breakpoint-up(sm) {
    #box {
        width: 400px;
    }
}