diff --git a/index.html b/index.html
new file mode 100644
index 000000000..82cf2804d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+ momentum
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/owfont-regular.css b/owfont-regular.css
new file mode 100644
index 000000000..e09d10537
--- /dev/null
+++ b/owfont-regular.css
@@ -0,0 +1,558 @@
+/*!
+ * owfont-regular 1.0.0 by Deniz Fuchidzhiev - http://websygen.com
+ * License - font: SIL OFL 1.1, css: MIT License
+ */
+/* FONT PATH
+ * -------------------------- */
+ @font-face {
+ font-family: 'owfont';
+ src: url('../assets/fonts/owfont-regular.eot?v=1.0.0');
+ src: url('../assets/fonts/owfont-regular.eot?#iefix&v=1.0.0') format('embedded-opentype'),
+ url('../assets/fonts/owfont-regular.woff') format('woff'),
+ url('../assets/fonts/owfont-regular.ttf') format('truetype'),
+ url('../assets/fonts/owfont-regular.svg#owf-regular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ }
+ .owf {
+ display: inline-block;
+ font: normal normal normal 14px/1 owfont;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ transform: translate(0, 0);
+ }
+ /* makes the font 33% larger relative to the icon container */
+ .owf-lg {
+ font-size: 1.33333333em;
+ line-height: 0.75em;
+ vertical-align: -15%;
+ }
+ .owf-2x {
+ font-size: 2em;
+ }
+ .owf-3x {
+ font-size: 3em;
+ }
+ .owf-4x {
+ font-size: 4em;
+ }
+ .owf-5x {
+ font-size: 5em;
+ }
+ .owf-fw {
+ width: 1.28571429em;
+ text-align: center;
+ }
+ .owf-ul {
+ padding-left: 0;
+ margin-left: 2.14285714em;
+ list-style-type: none;
+ }
+ .owf-ul > li {
+ position: relative;
+ }
+ .owf-li {
+ position: absolute;
+ left: -2.14285714em;
+ width: 2.14285714em;
+ top: 0.14285714em;
+ text-align: center;
+ }
+ .owf-li.owf-lg {
+ left: -1.85714286em;
+ }
+ .owf-border {
+ padding: .2em .25em .15em;
+ border: solid 0.08em #eeeeee;
+ border-radius: .1em;
+ }
+ .owf-pull-right {
+ float: right;
+ }
+ .owf-pull-left {
+ float: left;
+ }
+ .owf.owf-pull-left {
+ margin-right: .3em;
+ }
+ .owf.owf-pull-right {
+ margin-left: .3em;
+ }
+
+ /* owfont uses the Unicode Private Use Area (PUA) to ensure screen
+ readers do not read off random characters that represent icons */
+
+ /* Weather Condition Codes */
+
+ /* Thunderstorm - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* thunderstorm with light rain */
+ .owf-200:before,
+ .owf-200-d:before,
+ .owf-200-n:before {
+ content: "\EB28";
+ }
+ /* thunderstorm with rain */
+ .owf-201:before,
+ .owf-201-d:before,
+ .owf-201-n:before {
+ content: "\EB29";
+ }
+ /* thunderstorm with heavy rain */
+ .owf-202:before,
+ .owf-202-d:before,
+ .owf-202-n:before {
+ content: "\EB2A";
+ }
+ /* light thunderstorm */
+ .owf-210:before,
+ .owf-210-d:before,
+ .owf-210-n:before {
+ content: "\EB32";
+ }
+ /* thunderstorm */
+ .owf-211:before,
+ .owf-211-d:before,
+ .owf-211-n:before {
+ content: "\EB33";
+ }
+ /* heavy thunderstorm */
+ .owf-212:before,
+ .owf-212-d:before,
+ .owf-212-n:before {
+ content: "\EB34";
+ }
+ /* ragged thunderstorm */
+ .owf-221:before,
+ .owf-221-d:before,
+ .owf-221-n:before {
+ content: "\EB3D";
+ }
+ /* thunderstorm with light drizzle */
+ .owf-230:before,
+ .owf-230-d:before,
+ .owf-230-n:before {
+ content: "\EB46";
+ }
+ /* thunderstorm with drizzle */
+ .owf-231:before,
+ .owf-231-d:before,
+ .owf-231-n:before {
+ content: "\EB47";
+ }
+ /* thunderstorm with heavy drizzle */
+ .owf-232:before,
+ .owf-232-d:before,
+ .owf-232-n:before {
+ content: "\EB48";
+ }
+
+ /* Drizzle - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* light intensity drizzle */
+ .owf-300:before,
+ .owf-300-d:before,
+ .owf-300-n:before {
+ content: "\EB8C";
+ }
+ /* drizzle */
+ .owf-301:before,
+ .owf-301-d:before,
+ .owf-301-n:before {
+ content: "\EB8D";
+ }
+ /* heavy intensity drizzle */
+ .owf-302:before,
+ .owf-302-d:before,
+ .owf-302-n:before {
+ content: "\EB8E";
+ }
+ /* light intensity drizzle rain */
+ .owf-310:before,
+ .owf-310-d:before,
+ .owf-310-n:before {
+ content: "\EB96";
+ }
+ /* drizzle rain */
+ .owf-311:before,
+ .owf-311-d:before,
+ .owf-311-n:before {
+ content: "\EB97";
+ }
+ /* heavy intensity drizzle rain */
+ .owf-312:before,
+ .owf-312-d:before,
+ .owf-312-n:before {
+ content: "\EB98";
+ }
+ /* shower rain and drizzle */
+ .owf-313:before,
+ .owf-313-d:before,
+ .owf-313-n:before {
+ content: "\EB99";
+ }
+ /* heavy shower rain and drizzle*/
+ .owf-314:before,
+ .owf-314-d:before,
+ .owf-314-n:before {
+ content: "\EB9A";
+ }
+ /* shower drizzle */
+ .owf-321:before,
+ .owf-321-d:before,
+ .owf-321-n:before {
+ content: "\EBA1";
+ }
+
+ /* Rain - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* light rain */
+ .owf-500:before,
+ .owf-500-d:before,
+ .owf-500-n:before {
+ content: "\EC54";
+ }
+ /* moderate rain */
+ .owf-501:before,
+ .owf-501-d:before,
+ .owf-501-n:before {
+ content: "\EC55";
+ }
+ /* heavy intensity rain */
+ .owf-502:before,
+ .owf-502-d:before,
+ .owf-502-n:before {
+ content: "\EC56";
+ }
+ /* very heavy rain */
+ .owf-503:before,
+ .owf-503-d:before,
+ .owf-503-n:before {
+ content: "\EC57";
+ }
+ /* extreme rain */
+ .owf-504:before,
+ .owf-504-d:before,
+ .owf-504-n:before {
+ content: "\EC58";
+ }
+ /* freezing rain */
+ .owf-511:before,
+ .owf-511-d:before,
+ .owf-511-n:before {
+ content: "\EC5F";
+ }
+ /* light intensity shower rain */
+ .owf-520:before,
+ .owf-520-d:before,
+ .owf-520-n:before {
+ content: "\EC68";
+ }
+ /* shower rain */
+ .owf-521:before,
+ .owf-521-d:before,
+ .owf-521-n:before {
+ content: "\EC69";
+ }
+ /* heavy intensity shower rain */
+ .owf-522:before,
+ .owf-522-d:before,
+ .owf-522-n:before {
+ content: "\EC6A";
+ }
+ /* ragged shower rain */
+ .owf-531:before,
+ .owf-531-d:before,
+ .owf-531-n:before {
+ content: "\EC73";
+ }
+
+ /* Snow - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* light snow */
+ .owf-600:before,
+ .owf-600-d:before,
+ .owf-600-n:before {
+ content: "\ECB8";
+ }
+ /* snow */
+ .owf-601:before,
+ .owf-601-d:before,
+ .owf-601-n:before {
+ content: "\ECB9";
+ }
+ /* heavy snow */
+ .owf-602:before,
+ .owf-602-d:before,
+ .owf-602-n:before {
+ content: "\ECBA";
+ }
+ /* sleet */
+ .owf-611:before,
+ .owf-611-d:before,
+ .owf-611-n:before {
+ content: "\ECC3";
+ }
+ /* shower sleet */
+ .owf-612:before,
+ .owf-612-d:before,
+ .owf-612-n:before {
+ content: "\ECC4";
+ }
+ /* light rain and snow */
+ .owf-615:before,
+ .owf-615-d:before,
+ .owf-615-n:before {
+ content: "\ECC7";
+ }
+ /* rain and snow */
+ .owf-616:before,
+ .owf-616-d:before,
+ .owf-616-n:before {
+ content: "\ECC8";
+ }
+ /* light shower snow */
+ .owf-620:before,
+ .owf-620-d:before,
+ .owf-620-n:before {
+ content: "\ECCC";
+ }
+ /* shower snow */
+ .owf-621:before,
+ .owf-621-d:before,
+ .owf-621-n:before {
+ content: "\ECCD";
+ }
+ /* heavy shower snow */
+ .owf-622:before,
+ .owf-622-d:before,
+ .owf-622-n:before {
+ content: "\ECCE";
+ }
+
+ /* Atmosphere - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* mist */
+ .owf-701:before,
+ .owf-701-d:before,
+ .owf-701-n:before {
+ content: "\ED1D";
+ }
+ /* smoke */
+ .owf-711:before,
+ .owf-711-d:before,
+ .owf-711-n:before {
+ content: "\ED27";
+ }
+ /* haze */
+ .owf-721:before,
+ .owf-721-d:before,
+ .owf-721-n:before {
+ content: "\ED31";
+ }
+ /* Sand/Dust Whirls */
+ .owf-731:before,
+ .owf-731-d:before,
+ .owf-731-n:before {
+ content: "\ED3B";
+ }
+ /* Fog */
+ .owf-741:before,
+ .owf-741-d:before,
+ .owf-741-n:before {
+ content: "\ED45";
+ }
+ /* sand */
+ .owf-751:before,
+ .owf-751-d:before,
+ .owf-751-n:before {
+ content: "\ED4F";
+ }
+ /* dust */
+ .owf-761:before,
+ .owf-761-d:before,
+ .owf-761-n:before {
+ content: "\ED59";
+ }
+ /* VOLCANIC ASH */
+ .owf-762:before,
+ .owf-762-d:before,
+ .owf-762-n:before {
+ content: "\ED5A";
+ }
+ /* SQUALLS */
+ .owf-771:before,
+ .owf-771-d:before,
+ .owf-771-n:before {
+ content: "\ED63";
+ }
+ /* TORNADO */
+ .owf-781:before,
+ .owf-781-d:before,
+ .owf-781-n:before {
+ content: "\ED6D";
+ }
+
+ /* Clouds - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* sky is clear */ /* Calm */
+ .owf-800:before,
+ .owf-800-d:before,
+ .owf-951:before,
+ .owf-951-d:before {
+ content: "\ED80";
+ }
+ .owf-800-n:before,
+ .owf-951-n:before {
+ content: "\F168";
+ }
+ /* few clouds */
+ .owf-801:before,
+ .owf-801-d:before {
+ content: "\ED81";
+ }
+ .owf-801-n:before {
+ content: "\F169";
+ }
+ /* scattered clouds */
+ .owf-802:before,
+ .owf-802-d:before {
+ content: "\ED82";
+ }
+ .owf-802-n:before {
+ content: "\F16A";
+ }
+ /* broken clouds */
+ .owf-803:before,
+ .owf-803-d:before,
+ .owf-803-n:before {
+ content: "\ED83";
+ }
+ /* overcast clouds */
+ .owf-804:before,
+ .owf-804-d:before,
+ .owf-804-n:before {
+ content: "\ED84";
+ }
+
+ /* Extreme - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* tornado */
+ .owf-900:before,
+ .owf-900-d:before,
+ .owf-900-n:before {
+ content: "\EDE4";
+ }
+ /* tropical storm */
+ .owf-901:before,
+ .owf-901-d:before,
+ .owf-901-n:before {
+ content: "\EDE5";
+ }
+ /* hurricane */
+ .owf-902:before,
+ .owf-902-d:before,
+ .owf-902-n:before {
+ content: "\EDE6";
+ }
+ /* cold */
+ .owf-903:before,
+ .owf-903-d:before,
+ .owf-903-n:before {
+ content: "\EDE7";
+ }
+ /* hot */
+ .owf-904:before,
+ .owf-904-d:before,
+ .owf-904-n:before {
+ content: "\EDE8";
+ }
+ /* windy */
+ .owf-905:before,
+ .owf-905-d:before,
+ .owf-905-n:before {
+ content: "\EDE9";
+ }
+ /* hail */
+ .owf-906:before,
+ .owf-906-d:before,
+ .owf-906-n:before {
+ content: "\EDEA";
+ }
+
+ /* Additional - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+ /* Setting */
+ .owf-950:before,
+ .owf-950-d:before,
+ .owf-950-n:before {
+ content: "\EE16";
+ }
+ /* Light breeze */
+ .owf-952:before,
+ .owf-952-d:before,
+ .owf-952-n:before {
+ content: "\EE18";
+ }
+ /* Gentle Breeze */
+ .owf-953:before,
+ .owf-953-d:before,
+ .owf-953-n:before {
+ content: "\EE19";
+ }
+ /* Moderate breeze */
+ .owf-954:before,
+ .owf-954-d:before,
+ .owf-954-n:before {
+ content: "\EE1A";
+ }
+ /* Fresh Breeze */
+ .owf-955:before,
+ .owf-955-d:before,
+ .owf-955-n:before {
+ content: "\EE1B";
+ }
+ /* Strong Breeze */
+ .owf-956:before,
+ .owf-956-d:before,
+ .owf-956-n:before {
+ content: "\EE1C";
+ }
+ /* High wind, near gale */
+ .owf-957:before,
+ .owf-957-d:before,
+ .owf-957-n:before {
+ content: "\EE1D";
+ }
+ /* Gale */
+ .owf-958:before,
+ .owf-958-d:before,
+ .owf-958-n:before {
+ content: "\EE1E";
+ }
+ /* Severe Gale */
+ .owf-959:before,
+ .owf-959-d:before,
+ .owf-959-n:before {
+ content: "\EE1F";
+ }
+ /* Storm */
+ .owf-960:before,
+ .owf-960-d:before,
+ .owf-960-n:before {
+ content: "\EE20";
+ }
+ /* Violent Storm */
+ .owf-961:before,
+ .owf-961-d:before,
+ .owf-961-n:before {
+ content: "\EE21";
+ }
+ /* Hurricane */
+ .owf-962:before,
+ .owf-962-d:before,
+ .owf-962-n:before {
+ content: "\EE22";
+ }
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 000000000..7358c4c52
--- /dev/null
+++ b/script.js
@@ -0,0 +1,133 @@
+const time = document.querySelector('.time');
+const todayDate = document.querySelector('.date');
+
+const date = new Date();
+
+
+function showTime() {
+ const currentTime = date.toLocaleTimeString();
+ const options={weekday:'long', month: 'long', day: 'numeric'};
+ const currentDate = date.toLocaleDateString('en-En', options);
+ time.textContent = currentTime;
+todayDate.textContent = currentDate;
+setTimeout (showTime, 1000);
+ }
+ showTime();
+
+ const greeting = document.querySelector('.greeting');
+ const partOfDay = getTimeOfDay()
+ function getTimeOfDay(){
+ let hours = date.getHours();
+ if (hours == 1) {
+ return "night";
+ }
+ else if (hours == 0) {
+ return "night";
+ }
+ else if (hours == 2) {
+ return "night";
+ }
+ else if (hours == 3) {
+ return "night";
+ }
+ else if (hours == 4) {
+ return "night";
+ }
+ else if (hours == 5) {
+ return "night";
+ }
+ else if (hours == 6) {
+ return "morning";
+ }
+ else if (hours == 7) {
+ return "morning";
+ }
+ else if (hours == 8) {
+ return "morning";
+ }
+ else if (hours == 9) {
+ return "morning";
+ }
+ else if (hours == 10) {
+ return "morning";
+ }
+ else if (hours == 11) {
+ return "morning";
+ }
+ else if (hours == 12) {
+ return "afternoon";
+ }
+ else if ( hours == 13) {
+ return "afternoon";
+ }
+ else if ( hours == 14) {
+ return "afternoon";
+ }
+ else if ( hours == 15) {
+ return "afternoon";
+ }
+ else if ( hours == 16) {
+ return "afternoon";
+ }
+ else if ( hours == 17) {
+ return "afternoon";
+ }
+ else if ( hours == 18) {
+ return "evening";
+ }
+ else if ( hours == 19) {
+ return "evening";
+ }
+ else if ( hours == 20) {
+ return "evening";
+ }
+ else if ( hours == 21) {
+ return "evening";
+ }
+ else if ( hours == 23) {
+ return "evening";
+ }
+ else {
+ return "evening";
+ }
+ }
+ greeting.textContent = `Good ${partOfDay}`;
+
+ function setLocalStorage() {
+ localStorage.setItem('name', name.value);
+}
+window.addEventListener('beforeunload', setLocalStorage);
+
+function getLocalStorage() {
+ if(localStorage.getItem('name')) {
+ name.value = localStorage.getItem('name');
+ }
+}
+window.addEventListener('load', getLocalStorage);
+
+function getRandomNum(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+const randomPictureNum = getRandomNum(0, 20);
+console.log(randomPictureNum);
+
+const picNum = randomPictureNum.toString().padStart(2,0);
+console.log(picNum);
+
+
+const body = document.querySelector('.body');
+body.style.backgroundImage ="url('https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/assets/images/evening/15.jpg')";
+
+function setBg(){
+const img = new Image();
+img.src =`https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/assets/images/${partOfDay}/${picNum}.jpg`;
+img.onload = () => {
+ document.body.style.backgroundImage =`url(${img.src})`;
+ console.log(img.src.toString());
+};
+}
+
+ setBg()
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 000000000..b6c71f9eb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,288 @@
+/* @font-face {
+ font-family: 'Arial-MT';
+ src: url("../assets/fonts/Arial-MT.woff"); /* Путь к файлу со шрифтом */
+ /* }*/
+
+ * {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ min-width: 480px;
+ min-height: 100vh;
+ font-family: 'Arial', sans-serif;
+ font-size: 16px;
+ color: #fff;
+ text-align: center;
+ /*background: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/img/bg.jpg") center/cover, rgba(0, 0, 0, 0.5);*/
+ background-image: none;
+ /*background-blend-mode: multiply;*/
+ /**transition: background-image 1s ease-in-out;*/
+ }
+
+ .header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ width: 100%;
+ height: 30vh;
+ min-height: 220px;
+ padding: 20px;
+ }
+
+ .player-controls {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 120px;
+ margin-bottom: 28px;
+ }
+
+ .play-list {
+ text-align: left;
+ }
+
+ .play-item {
+ position: relative;
+ padding: 5px;
+ padding-left: 20px;
+ list-style: none;
+ opacity: .8;
+ cursor: pointer;
+ transition: .3s;
+ }
+
+ .play-item:hover {
+ opacity: 1;
+ }
+
+ .play-item::before {
+ content: "\2713";
+ position: absolute;
+ left: 0;
+ top: 2px;
+ font-weight: 900;
+ }
+
+ .item-active::before {
+ color: #C5B358;
+ }
+
+ .player-icon,
+ .slider-icon,
+ .change-quote {
+ width: 32px;
+ height: 32px;
+ background-size: 32px 32px;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ border: 0;
+ outline: 0;
+ opacity: .8;
+ cursor: pointer;
+ transition: .3s;
+ }
+
+ .player-icon:hover,
+ .slider-icon:hover,
+ .change-quote:hover {
+ opacity: 1;
+ }
+
+ .player-icon:active,
+ .slider-icon:active,
+ .change-quote:active {
+ border: 0;
+ outline: 0;
+ transform: scale(1.1);
+ }
+
+ .play {
+ width: 40px;
+ height: 40px;
+ background-size: 40px 40px;
+ background-image: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/svg/play.svg");
+ }
+
+ .pause {
+ background-image: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/svg/pause.svg");
+ }
+
+ .play-prev {
+ background-image: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/svg/play-prev.svg");
+ }
+
+ .play-next {
+ background-image: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/svg/play-next.svg");
+ }
+
+ .weather {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ row-gap: 5px;
+ width: 180px;
+ min-height: 180px;
+ text-align: left;
+ }
+
+ .weather-error {
+ margin-top: -10px;
+ }
+
+ .description-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ align-items: center;
+ column-gap: 12px;
+ }
+
+ .weather-icon {
+ font-size: 44px;
+ }
+
+ .city {
+ width: 170px;
+ height: 34px;
+ padding: 5px;
+ font-size: 20px;
+ line-height: 24px;
+ color: #fff;
+ border: 0;
+ outline: 0;
+ border-bottom: 1px solid #fff;
+ background-color: transparent;
+ }
+
+ .city::placeholder {
+ font-size: 20px;
+ color: #fff;
+ opacity: .6;
+ }
+
+ .main {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 40vh;
+ min-height: 260px;
+ padding: 20px;
+ }
+
+ .slider-icon {
+ position: absolute;
+ top: 50%;
+ margin-top: -16px;
+ cursor: pointer;
+ }
+
+ .slide-prev {
+ left: 20px;
+ background-image: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/svg/slider-prev.svg");
+ }
+
+ .slide-next {
+ right: 20px;
+ background-image: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/svg/slider-next.svg");
+ }
+
+ .time {
+ min-height: 124px;
+ margin-bottom: 10px;
+ font-family: 'Arial-MT';
+ font-size: 100px;
+ letter-spacing: -4px;
+ }
+
+ .date {
+ min-height: 28px;
+ font-size: 24px;
+ margin-bottom: 20px;
+ }
+
+ .greeting-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: stretch;
+ align-items: center;
+ min-height: 48px;
+ width: 100vw;
+ font-size: 40px;
+ }
+
+ .greeting {
+ flex: 1;
+ padding: 10px;
+ text-align: right;
+ }
+
+ .name {
+ flex: 1;
+ max-width: 50%;
+ padding: 10px;
+ font-size: 40px;
+ text-align: left;
+ color: #fff;
+ background-color: transparent;
+ border: 0;
+ outline: 0;
+ }
+
+ .name::placeholder {
+ color: #fff;
+ opacity: .6;
+ }
+
+ .footer {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+ width: 100%;
+ height: 30vh;
+ min-height: 160px;
+ padding: 20px;
+ }
+
+ .change-quote {
+ margin-bottom: 30px;
+ background-image: url("https://raw.githubusercontent.com/rolling-scopes-school/stage1-tasks/momentum/assets/svg/reload.svg");
+ }
+
+ .quote {
+ min-height: 32px;
+ }
+
+ .author {
+ min-height: 20px;
+ }
+
+ @media (max-width: 768px) {
+ .time {
+ min-height: 80px;
+ font-size: 72px;
+ }
+
+ .greeting-container {
+ min-height: 40px;
+ font-size: 32px;
+ }
+
+ .greeting {
+ padding: 5px;
+ }
+
+ .name {
+ font-size: 32px;
+ padding: 5px;
+ }
+ }
+
\ No newline at end of file