@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&family=Mountains+of+Christmas:wght@400;700&family=Tiny5&display=swap');

@import url("./buttons.css");
@import url("./fonts.css");



:root {
    --color-primary: #030000;
    --color-border-top: #ec0000;
    --color-border-bottom: #040286;
    --color-border-left: #33db00;
    --color-border-right: #c0ce05;
}

p {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

div {
    border-bottom: solid 1px var(--color-border-left);
    border-top: solid 1px var(--color-border-left);
    border-left: solid 1px var(--color-border-left);
    border-right: solid 1px var(--color-border-left);
}



body {
    font-size: 20px;
    font-weight: normal;
    /* font-family:"Henny Penny", system-ui; */
}


.body__area {
    background: linear-gradient(white, rgba(0, 0, 252, 0.733), rgba(238, 36, 36, 0.774))
}

.area__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.lessons {
    display: inherit;
    flex-direction: row;
    gap: 40px;
    border-top: dashed black;
    /* border-bottom: dashed black; */
}


.lessons:last-child {
    border-bottom: dashed black;
}

.lessons p:hover {
    text-decoration: underline;
}

.text__name {
    border: solid 2px black;
    font-family: "Henny Penny", system-ui;
    font-weight: 400;
    font-style: normal;
}

.text__style {
    border: 2px solid black;
    font-family: "Mountains of Christmas", serif;
    font-weight: 700;
    font-style: normal;
}

.text {
    font-family: "Tiny5", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
}