@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Forum&display=swap');

:root {
    /* Colors */
    --color-black-rus: #0C0C0E;
    --color-black:  #000000;
    --color-beige: #BB945F;
    --color-white: #FFFFFF;
    --color-grey:  #8E8E8E;

    /* Fonts */
    --font-family-forum: 'Forum';
    --font-family-inter-bold: 'Inter';
    --font-family-inter-reg: 'Inter';
}

  *
  {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after
{
    box-sizing: border-box;
  }

  html
  {
    scroll-behavior: smooth;
  }

  html, body
  {
    scroll-behavior: smooth !important;
  }

  /*html:focus-within {
    scroll-behavior: smooth;
  } */

  body
  {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    5. Improve media defaults
  */
  /*img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  } */
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select
  {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6
  {
    overflow-wrap: break-word;
  }

  .wrapper {
    margin: auto;
    /*width: 1440px;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   position: relative;
    overflow: hidden;
    width: 100%;
  }


  /* header start */
  .header
  {
    margin: auto;
    display: flex;
    min-height: 90px;
    background: var(--color-black-rus);
    width: 100%;
    max-width: 1440px;
  }

  .header__container
  {
    width: 1440px;
    height: 90px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--color-black-rus);
    flex-wrap: wrap;
  }

  .header__logo
   {
    margin-right: auto;
   }

  .menu__list
  {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
   gap: 30px;
   scroll-behavior: smooth;
  }

  .header__menu-flex
  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }

  .header__burger-btn
  {
    display: none;
    position:relative;
    width: 46px;
    height: 46px;
    border: none;
    outline: none;
    background-color: transparent;
    z-index: 2;
    cursor: pointer;
    right: -110px;
  }

  .header__burger-btn span {
    position: absolute;
    width: 46px;
    height: 2px;
    background-color: white;
    left: 5px;
    transition: background-color .5s, opacity .3s, transform .5s;
    will-change: transform;
  }

  .header__burger-btn span:nth-child(1) {
    transform: translateY(10px);
  }

  .header__burger-btn span:nth-child(2) {

  }

  .header__burger-btn span:nth-child(3) {
    transform: translateY(-10px);
  }


  /* cross code */

  .header.open .header__burger-btn span:nth-child(1) {
    transform: translateY(0px) rotate(45deg);
  }

  .header.open .header__burger-btn span:nth-child(2) {
      opacity: 0;
  }

  .header.open .header__burger-btn span:nth-child(3) {
    transform: translateY(0px) rotate(-45deg);
  }


  .menu {
    transition: transform .5s, visibility .5s;
   
  }

  .header__burger-btn:hover span {
    background-color:var(--color-beige);
  }

  .header__profile-module
  {
    position: relative;
  }

 .header__logo .logo__title a
 {
  font-family: var(--font-family-forum);
  font-size: 30px;
  letter-spacing: 0.6px;
  color: var(--color-white);
  text-decoration: none;
  cursor: pointer;
 }

 .header__logo .logo__title a:hover {
   color: var(--color-beige);
 }

.menu__link
{
text-decoration: none;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 50px;
}

.menu__list  .menu__link:hover
{
   text-decoration: underline;
   cursor: pointer;
}

.header__logo h1,
.menu__link
{
  color: var(--color-white);
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
}

button.profile-icon {
  outline: none;
  border: none;
  background-color: transparent;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/*
button.login-auth {
  background-color: white;
  color: black;
}*/

.profile-icon a svg
{
   margin-top: 5px;
   fill: var(--color-white);
}

.profile-icon a:hover svg
{
   fill: var(--color-beige);
}

.closeSvg {
  display: none;
}

.button-inits {
  background-color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: black;
}

 /* welcome section  start */
 .welcome
 {
  margin: auto;
  display: flex;
  min-height: 600px;
  max-width: 1440px;
  background-image: linear-gradient(180deg, #0C0C0E 0%, #0C0C0E 0.01%, rgba(18, 18, 21, 0.10) 50%, transparent 50%), url("./assets/img/welcome.png");
  background-size: cover;
  background-repeat: no-repeat;
 }

 .welcome__container
 {
  width: 100%;
  max-width: 1440px;
 }

 .welcome__title
 {
  padding: 35px 40px;
  background-color: var(--color-black-rus);
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-family-forum);
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  width: 598px;
  margin: 220px 0 160px;
 }
  /* welcome section  end */

 /* about section  start */
 .about__container
 {
  margin: 0 auto;
  max-width: 1440px;
  padding: 20px 20px 0;
 }

 .about__title
 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 21px;
 }

 .about__title h2,
 .favorites__title h2,
 .coffee-shop__title h2,
 .contacts__title h2,
 .digital-library-cards__title h2,
 .library-card__title h2
 {
   color: var(--color-black-rus);
   font-family: var(--font-family-forum);
   font-size: 40px;
   font-style: normal;
   font-weight: 400;
   line-height: 40px;
   letter-spacing: 2px;
 }

 .about__title p
 {
  color: var(--color-black);
  text-align: center;
  font-family: var(--font-family-inter-reg);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  padding-top: 61px;
  margin-bottom: -1px;
 }

 .about__title h2,
 .library-card__title h2,
 .favorites__title h2,
 .coffee-shop__title h2,
 .contacts__title h2,
 .digital-library-cards__title h2
  {
  position: relative;
  }

 .about__title h2::after,
 .favorites__title h2::after,
 .coffee-shop__title h2::after,
 .contacts__title h2::after
 {
   content: " ";
   display: block;
   width: 50px;
   height: 1px;
   background:  var(--color-black-rus);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 60px;
   bottom: 0;
 }

 .favorites__container {
  width: 100%;
  max-width: 1440px;
 }
 .favorites__title h2::after {
    content: " ";
    display: block;
    width: 50px;
    height: 1px;
    background:  var(--color-black-rus);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 94px;
    bottom: 0;
  }

/*.sample-slider img 
{
  width: 450px;
  height: 560px;
} */

.wrapper-winter-books
{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-direction: column;
}

.button-prev,
.button-next
{
  display: none;
}

.about__slider-wrapper
{
  width: 100%;
  overflow: hidden;
}


.slider-container {
  /* display: flex;
  justify-content: center;
  align-items: center; */
   width: 100%;
  /* transform: translateX(100px); */
  overflow: hidden;
  position: relative;
  height: 580px;

}

.slider-track
{
  display: flex;
  width: 100%;
  gap: 25px;
  position: absolute;
  left: calc(-50% + 225px + 12.5px);
  /* transform: translateX(25%); */
  transition: 1s;
}



.slider-item {
min-width: 450px;
height: 560px;
}


.slider-item img
{
  /* max-width: 450px; */
  width: 100%;
  height: 100%;
}

.about__pagination
{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  margin-top: 24px;
  margin-bottom: 21px;
  padding-top: 4px;
}

.pagination-button
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  background-color: transparent;
  border: none;
}


.button-next,
.button-prev {
  background-color: transparent;
  outline: none;
  border: none;
}

.pagination-button:hover
{
  background-color: grey;
}

.pagination-button:nth-child(1)::after
{
  background-color: var(--color-beige)
}

.pagination-button:nth-child(2)::after,
.pagination-button:nth-child(3)::after,
.pagination-button:nth-child(4)::after,
.pagination-button:last-child::after

{
  background-color: var(--color-black-rus);
}

.active {
  background-color: grey;
}


.pagination-button.medium {
  display: none;
}
.pagination-button::after
{
  content: '';
  background-color: var(--color-beige);
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 50%;
}

.arrays
{
  display: none;
}


 /* about section  end */

/* favorites section  start */

.favorites__container
{
   margin: 0 auto;
   max-width: 1440px;
   padding: 0 20px;
   margin-bottom: 40px;
}

.favorites__title h2
{
  text-align: center;
  padding-top: 34px;
  margin-bottom: 60px;
}

.favorites__form
{
  display: flex;
  gap: 90px;
  margin-top: 42px;
}

.favorites__label,
.favorites__seasons p
{
  color: var(--color-black);
  font-family: var(--font-family-inter-reg);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.favorites__seasons p
 {
  font-weight: 700;
 }

.input__radio:checked + .stlradio:before
{
  opacity: 1;
}

.input__radio
{
  width: 17px;
  height: 17px;
  color: var(--color-black);
}

.input__radio:checked
{
   accent-color: var(--color-black);
}

.input__radio:checked ~ .text
{
  font-weight: 700;
}

.stlradio
{
  margin-right: 15px;
}

.favorites__books-cont
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 38px;
  gap: 40px;
  flex-wrap: wrap;
}

.favorites__books-cont-second,
.favorites__books-cont-third,
.favorites__books-cont-fourth,
.favorites__books-cont-fifth,
.favorites__books-cont-sixth,
.favorites__books-cont-seventh,
.favorites__books-cont-eighth,
.favorites__books-cont-first
{
  display: flex;
  flex-direction: row;
  padding-right: 20px;
  gap: 260px;
  flex-wrap: wrap;
}

.second-line
{
  margin-top: 40px;
}

.book-item
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--color-black);
  width: 550px;
  height: 555px;
  padding-left: 20px;
  position: relative;
}

