@import url('https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Thin.ttf") format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-ExtraLight.ttf") format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Light.ttf") format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Medium.ttf") format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-SemiBold.ttf") format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Bold.ttf") format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-ExtraBold.ttf") format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Heavy.ttf") format('truetype');
    font-weight: 850;
    font-style: normal;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Black.ttf") format('truetype');
    font-weight: 900;
    font-style: normal;
}
/* */
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-ThinItalic.ttf") format('truetype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-ExtraLightItalic.ttf") format('truetype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-LightItalic.ttf") format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-Italic.ttf") format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-MediumItalic.ttf") format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-SemiBoldItalic.ttf") format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-BoldItalic.ttf") format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-ExtraBoldItalic.ttf") format('truetype');
    font-weight: 800;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-HeavyItalic.ttf") format('truetype');
    font-weight: 850;
    font-style: italic;
}
@font-face {
    font-family: "FC Orbit Rounded";
    src: url("./assets/font/FC Orbit Rounded/FCOrbitRounded-BlackItalic.ttf") format('truetype');
    font-weight: 900;
    font-style: italic;
}

p {
    /* font-family: 'K2D', sans-serif; */
    /* outline: 1px solid red; */
}

/* START QUOTE COMPONENT */
.quote-component {
    display: flex;
    flex-direction: column;
    border-left-width: 2px;
    border-left-style: solid;
    font-family: 'FC Orbit Rounded';
    padding-left: 1rem;
}

.quote-component>.quote {
    font-family: 'Krub';
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    transform: translateY(40%);
    user-select: none;
}

.quote-component>.quote-text {
    font-family: 'FC Orbit Rounded';
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    padding-left: 1rem;
}

.quote-component.paa-orange {
    border-color: #D78132;
}

.paa-orange .quote,
.paa-orange .quote-text {
    color: #D78132;
}

.quote-component.paa-blue {
    border-color: #9BBDBF;
}

.paa-blue .quote,
.paa-blue .quote-text {
    color: #9BBDBF;
}

.quote-component.paa-yellow {
    border-color: #E2A83A;
}

.paa-yellow .quote,
.paa-yellow .quote-text {
    color: #E2A83A;
}

.quote-component.paa-green {
    border-color: #A4AA3F;
}

.paa-green .quote,
.paa-green .quote-text {
    color: #A4AA3F;
}

.quote-component.paa-pink {
    border-color: #E6BAB7;
}

.paa-pink .quote,
.paa-pink .quote-text {
    color: #E6BAB7;
}

/* END QUOTE COMPONENT */


/* START ORDERED LIST COMPONENT */
.ordered-list-component {
    display: flex;
    gap: 1.25rem;
}

.ordered-list-component>.ordered-list-order {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-width: 2px;
    border-style: solid;
    border-radius: 2px;
    width: 36px;
    height: 36px;
    font-family: 'K2D';
    font-size: 16px;
    font-weight: 300;
}

.ordered-list-component>.ordered-list-text {
    color: #141414;
    font-family: 'K2D';
    font-size: 16px;
    font-weight: 300;
    margin-top: 5px;
}

.paa-orange .ordered-list-order {
    color: #FFFFFF;
    background: #D78132;
    border-color: #3A3A3A;
    box-shadow: 5px 5px 0px -2px #D78132, 5px 5px 0px 0px #3A3A3A;
}

.paa-blue .ordered-list-order {
    color: #FFFFFF;
    background: #9BBDBF;
    border-color: #3A3A3A;
    box-shadow: 5px 5px 0px -2px #9BBDBF, 5px 5px 0px 0px #3A3A3A;
}

.paa-yellow .ordered-list-order {
    color: #FFFFFF;
    background: #F1C36D;
    border-color: #3A3A3A;
    box-shadow: 5px 5px 0px -2px #F1C36D, 5px 5px 0px 0px #3A3A3A;
}

.paa-green .ordered-list-order {
    color: #FFFFFF;
    background: #A4AA3F;
    border-color: #3A3A3A;
    box-shadow: 5px 5px 0px -2px #A4AA3F, 5px 5px 0px 0px #3A3A3A;
}

.paa-pink .ordered-list-order {
    color: #FFFFFF;
    background: #E6BAB7;
    border-color: #3A3A3A;
    box-shadow: 5px 5px 0px -2px #E6BAB7, 5px 5px 0px 0px #3A3A3A;
}

/* END ORDERED LIST COMPONENT */

/* START UNORDERED LIST COMPONENT */
.unordered-list-component {
    display: flex;
    gap: 0.5rem;
}

.unordered-list-component>.unordered-list-order {
    display: flex;
    flex-shrink: 0;
    margin-top: 9px;
    width: 13px;
    height: 13px;
    border: 1px solid #000000;
}

