/* exo-2-regular - latin_cyrillic */
@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 400;
  src: local(""),
    url("../fonts/exo-2-v10-latin_cyrillic-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/exo-2-v10-latin_cyrillic-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

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

.wrapper {
  max-width: 600px;
  margin: 0 auto;
}

body {
  background-color: #716fff;
  font-family: "Exo 2";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
}

header {
  background-color: white;
  margin-top: 30px;
}

.title {
  margin: 0 auto;
  font-family: "Exo 2";
  font-style: normal;
  font-weight: normal;
  font-size: 42px;
  line-height: 50px;

  color: #000000;
  text-align: center;
}

.header_title {
  margin: 0 auto;
}

.content {
  display: block;
  background-color: white;
  min-height: 700px;
  height: 700px;
  margin-top: 67px;
  border-radius: 21px;
  padding: 4px 24px;
  margin-bottom: 50px;
  overflow-y: scroll;
}

.item {
  display: block;
  border-radius: 10px;
  width: 100%;
  min-height: 34px;
  margin: 12px 0px;

  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 18px;

  color: #000000;
}

.item_text {
  margin: auto;
  line-height: 30px;
  align-items: flex-end;
}

.item:hover,
.item:focus,
.item:active {
  opacity: 0.6;
}

.folder {
  background: #fffb95;
}

.file {
  background: #e2e2e2;
}

.icon {
  margin: 0 10px 0 20px;
}