/* глобальна змінна */
  :root {
    --brand-color: #3f51b5;
  }
  /* локальна змінна */
  .alert {
    --alert-text-color: black;
  }

  .alert {
    color: var(--alert-text-color);
  }

  .section-title {
    color: var(--brand-color, tomato);
    color: var(--brand-color);
  }

/* тут я накидав різні правили з коду домошніх завдань */
  .all-rules-box {
    display: flex;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 24px;
  justify-content: space-between;
    background-color: greenyellow;
  }


  .all-rules {
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.33;
    letter-spacing: 0.03em;
    color: #2e2f42;
    text-transform: uppercase;
    transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }

  .current-page::after {
    content: "";
    position: absolute;
    /* display: block; */
    display: inline-block;
    top: 44px;
    left: 0;
    width: 100%;
    height: 4px;
    
    background-color: var(--secondery-color, black);
    border-radius: 2px;
  }


  .text {
    border: 2px dashed #2196F3;
    padding: 15px;
    margin: 20px;
  }
  /* тут я накидав кінець/ */

 

/* Загальні стилі для всіх типів повідомлень */
  /* =- підключення стороннього шрифта */
  /* @font-face {
    font-family: 'enyname';
    src: url();
  } */

  /* body { */
    /* ==Підключення шрифтів== */
    /* font-family: sans-serif; */
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
    /* ==Я скачав з гугла== */
    /* font-family: "Rubik Wet Paint", system-ui;
    font-weight: 400; */
    /* ==/Я скачав з гугла== */

    /* text-align: center; */
    /* line-height: 1.5; */
    /* background-color: #b9f3b7;  */
  /* } */
  
  /* композиція класів */
  .alert {
    font-size: 16px;
    font-weight: 500;
  }
  
  .success {
    color: green;
  }
  
  .warning {
    color: orange;
  }
  
  .error {
    color: red;
  }
  
  /* Селектор ідентифікатора */
  #title {
    font-size: 20px;
    font-weight: 700;
    color: orange;
  }

  /* Селектор нащадка */
  .social-links a {
    color: blue;
    text-decoration: none;
  }


  /* Селектор дитини */
  .menu > li {
    border: 1px solid tomato;
  }

  /* Селектор атрибута */
  a[title] {
    color: teal;
  }
  
  a[href="https://www.youtube.com"]
  {
    font-size: 20px;
    font-weight: 500;
    color: tomato;
  }


  /* Псевдоклас :hover */
  .link {
    color: teal;
  }
  
  .link:hover {
    color: tomato;
  }
  /* Псевдоклас :hover - 2 */

  .social-links-2 .link-2 {
    color: teal;
  }
  
  .social-links-2 .link-2:hover {
    color: tomato;
  }

  /* Псевдоклас :focus + hover */
  .social-links-3 .link-3 {
    color: green;
  }
  
  .social-links-3 .link-3:hover,
  .social-links-3 .link-3:focus {
    color: yellow;
  }

  /* Псевдоклас :active */
  .social-links-4 .link-4 {
    color: green;
  }

  .social-links-4 .link-4:hover,
  .social-links-4 .link-4:focus {
    color: orange;
  }

  .social-links-4 .link-4:active {
    font-size: 16px;
    color: red;
  }

  /* Псевдоклас :visited */
  .social-links-5 .link-5 {
    color: teal;
  }

  .social-links-5 .link-5:hover,
  .social-links-5 .link-5:focus {
    color: orange;
  }

  .social-links-5 .link-5:active {
    color: red;
  }

  .social-links-5 .link-5:visited {
    color: brown;
  }


  /* Ховер і таблиці */
  .schedule-body > tr > td:hover {
    background-color: tomato;
    color: white;
  }

  .schedule {
    border-collapse: collapse;
  }

  .schedule th,
  .schedule td {
    padding: 8px;
    border: 1px solid #212121;
  }


  /* Властивість cursor */
  .auto {
    cursor: auto;
  }
  .default {
    cursor: default;
  }
  .none {
    cursor: none;
  }
  .context-menu {
    cursor: context-menu;
  }
  .help {
    cursor: help;
  }
  .pointer {
    cursor: pointer;
  }
  .progress {
    cursor: progress;
  }
  .wait {
    cursor: wait;
  }
  .cell {
    cursor: cell;
  }
  .crosshair {
    cursor: crosshair;
  }
  .text {
    cursor: text;
  }
  .vertical-text {
    cursor: vertical-text;
  }
  .alias {
    cursor: alias;
  }
  .copy {
    cursor: copy;
  }
  .move {
    cursor: move;
  }
  .no-drop {
    cursor: no-drop;
  }
  .not-allowed {
    cursor: not-allowed;
  }
  .all-scroll {
    cursor: all-scroll;
  }
  .col-resize {
    cursor: col-resize;
  }
  .row-resize {
    cursor: row-resize;
  }
  .n-resize {
    cursor: n-resize;
  }
  .e-resize {
    cursor: e-resize;
  }
  .s-resize {
    cursor: s-resize;
  }
  .w-resize {
    cursor: w-resize;
  }
  .ns-resize {
    cursor: ns-resize;
  }
  .ew-resize {
    cursor: ew-resize;
  }
  .ne-resize {
    cursor: ne-resize;
  }
  .nw-resize {
    cursor: nw-resize;
  }
  .se-resize {
    cursor: se-resize;
  }
  .sw-resize {
    cursor: sw-resize;
  }
  .nesw-resize {
    cursor: nesw-resize;
  }
  .nwse-resize {
    cursor: nwse-resize;
  }

  .cursors {
    display: flex;
    flex-wrap: wrap;
    width: 800px;
  }

  .cursors > div {
    flex: 80px;
    padding: 6px 2px;
    white-space: nowrap;
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 0 5px 5px 0;
    font-size: 12px;
  }

  .cursors > div:hover {
    background: #eee;
  }

  /* code {
    display: inline-block;
    background-color: #eee;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 32px;
  } */




  /* === COLOR === */
  .div-cont {
    width: 480px;
    /* height: 200px; */
    background-color: #eee;
    border: 2px solid green;
    text-align: center;
    font-size: 18px;
  }

/* Псевдоелемент */

  pre {
    font-family: 'Arial', 'Helvetica', sans-serif;
    color: #2a2a2a;
    font-size: 16px;
  }

  pre::first-letter {
    font-family: 'Tahoma', serif;
    font-size: 32px;
    color: #f44336;
  }

  /* h1::first-letter {
    font-family: 'Tahoma', serif;
    font-size: 32px;
    color: #f44336;
  } */

  /* Let's add text selection styles for each paragraph of the poem. */
  pre::selection {
    color: #ffffff;
    background-color: #3f51b5;
  }