.book-item__title
{
color: var(--color-black);
font-family: var(--font-family-forum);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
padding-top: 13px;
}

.book-item  h3::after
{
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-beige);
}

.book-text,
.book-text-first,
.book-text-second,
.book-text-fourth
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.book-text-first,
.book-text-second {
  gap: 20px;
}

.book-text-fourth {
  gap: 20px;
}

.book-text-fourth button
{
  margin-top: 75px;
}

.book-plot {
width: 355px;
}

.book-text  .book-info {
  padding-bottom: 60px;
}

.book-plot,
.book-info
{
color: var(--color-black);
font-family: var(--font-family-inter-reg);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
}

.book-info
{
font-weight: 700;
text-transform: uppercase;
}

.book-info span
{
text-transform: capitalize;
}

.book-item button
{
width: 75px;
height: 30px;
flex-shrink: 0;
margin-bottom: 15px;
background-color: var(--color-white);
transition: 0.5s;
}

.book-item .own,
.book-item .buy
{
text-align: center;
font-family: var(--font-family-inter-reg);
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
border-radius: 2px;
}

.book-item .own
{
color: var(--color-beige);
border: 1px solid var(--color-beige);
pointer-events: none;
}

.book-item .buy
{
color: var(--color-black-rus);
border: 1px solid var(--color-black-rus);
}

