@import url(fonts.css);

.example {
    /* вот обычно это очень используется */
    color: white;            /* цвет текста (в основном) */
    background-color: black; /* цвет обоев */
    margin: 40px;            /* отступ снаружи элемента */
    padding: 20px;           /* отступ внутри элемента */

    /* немного со шрифтами */
    font-family: 'Noto Sans'; /* название шрифта */
    font-size: 14px;          /* размер шрифта */
    font-weight: normal;      /* жирность (вес) шрифта */

    /* продвинутое: рамки */
    border: 2px solid gray; /* рамка <размер> <тип> <цвет> */
    border-radius: 4px;      /* скругление рамки */

    /*
        также есть свойства с направлениями, например:
        margin-top, margin-bottom, margin-left, margin-right
        из вышеперечисленных есть:
        margin, padding, border
    */
}

body {
    background-color: #111;
    color: #eee;
    margin: 80px;
    font-family: 'JetBrains Mono';
}

a {
    color: cornflowerblue;
}

span {
    white-space: pre-line;
}

div {
    margin-bottom: 40px;
}

.second-div {
    border: 2px solid #444;
    padding: 40px;
    border-radius: 4px;
}

.another-class {
    font-size: 24px;
    font-weight: bold;
}

.cool-class {
    color: aquamarine;
}