Add PT Sans webfont and buttons in footer

1 files changed, 71 insertions, 8 deletions

diff --git a/style.css b/style.css
index dd4e69f..412b15b 100644
--- a/style.css
+++ b/style.css
@@ -1,12 +1,36 @@
+@font-face {
+  font-display: swap;
+  font-family: 'PT Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('ftn/pt-sans-v18-cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'),
+       url('ftn/pt-sans-v18-cyrillic_cyrillic-ext_latin-regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'PT Sans Narrow';
+  font-style: normal;
+  font-weight: 400;
+  src: url('ftn/pt-sans-narrow-v19-cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'),
+       url('ftn/pt-sans-narrow-v19-cyrillic_cyrillic-ext_latin-regular.ttf') format('truetype');
+}
+
 body {
   background-color: #f0f0f0;
   color: #0a0a0a;
-  font-family: Tahoma, Geneva, Verdana, sans-serif;
-  font-size: 14px;
+  font-family: 'PT Sans', sans-serif;
+  font-size: 18px;
   margin: 0;
   padding: 0;
 }
 
+@media (max-width: 576px) {
+  body {
+    font-size: 14px;
+  }
+}
+
 a {
   color: #ff685b;
 }
@@ -15,6 +39,10 @@ a:visited {
   color: #0097a4;
 }
 
+del {
+  color: #888888;
+}
+
 .clearfix:after {
   content: "";
   display: table;
@@ -44,7 +72,13 @@ a:visited {
 .webring a {
   color: #0a0a0a;
   text-decoration: none;
-  font-size: 9px;
+  font-size: 11px;
+}
+
+@media (max-width: 576px) {
+  .webring a {
+    font-size: 9px;
+  }
 }
 
 .webring a:hover {
@@ -61,29 +95,52 @@ a:visited {
 }
 
 .heading {
-  font-family: 'Times New Roman', Times, serif;
+  font-family: 'PT Sans Narrow', sans-serif;
+  color: #ff685b;
   padding: 6px 0px;
   margin: 0;
 }
 
 .text {
-  font-size: 11px;
+  text-align: justify;
+  font-size: 14px;
   padding: 6px 0px;
   margin: 0;
 }
 
+.heading::selection,
+.text::selection {
+  background-color: #ff685b;
+  color: white;
+}
+
+@media (max-width: 576px) {
+  .text {
+    font-size: 11px;
+  }
+}
+
 .contacts {
   border-collapse: collapse;
   margin: 6px 0px;
 }
 
-.contacts .title, .contacts .contact {
+.contacts .title,
+.contacts .contact {
   border: 1px solid;
   text-align: left;
-  font-size: 11px;
+  font-size: 14px;
   padding: 6px;
 }
 
+@media (max-width: 576px) {
+  .contacts .title,
+  .contacts .contact {
+    font-size: 11px;
+  }
+}
+
+
 /* #region Buttons */
 .buttons {
   list-style-type: none;
@@ -127,6 +184,12 @@ a:visited {
 
 .footer {
   text-align: center;
-  font-size: 9px;
+  font-size: 11px;
   margin: 9px;
 }
+
+@media (max-width: 576px) {
+  .footer {
+    font-size: 9px;
+  }
+}