GitHub. Media Query. Scroll

body: фонове зображення background.jpg, background-size: cover; шрифт "Monotype Corsiva", текст вирівняний по центру (text-align: center).
.traffic-light (корпус світлофора): ширина 150px, висота 400px, фон темно-сірий (#333), закруглені кути (border-radius: 30px), внутрішній відступ 20px, margin: 0 auto;, контейнер flex із напрямком column (display: flex; flex-direction: column), елементи вирівняні по центру та розподілені рівномірно (justify-content: space-between; align-items: center).
.light (світло): ширина 80px, висота 80px, border-radius: 50%, background-color: gray.
.text: розмір шрифту 60px, font-weight: bold, margin-top: 20px.
.stop, .wait, .go, .info: приховані за замовчуванням (display: none).
.info (інформаційний блок): ширина 50%, максимальна висота 500px, margin: 20px auto, напівпрозорий світло-сірий фон (rgba(230,230,230,0.8)), border: 2px solid #4CAF50, закруглені кути (border-radius: 15px), внутрішній відступ 15px, розмір шрифту 50px, прокрутка (overflow: auto).
.info::-webkit-scrollbar: ширина 20px.
.info::-webkit-scrollbar-thumb: фон світло-блакитний (lightblue).
.info::-webkit-scrollbar-track: фон золотий (gold).
@media (max-width: 2000px): .red {background: red;}, .stop {display: block; color: red;}.
@media (min-width: 2001px) and (max-width: 3000px): .yellow {background: yellow}, .wait {display: block; color: orange;}.
@media (min-width: 3001px): .green {background: limegreen}, .go {display: block; color: green;}, .info {display: block}.

У тілі сторінки:
Основний блок світлофора (div з класом traffic-light). Усередині розташовано три кола (div з класами light red, light yellow, light green), які відповідають червоному, жовтому та зеленому сигналам світлофора.
Під світлофором (div з класом traffic-light) розміщені три текстові блоки (div):
- перший (з класом text stop) із написом «СТОП»;
- другий (з класом text wait) із написом «ГОТУЙСЯ»;
- третій (з класом text go) із написом «РУШАЙ».