styles.css

/*!
 * @author      rx1310 <rx1310@inbox.ru>
 * @copyright   Copyright (c) o1310, 2020
 * @license     MIT License
 */

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*,
*::before,
*::after {
  -webkit-touch-callout: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none;
}

@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

body {
  color: #212426;
  background-color: #ebebeb;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  line-height: 1.15;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

a,
a:visited {
  color: #000000;
}

a:hover,
a:active {
  color: #8a8a8a;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid #cecece;
}

main {
  padding: 1.4em;
}

.main-box, a {
  -webkit-transition: background-color .6s, color .6s;
     -moz-transition: background-color .6s, color .6s;
       -o-transition: background-color .6s, color .6s;
          transition: background-color .6s, color .6s;
}

.main-box {
  background-color: #ffffff;
  padding: .5em 1.2em;
  margin-bottom: .8em;
  -webkit-box-shadow: 0 0.15em 0.8em -0.2em rgba(0, 0, 0, .4);
     -moz-box-shadow: 0 0.15em 0.8em -0.2em rgba(0, 0, 0, .4);
          box-shadow: 0 0.15em 0.8em -0.2em rgba(0, 0, 0, .4);
  -webkit-border-radius: 0.5em;
     -moz-border-radius: 0.5em;
          border-radius: 0.5em;
}

@media (min-width: 768px) {
  .main-box {
    margin: 0em 3em .8em 3em;
  }
}

@media (min-width: 1024px) {
  .main-box {
    margin: 0em 4em .8em 4em;
  }
}

@media (min-width: 1440px) {
  .main-box {
    margin: 0em 5em .8em 5em;
  }
}

.main-box:active,
.main-box:hover {
  background-color: #000000;
  color: white;
  padding: .5em 1.2em;
  margin-bottom: .8em;
  -webkit-box-shadow: 0 0.15em 0.8em -0.2em rgba(0, 0, 0, .8);
     -moz-box-shadow: 0 0.15em 0.8em -0.2em rgba(0, 0, 0, .8);
          box-shadow: 0 0.15em 0.8em -0.2em rgba(0, 0, 0, .8);
}

header,
footer {
  padding: .6em 1em;
  text-align: center;
}

.tag {
  background-color: #212426;
  color: white;
  padding: .2em .4em;
  font-size: small;
  -webkit-border-radius: 0.5em;
     -moz-border-radius: 0.5em;
          border-radius: 0.5em;
}

.tag-red {
  background-color: #B71C1C;
}

.tag-green {
  background-color: #1B5E20;
}

.tag-blue {
  background-color: #0D47A1;
}

.tag-orange {
  background-color: #af5c13;
}