.book-item button:hover
{
   cursor: pointer;
   color: var(--color-black-rus);
   border: 1px solid var(--color-beige);
   background: var(--color-beige);
   transition: 0.3s;
}

.book-item button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.book-item .book-cover
{
  position: absolute;
  left: 389px;
  z-index: 2000;
  padding-top: 254px;
  width: 200px;
  height: 300px;
}

.favorites__hidden
{
  display: none;
}


.wrapper-spring-books,
.wrapper-summer-books,
.wrapper-fall-books
{
  display: none;
}

.wrapper-spring-books.close,
.wrapper-summer-books.close,
.wrapper-fall-books.close {
  display: none;
}

.wrapper-spring-books.open,
.wrapper-summer-books.open,
.wrapper-fall-books.open
{
  display: block;
}



/* favorites section end */

/* coffee-shop section start */
.coffee-shop__container
{
margin: 0 auto;
padding: 0 20px;
max-width: 1440px;
padding-top: 20px;
}

.coffee-shop__menu
{
  display: flex;
  justify-content: space-between;
}

.coffee-shop__title,
.library-card__title
{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.coffee-shop__menu h3,
.about__title h2,
.favorites__title h2,
.coffee-shop__title h2,
.library-card__title h2
{
  text-transform: capitalize;
}

.coffee-shop__title p
{
margin-top: 60px;
color: var(--color-black);
font-family: var(--font-family-inter-reg);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 200% */
letter-spacing: 2px;
text-align: center;
}

.coffee-shop__menu
{
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.coffee-shop__menu h3
{
color: var(--color-beige);
font-family: var(--font-family-forum);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
}

.coffee-shop__menu-drinks,
.coffee-shop__menu-desserts
{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 40px;
}

.coffee-shop__menu-desserts
{
align-items: flex-end;
}

.menu-drinks__item,
.menu-desserts__item
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

 .menu-drinks__item-title,
.menu-desserts__item-title
{
flex-grow: 1;
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px; /* 200% */
letter-spacing: 2px;
text-transform: capitalize;
}

.menu-drinks__item .line,
.menu-desserts__item .line
{
  width: 100px;
  height: 1px;
  background: var(--color-beige);
}

.menu-drinks__item-price,
.menu-desserts__item-price
{
color: var(--color-black);
font-family: var(--font-family-forum);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
}
/* coffee-shop section end */


/* contacts section start */
.contacts__container
{
 margin: 0 auto;
 padding: 0 20px;
 max-width: 1440px;
 width: 100%;
 padding-top: 41px;
 padding-bottom: 38px;
}

.contacts__wrapper
{
  display: flex;
  justify-content: space-between;
}

.contacts__wrapper-info
{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contacts__title h2  {
  margin-bottom: 21px;
}

.contacts__title h2::after {
  top: 60px;
}

.info__library-director
{
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 20px;
}

.contacts__wrapper-location img
{
max-width: 100%;
}

.contacts__title
{
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 40px;
}

.contacts__wrapper-info h3,
.contacts__wrapper-info p,
.contacts__wrapper-info ul li {
color: var(--color-black);
text-align: left;
font-family: var(--font-family-inter-reg);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 2px;
text-transform: capitalize;
}

.info__phone-number
{
display: flex;
flex-direction: column;
gap: 20px;
list-style-type: none;
max-width: 550px;
}

.contacts__wrapper-info p a {
  text-decoration: none;
  color: var(--color-black);
}

.mail a
{
  font-weight: 700;
  margin-bottom: 20px;
  transition: 0.5s;
}

.mail a:hover
{
  color: var(--color-beige);
  text-decoration: underline;
}

li a
{
  text-decoration: none;
  color: var(--color-black);
  transition: 0.5s;
}

li a:hover
{
  color: var(--color-beige);
  font-weight: 800;
}
/* contacts section end */


/* library-card section start */


.library-card {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}


.library-card__container
{
 margin: 0 auto;
 max-width: 1440px;
 width: 100%;
 padding: 5px 20px 0px;
 margin-bottom: 40px;
 margin-top: 5px;
}

.library-card__title h2
{
   padding-top: 5px;
   margin-bottom: 21px;
}

.library-card__title h2::after
{
  content: " ";
  display: block;
  width: 50px;
  height: 1px;
  background:  var(--color-black-rus);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 63px;
  bottom: 0;
}

.library-cards-container
{
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}

.get-card
{
  display: flex;
  flex-direction: column;
  text-align: right;
  gap: 45px;
}

.get-card__text
{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 58px;
}

.get-card__text p
{
  margin-top: 60px;
}

.get-card .buttons
{
  margin-top: -10px;
}

.find-card
{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  text-align: right;
}

.find-card h2,
.get-card h2
{
color: var(--color-black);
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.6px;
}

.find-card h2
{
  font-family: Inter;
}

.find-card
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.form-container
{
display: block;
width: 600px;
height: 386px;
border: 3px solid var(--color-beige);
background: var(--color-white);
margin-top: 11.0px;
}

.form-wrapper
{
display: flex;
flex-direction: column;
align-items: center;
gap: 21px;
width: 560px;
height: 272px;
background: var(--color-beige);
margin-top: 15.5px;
margin-left: 17px;
margin-right: 20px;
}

.form-wrapper h3
{
color: var(--color-black);
font-family: var(--font-family-forum);
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 50px;
letter-spacing: 0.6px;
align-self: flex-start;
margin-left: 20px;
margin-top: 20px;
}

.input-flex
{
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.form-wrapper input
{
  width: 520px;
  height: 66px;
  border-radius: 10px;
  border: none;
  background: var(--color-white);
  padding-left: 20px;
}

input::placeholder {
  color: #8E8E8E;
  font-family: var(--font-family-forum);
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 0.6px;
}

input:invalid {
  border: 2px solid red;
}

.form-container button {
margin-top: 19.5px;
margin-right: 174px;
padding: 10px 40px;
background-color: var(--color-white);
border-radius: 2px;
border: 1px solid var(--color-black-rus);
color: var(--color-black-rus);
text-align: center;
font-family: var(--font-family-inter-reg);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
transition: 0.5s;
}

.form-container button:hover
{
   cursor: pointer;
   color: var(--color-black-rus);
   border: 1px solid var(--color-beige);
   background: var(--color-beige);
}

.form-container button:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.get-card h2
{
font-family: var(--font-family-forum);
}

.get-card p
{
color: var(--color-black);
text-align: right;
font-family: var(--font-family-inter-reg);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 40px;
letter-spacing: 0.4px;
margin-top: -22px;
}

.get-card__text p {
  display: block;
  width: 456px;

}

.get-card button
{
border-radius: 2px;
border: 1px solid var(--color-black-rus);
width: 75px;
height: 30px;
text-align: center;
color: var(--color-black-rus);
text-align: center;
font-family: var(--font-family-inter-reg);
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
background-color: var(--color-white);
transition: 0.5s;
}

.buttons
{
  display: flex;
  gap: 20px;
  justify-content:flex-end;
}

.get-card button:active
{
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.get-card button:hover
{
   cursor: pointer;
   color: var(--color-black-rus);
   border: 1px solid var(--color-beige);
   background: var(--color-beige);
}
/* library-card section end */


/* footer section start */
.footer
{
  min-height: 250px;
  background: var(--color-black-rus);
  max-width: 1440px;
  width: 100%;
  margin: auto;
  display: flex;
}

.footer__container
{
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 20px;
  margin-top: -1px;
}

.footer-wrapper__top
{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: wrap;
}

.footer-wrapper__top-first,
.footer-wrapper__top-second
{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-wrapper__top-second  .social-links
{
  align-content: flex-start;
}

.footer-wrapper__top-second
{
  padding-bottom: 29px;
}

.footer-wrapper__top-social .social-links
{
   display: flex;
   flex-direction: row;
   gap: 15px;
   align-self: flex-start;
   margin-top: 10px;
}

.social-links li a svg
{
 fill: #F5EFDB;
}

.social-links li a:hover svg
{
fill: var(--color-beige);
transition: fill 0.3s ease-in-out;
}

.footer-wrapper__top-address a
{
text-decoration: none;
color: var(--color-white);
font-family: var(--font-family-inter-reg);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px;
transition: 0.5s;
}

.footer-wrapper__top-address a:hover
{
  cursor: pointer;
  color: var(--color-beige);
}

.footer-wrapper__top-address
{
  margin-bottom: 10px;
}

hr
{
  height: 1px;
  color: var(--color-white);
}

.business-days,
.weekends
{
display: block;
color: var(--color-white);
text-align: right;
font-family: var(--font-family-inter-reg);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

.footer-wrapper__top-address a
{
display: block;
width: 250px;
line-height: 20px;
color: var(--color-white);
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
}

.footer-bottom
{
  display: flex;
  justify-content: space-between;
  color: var(--color-white);
  list-style-type: none;
  align-items: center;
  padding-top: 44px;
}

.footer-bottom  li
{
text-align: center;
font-family: var(--font-family-inter-reg);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: 2px;
}

.footer-bottom  li a
{
  list-style-type: none;
  color: var(--color-white);
  text-decoration: none;
  transition: 0.5s;
}

.footer-bottom  li a:hover
{
   cursor: pointer;
   color: var(--color-beige);
}
/* footer section end */


.library-card__container.after-log-in
{
  display: none;
}


/* modals section */

.menu-profile-nonauth,
.menu-profile-auth
{
min-width: 80px;
height: 115px;
max-width: 100%;
background-color: #FFFFFF;
color:#000;
border: 1px solid black;
text-align: center;
position: absolute;
right: 15px;
top: 60px;

}

.menu-profile-nonauth__container,
.menu-profile-nonauth__buttons ,
.menu-profile-auth__container,
.menu-profile-auth__buttons

{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
}

.menu-profile-nonauth__title,
.menu-profile-auth__title

{
  top: 5px;
  position: relative;
  font-family: Inter;
  font-size: 15px;
  font-style: normal;
  line-height: 20px;
  font-weight: bold;
}

.menu-profile-nonauth__title::after,
.menu-profile-auth__title::after
{
  position: absolute;
  display: block;
  content: '';
  width: 40px;
  height: 1px;
  background-color: #BB945F;
  top: 22px;
  left: 20px;
}

.menu-profile-nonauth__buttons button,
.menu-profile-auth__buttons button
{
border: none;
background-color: transparent;
color: #000;
text-align: center;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px;
cursor: pointer;
}

.form-box   {
  position: relative;
}

.cross-login,
.cross-register {
  position: absolute;
  right: 20px;
  z-index: 2;
  background-color: transparent;
  outline: none;
  border: none;
  top: 5px;
}



.modal-login {
  display: none;
  margin-top: 50px;
  background-color: #FFFFFF;
  color:#000;
  border: 1px solid black;
  width: 250px;
  height: 262px;
}

.modal-login__container {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.menu-profile-nonauth.close,
.menu-profile-auth.close
{
  display: none;
}

.menu-profile-nonauth.open,
.menu-profile-auth .open
{
  display: block;
}

/* login form  */

.wrapper-login,
.wrapper-register
{
  margin-top: 20px;
  width: 250px;
  height: 262px;
  border: 1px solid black;
  margin: 0px auto;
}

.wrapper-register {
  width: 250px;
  height: 382px;
}

.input-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.register__container,
.form__container {
  display: flex;
  justify-content: column;
  flex-direction: column;
  gap: 15px;
  margin: 20px 25px;
}

.register__container {
  gap: 10px;
}

.form-box h2 {
color: #000;
text-align: center;
font-family: Forum;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 100% */
letter-spacing: 0.4px;
text-transform: uppercase;
margin-top: 10px;
margin-bottom: 10px;
}

.input-box input {
width: 200px;
height: 20px;
border-color:var(--color-beige);
}

.input-box label {
color: #000;
text-align: left;
align-self: flex-start;
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 133.333% */
letter-spacing: 0.3px;
}

.login-button,
.register-button {
width: 75px;
height: 30px;
border-radius: 2px;
border: 1px solid #0C0C0E;
background-color: transparent;
color: #0C0C0E;
text-align: center;
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 1px;
}

.log,
.reg {
color: #000;
text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.16);
font-family: Inter;
font-size: 10px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.login-link
{
 font-weight: bold;
 color: #0C0C0E;
}

.wrapper-login.close
 .wrapper-register.close
 {
  display: none;
}

.wrapper-login.open,
.wrapper-register.open {
  display: block;
  /* position: fixed; */
  /* top: 200px; */
  /* right: 300px; */
  z-index: 10;
  background-color: #FFFFFF;
  left: -100px;
}


.wrapper-login,
.wrapper-register {
  margin: 0 auto;
}


/* modal profile */

.modal-profile {
color: var(--color-black);
/*position: fixed;
top: 200px;
left: 100px;*/
width: 600px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
z-index: 10;
}

.modal-profile.open
{
  display: block;
}

.modal-profile.close
{
  display: none;
}

.modal-profile__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* position: relative; */
  margin: 25px auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.modal-profile__info-container
{
  margin: 25px auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

.modal-profile__user {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-black);
  width: 170px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 100px;
}

.modal-profile__user-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-data {
  display:flex;
  direction: row;
  gap: 20px;
}

.user-avatar {
  align-self: center;
  background-color: white;
  width: 80px;
  height: 80px;
  text-align: center;
  padding-top: 25%;
  color:#BB945F;
  }

.user-name
{
background-color: white;
width: 120px;
height: 30px;
text-align: center;
}














.modal-profile__info-container
{
  margin: 25px auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

.modal-profile__title {
color: #000;
text-align: center;
font-family: Forum;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 50% */
letter-spacing: 0.8px;
text-transform: uppercase;
}

.cross-profile
{
  background-color: transparent;
  border: none;
  outline: none;
  position: absolute;
  top: -30px;
  right: -180px;
}

.cards-number {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cards-number.number{
  color: var(--color-beige);
}

.rented-books,
.rented-books__names {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/*
.rented-books__names li {
color: #000;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: 2px;
text-transform: capitalize;
}


 /*
.cards-number p {
color: #0C0C0E;
text-align: center;
font-family: Inter;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}

*/




/* LIBRARY CARDS CONTAINER SECTION */
.library-card__container.after-log-in.close {
  display: none;
}

.library-card__container.after-log-in.open {
  display: block;
}

.library-card__container.close

{
  display: none;
}

.library-card__container.open

{
  display: block;
}

.button-inits.close {
  display: none;
}

.wrapper-modal {
  display: flex;
  justify-content: center;
  align-items:center;
  height: 100vh;
  width: 100%;
   position: absolute;
   top:0;
   left:0;
   background-color: rgba(0, 0, 0, 0.7);
   display: none;
   z-index: 5;
   backdrop-filter: blur(1px);
}

.wrapper-modal_open {
  display: flex;
}










































































































/* modal profile  */
/*
.modal {
  position: fixed;
  top: 100px;
  right: 0;
  width: 600px;
  height: 403px;
  border: 1px solid black;
  background-color: #fff;
}

.modal-left
{
  background-color: #000;
  width: 170px;
  height: 403px;
}

.modal-right-container
{
  display: flex;
  justify-content: column;
}

.modal-right-container-title
{
position: absolute;
top: 40px;
right: 200px;
color: #000;
text-align: center;
font-family: Forum;
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.8px;
text-transform: uppercase;
}

.modal-left-avatar {
  position: absolute;
  left: 45px;
  top: 139px;
  width: 80px;
  height: 80px;
  border: 1px solid var(--color-beige);
  color: var(--color-beige);
  background-color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-left-avatar-name
{
width: 120px;
height: 30px;
border: 1px solid black;
background-color: #fff;
position: absolute;
left: 25px;
top: 230px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

.modal-right-card
{
  position: absolute;
  top: 100px;
  right: 50px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}


.list-item
{
  color:#000;
  list-style-type: none;
}

.modal-right-container-subtitle
{

  top: 300px;
  right: 40px;
  color:#000;
}


.visit-flex
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shadow {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  display: none;
  top: 0;
  z-index: 2;
  background: rgba(41, 41, 41, 0.6);
}

.shadow-open {
  @media screen and (max-width: 767px) {
    display: block;
  }

.log-in-form
{
  width: 250px;
  height: 262px;
  border: 1px solid black;
}

.log-in-form__container {
  display: flex;
  flex-direction: row;
}

.log-in-popup
{
  position: fixed;
  top: 500px;
  left: 0;
  width: 80px;
  height: 115px;
  border: 1px solid black;
  background-color: pink;
}

.log-in-popup-container
  {
    display: flex;
    justify-content: column;
  }
  */