/*стилі для книжноі орієнтаціі*/
@font-face {
  font-family: 'MyCustomFont'; /* Любое имя для шрифта */
  src: url('944-font.ttf') format('truetype'); /* путь к файлу */
  font-weight: normal; /* насыщенность */
  font-style: normal; /* стиль */
}

* {
  flex-shrink: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  color: var(--text-color);
  stroke: var(--text-color);
}

html, body {
  width: 100%;
  height: max-content;
  min-height: 100%;
  padding: 0%;
  margin: 0%;
}

div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

h1, h2 {
  font-family: 'Russo One', sans-serif;
}

button {
  background-color: transparent;
  border: none;
}

input {
  border: none;
  outline: none;
}

.wrap-content {
  height: max-content;
  display: grid;
  grid-template: auto / repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.anime-img,
.view-anime-poster {
  aspect-ratio: 5/7;
  border-radius: var(--radius);
  border: var(--border);
  position: relative;
  width: 100%;
  height: auto;
}

.anime-img {
  border: none;
  border-radius: var(--radius) var(--radius) 0 0;
  
  span {
    background-color: var(--anime-img-span-bg);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    width: max-content;
    height: max-content;
    margin: 0;
    border-radius: 0 var(--radius) 0 var(--radius);
    
    &.year {
      right: auto;
      left: 0;
      border-radius: var(--radius) 0 var(--radius) 0;
    }
    
    &.rank {
      top: auto;
      bottom: 0;
      border-radius: var(--radius) 0 0 0;
    }
    
    &.rating {
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
      border-radius: 0 var(--radius) 0 0;
    }
  }
}