html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style: none;
}
button,
input,
select {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
img,
video {
  height: auto;
  max-width: 100%;
}
iframe {
  border: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

html,
body {
  left: 0;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}

@font-face {
  font-display: swap;
  font-family: "vazir";
  font-style: normal;
  font-weight: 100 900;
  src: url("vazir.woff2") format("woff2 supports variations"),
    url("vazir.woff2") format("woff2-variations");
}

:root,
:host {
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
  --fa-style-family-classic: "Font Awesome 6 Free";
}

@font-face {
  font-display: block;
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  src: url("fa-solid-900.woff2") format("woff2"),
    url("fa-solid-900.ttf") format("truetype");
}

.fas,
.fa-solid {
  font-weight: 900;
}

:root {
  --article-bg-color: #fff;
  --article-text-color: #585858;
  --label-color: #000;
  --section-title-color: #000;
  --separator-color: #afafaf;
}

body {
  background: #fff;
  color: #000;
  direction: rtl;
  font-family: "vazir";
  font-size: 13px;
}

address {
  display: inline;
  font-style: normal;
}

.container {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.container header {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.container header > img.avatar {
  max-height: 200px;
  min-height: 100px;
  object-fit: contain;
  padding: 15px;
  width: 100%;
}

.container header > ul.props {
  background-color: #262e40;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsBAMAAADsqkcyAAAAElBMVEXk5ORwcHCrq6ulpaWcnJysrKyo8ZZsAAAABnRSTlMAC1A1IGVYh68sAAAAcklEQVR4Xu3RsQ3EMAxD0Wcn13sEj+ARMkL2n+agjo0muANE4hcCQUFelJFoliysQA7HzZ1YKj9OItbCnIkAvInNdpfdNGl6d1eCj7LEgWFjB/LUXFyJpfLHk4i9MUYifECiZrvLbpo0vZsrf/Xz/89/ATY+G+WnjEVsAAAAAElFTkSuQmCC");
  color: #ced4d9;
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  max-height: 200px;
  overflow: hidden;
  padding: 15px;
  position: relative;
  width: 100%;
}
.container header > ul.props li {
  list-style: none;
  list-style-position: outside;
  margin-left: 30px;
  padding: 5px;
}

.container header > ul.props li a,
.container header > ul.props li a:visited {
  color: #ced4d9;
  text-decoration: none;
}

.container header > ul.props li > label {
  color: #ced4d9;
  font-weight: bold;
}
.container header > ul.props li.name {
  border-bottom: 1px dashed #ced4d9;
  font-size: 150%;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.container header > ul.props li.name > label {
  color: #fff;
}

.container article {
  background: var(--article-bg-color);
  color: var(--article-text-color);
  flex: 70%;
}

.container article section {
  margin: 0 0 30px 0;
  min-height: 100px;
  padding: 0 30px;
}
.container article section:first-child {
  margin-top: 30px;
}
.container article section > h1 {
  color: var(--label-color);
  display: block;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 5px 15px;
  position: relative;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  white-space: nowrap;
}
.container article section > h1.section-title {
  background: var(--article-bg-color);
  border-bottom: 1px dashed var(--separator-color);
  color: var(--section-title-color);
}
.container article section > div.section-content {
  padding: 15px;
}

@media only screen and (min-width: 33.75em) {
  /* 540px */

  body {
    padding: 5em 0;
  }

  .container {
    border-radius: 3px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin: 0 auto;
    width: 80%;
  }
}

@media only screen and (min-width: 60em) {
  /* 960px */

  .container {
    max-width: 60rem;
    width: 75%;
  }

  .container header {
    flex-flow: row;
  }
  .container header > img.avatar {
    width: 25%;
  }
  .container header > ul.props {
    min-height: 240px;
    padding: 15px 70px 70px 15px;
    width: 75%;
  }
  .container header > ul.props::before {
    background: var(--article-bg-color);
    bottom: -30px;
    content: "";
    display: block;
    position: absolute;
    right: -30px;
    top: -30px;
    transform: rotate(15deg);
    width: 70px;
  }
  .container header > ul.props::after {
    background: var(--article-bg-color);
    bottom: -30px;
    content: "";
    display: block;
    height: 70px;
    left: -30px;
    position: absolute;
    right: -30px;
    transform: rotate(-3deg);
  }
}