:root {
  --font-size-02vx: calc(16px + 0.2vmax);
  --font-size-05vx: calc(16px + 0.5vmax);
  width: 100%;
  font-size: calc(16px + 0.2vmax);
  background-color: whitesmoke;
  padding: 0;
  margin: 0;
}

:root,
html,
body,
.body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-size: calc(16px + 0.2vmax);
  background-color: whitesmoke;
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.body,
.wrapper {
  width: 100%;
  font-size: calc(16px + 0.2vmax);
  background-color: whitesmoke;
  padding: 0;
  margin: 0;
}

.top-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: calc(16px + 0.5vmax);
}

.sec-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.art-header {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, gold, orangered);
  padding-left: 40px;
}

.head-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, gold, orangered);
  padding-left: 60px;
}

.head-article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, ghostwhite, darkblue);
  padding-left: 60px;
}

.foot-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(90deg, gold, orangered);
}

.head-bg {
  width: 100%;
  height: calc(23vmax - 0.2rem);
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('./assets/header.png');
}

.logotype {
  margin-right: 20px;
}

.head-logo {
  padding-top: 5px;
}

.foot-logo {
  padding-top: 3px;
}

.logo-large {
  width: 165px;
}

.logo-medium {
  width: 82.5px;
}

.logo-small {
  width: 55px;
}

.head-title,
.foot-title {
  font-family: Arial, Verdana, sans-serif;
  color: midnightblue;
}

.name {
  text-transform: uppercase;
  text-shadow: 1px 1px 2px bisque;
  padding: 0;
  margin: 0;
}

.slug_right {
  font-style: italic;
  text-align: right;
  text-transform: none;
  text-shadow: none;
  color: midnightblue;
  padding: 0 20px 0 0;
  margin: 0;
}

.slug_left {
  font-style: italic;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  color: midnightblue;
  padding: 0 20px 0 0;
  margin: 0;
}

.title {
  font-family: Arial, Verdana, sans-serif;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px bisque;
  color: midnightblue;
}

.separator {
  width: 100%;
  height: 40px;
}

.text-content {
  font-family: Arial, Verdana, sans-serif;
  color: midnightblue;
  margin-left: 60px;
}

.paragraph {
  text-indent: 40px;
}

.center {
  text-align: center;
}

.image-prop1 {
  width: 99%;
  vertical-align: middle;
}

.image-prop2 {
  width: 98%;
  vertical-align: middle;
}

.image-prop3 {
  width: 89%;
  vertical-align: middle;
}

.image-prop4 {
  width: 88%;
  vertical-align: middle;
}

.bold-font {
  font-weight: bold;
}

.button {
  min-width: 16rem;
  min-height: 4rem;
  font-size: var(--font-size-05vx);
  border-radius: 15px;
  border-color: royalblue;
  background-color: slateblue;
  color: white;
}

.button:hover,
.labels label:hover {
  cursor: pointer;
}

.art-content {
  margin-left: 20px;
}

.b-dou {
  display: flex;
  flex-flow: row wrap;
}

.p-dou {
  flex: 0 1 auto;
}

.p-app {
  width: 90%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.list {
  padding: 0;
  list-style: disc;
  list-style-position: inside;
}

.image-dou {
  width: 90%;
  max-width: 473px;
  box-shadow: 15px 15px 25px grey;
}

.image-app {
    width: 90%;
    padding: 10px;
    max-width: 473px;
    box-shadow: 15px 15px 25px grey;
}