@font-face {
    font-family: 'RocknRoll One';
    src: url('../fonts/RocknRollOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html {
  background:url(../img/footer_lodyas.png) #363636;
  color:white;
  font-family: 'RocknRoll One',sans-serif;
}
body {
  margin:0;
  font-size:80%;
}
a {
  color:inherit;
  text-decoration:none;
  text-transform:uppercase;
}
a:visited {
  color:#FFDD40;
}
a:hover,
.more a:hover {
  color:violet
}
img {
  max-width:90%;
}
.header {
  background: url(../img/logo.svg) 20px 20px  / 80px no-repeat #0008;
  bacground-blend-mode:color;
  padding:1em 1em 80px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0% 100%);
  grid-template-columns:clamp(15em,30em,50vw) 1fr;
  display:grid;
  text-align:end;
}
.header h1 {
  margin-top:120px;
}
.navigation {
  grid-row:1/3;
  grid-column:2;
}
.navigation .menu {
  display:flex;
  flex-wrap:wrap;
  gap:1em;
  float:right;
}
.menu .menu,
.menu ul {
    display:contents;
}
.menu>span {
    display:none;
}
.main {
  display:grid;
  gap:1em;
  padding:1em calc(25vw - 150px);
  margin-inline:1em;
}
.repertory.menu.breadcrumb {
  list-style-position: inside;
  list-style-type:  disclosure-open;
}
.repertory.menu.breadcrumb li:nth-child(2) {
  padding-inline-start: 2em;
}
.repertory.menu.breadcrumb li:nth-child(3) {
  padding-inline-start: 4em;
  text-transform: uppercase;
  color: violet;
  scale:1.2;
  transform-origin: 0 0;
}
article{
  background:linear-gradient(#fff0,#fff1);
  padding-inline:1em;
  padding-bottom:2em;
  margin-bottom:2em;
  
}
article time {
  display:inline-block;
  rotate: -5deg;
  text-indent:-1.5em;
  color:#FF3C41;
}
article header div,
.more {
  text-align:end;
}
#top article :is(h2,h3,h4,h5,h6){
  background:#0002
}
.more a {
  color:#0EBEFF
}
article header div:last-of-type {
  margin-bottom:2em;
}
.art_thumbnail {
  display:block;
  margin:auto;
  min-width:300px;
}
.pagination , .rss{
  text-align:center;
  padding-block:2em;
}
.rss a {
  color:orange
}
.aside {
  padding:1em;
}
.footer {
  text-align:center;
  background:#000;
  padding:100px 1em 50px;
  clip-path: polygon(0 100px, 100% 0, 100% 100%, 0% 100%);
}
.footer :is(ul,li) {
  display:inline;
  padding-inline:1em;
}
@media (min-width:760px) {
  main.main {
  grid-template-columns:2fr 1fr;
  }
}
@media (max-width:759px) {
  aside.aside {
    background:#0004;
    padding-block:100px;
    margin:-80px -1em -120px;
    clip-path: polygon(0 100px, 100% 0, 100% calc(100% - 100px), 0% 100%);
  }
}


.theme-grid {
  -webkit-text-stroke: 1px gray;
}