.unordered-list-component>.unordered-list-text {
    color: #141414;
    font-family: 'K2D';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.paa-orange .unordered-list-order {
    background: #D78132;
}

.paa-blue .unordered-list-order {
    background: #9BBDBF;
}

.paa-yellow .unordered-list-order {
    background: #F1C36D;
}

.paa-green .unordered-list-order {
    background: #A4AA3F;
}

.paa-pink .unordered-list-order {
    background: #E6BAB7;
}

/* END UNORDERED LIST COMPONENT */

/* START HEADING COMPONENT */
.heading-component {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    text-align: center;
}

.heading-component>.heading-text {
    font-family: 'FC Orbit Rounded';
    font-size: 18px;
    font-weight: 700;
}

.heading-component>.heading-mark {
    font-family: 'FC Orbit Rounded';
    font-size: 48px;
    font-weight: 700;
    line-height: 50%;
}

.heading-component.paa-orange {
    color: #D78132;
}

.heading-component.paa-blue {
    color: #9BBDBF;
}

.heading-component.paa-yellow {
    color: #E2A83A;
}

.heading-component.paa-green {
    color: #A4AA3F;
}

.heading-component.paa-pink {
    color: #E6BAB7;
}

/* END HEADING COMPONENT */

/* START BOX COMPONENT */
.box-component {
    display: flex;
    flex-direction: column;
    padding: 20px 20px;
    gap: 20px;
    background-color: #FCF5DC;
    border: 1px solid #000;
    border-top-right-radius: 1.875rem;
    margin: 0px 10px 10px 0px;
}

.box-component>.box-title {
    font-family: 'FC Orbit Rounded';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 145%;
    width: fit-content;
    border: 1px solid #000;
    border-radius: 0.25rem;
    padding: 8px 16px;
}

.box-component>.box-text {
    color: #141414;
    font-family: 'K2D';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}

.box-component.paa-orange {
    color: #D78132;
    box-shadow: 5px 5px 0px -1px #D78132, 5px 5px 0px 0px black, 10px 10px 0px -1px #D78132, 10px 10px 0px 0px black;
}

.paa-orange .box-title {
    color: #FFFFFF;
    background: #D78132;
    border-color: #000000;
}

.box-component.paa-blue {
    color: #9BBDBF;
    box-shadow: 5px 5px 0px -1px #9BBDBF, 5px 5px 0px 0px black, 10px 10px 0px -1px #9BBDBF, 10px 10px 0px 0px black;
}

.paa-blue .box-title {
    color: #FFFFFF;
    background: #9BBDBF;
    border-color: #000000;
}

.box-component.paa-yellow {
    color: #F1C36D;
    box-shadow: 5px 5px 0px -1px #F1C36D, 5px 5px 0px 0px black, 10px 10px 0px -1px #F1C36D, 10px 10px 0px 0px black;
}

.paa-yellow .box-title {
    color: #FFFFFF;
    background: #F1C36D;
    border-color: #000000;
}

.box-component.paa-green {
    color: #A4AA3F;
    box-shadow: 5px 5px 0px -1px #A4AA3F, 5px 5px 0px 0px black, 10px 10px 0px -1px #A4AA3F, 10px 10px 0px 0px black;
}

.paa-green .box-title {
    color: #FFFFFF;
    background: #A4AA3F;
    border-color: #000000;
}

.box-component.paa-pink {
    color: #E6BAB7;
    box-shadow: 5px 5px 0px -1px #E6BAB7, 5px 5px 0px 0px black, 10px 10px 0px -1px #E6BAB7, 10px 10px 0px 0px black;
}

.paa-pink .box-title {
    color: #FFFFFF;
    background: #E6BAB7;
    border-color: #000000;
}

/* END BOX COMPONENT */

/* START REFERENCE COMPONENT */
.reference-component {
    display: flex;
    flex-wrap: nowrap;
    line-height: 145%;
}
.reference-component>.reference-head {
    display: flex;
    flex-wrap: nowrap;
    font-family: 'FC Orbit Rounded';
    font-size: 18px;
    font-weight: 700;
    line-height: 145%;
}
.reference-component>.reference-colon {
    display: flex;
    flex-wrap: nowrap;
    font-family: 'FC Orbit Rounded';
    font-size: 18px;
    font-weight: 700;
    line-height: 145%;
}
.reference-component>.reference-text {
    padding-left: 14px;
    flex-wrap: nowrap;
    font-family: 'K2D';
    font-size: 16px;
    font-weight: 300;
    word-break: break-word;
}

.reference-component>.reference-text>a:hover {
    text-decoration: underline;
}

/* END REFERENCE COMPONENT */
p>a:hover {
    text-decoration: underline;
}

@media (min-width: 768px) {
    /* .box-component {
        display: flex;
        flex-direction: column;
        padding: 20px 20px;
        gap: 20px;
        background-color: #FAFBD3;
        border: 1px solid #000;
        border-top-right-radius: 1.875rem;
        margin: 0px 10px 10px 0px;
    } */
    
    .box-component>.box-title {
        font-family: 'FC Orbit Rounded';
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 145%;
        width: fit-content;
        border: 1px solid #000;
        border-radius: 0.25rem;
        padding: 8px 16px;
    }
    
    .box-component>.box-text {
        color: #141414;
        font-family: 'K2D';
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 170%;
    }
}

@media (min-width: 992px) {

}

.head-component {
    background-color: #F1C36D;
    border: 2px solid black;
    padding: 8px 16px;
    width: fit-content;
    text-align: center;
    font-weight: 700;
}

.calendar-icon {
    display: flex;
    position: relative;
    flex-direction: column;
    border-radius: 1rem;
    width: 6rem;
    height: 6rem;
    font-family: 'K2D', sans-serif;
}

.calendar-icon>.calendar-month {
    display: flex;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    width: 100%;
    border: 3px solid #141414;
    border-bottom: 1.5px;
    background: #FEB808;
    height: 1/3;
    font-weight: 700;
}

.calendar-icon>.calendar-day {
    display: flex;
    padding: 0.5rem;
    justify-content: center;
    align-items: center;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    width: 100%;
    font-size: 1.875rem;
    line-height: 2.25rem;
    border: 3px solid #141414;
    background: #FDF6DC;
    height: 2/3;
    font-weight: 700;
}

.calendar-icon>.calendar-line {
    display: flex;
    position: absolute;
    justify-content: space-around;
    width: 100%;
}

.calendar-icon>.calendar-line>.line {
    top: 50%;
    border-radius: 0.25rem;
    background-color: #000000;
    width: 3px;
    height: 14px;
    transform: translateY(-40%);
}