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

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Ubuntu',sans-serif;
}

html {
  scroll-behavior: smooth;
}


a {
  text-decoration:none;
}

ul {
  list-style:none;
}

body {
  background-color:#212121;
  overflow-x:hidden;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:#000;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  z-index: 99999;
}

nav .logo {
  display: flex;
  align-items: center;
  margin: 0 24px;
  top:0;
}

nav .logo strong {
  color:#f00;
  font-weight:lighter;
}

.logo .menu-icon {
  display:flex;
  justify-content:center;
  color: #f00;
  font-size: 1.6rem;
  margin-right: 14px;
  cursor: pointer;
}
.logo .logo-name {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
}

.input-search {
  background-color: #fff;
  padding:0.2rem;
  border-radius: 25px;
  margin-right:2rem;
  
}

.input-search input {
  outline:none;
  border: none;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  width: 300px;
  padding: 0.5rem;
  border-radius:50%;
}

.input-search button {
  margin-right:0.2rem;
  padding:0.5rem;
  background-color:#f00; 
  color: #fff;
  border:1px solid #f00;
  border-radius: 50%;
  cursor: pointer;
}

.input-search button i {
  font-size:1.3rem;
  color:#fff;
}

.content-user {
  display:flex;
  align-items:center;
  margin-right:2rem;
}

.content-user img {
  display:flex;
  width:2rem;
  height:2rem;
  margin-right:0.5rem;
  border:solid 2px white;
  border-radius:50%;
  background-size:cover;
  align-items:center;
  
}

.user-title {
  color:red; 
  font-weight:400;
}


nav .sidebar {
  position:fixed;
  top: 0;
  left: -100%;
  height: 100%;
  width: 260px;
  padding: 20px 0;
  background-color: #000;
  box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  z-index:99999999;
}
nav.open .sidebar {
  left: 0;
  z-index: 99999;
}
.sidebar .sidebar-content {
  display: flex;
  height: 100%;
  margin-top:1rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 16px;
}


.sidebar-content ul li .input-search {
  display: flex;
  justify-content:center;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.sidebar-content li .input-search input {
  width: 100%;
  height: 2rem;
  font-size:1rem;
  outline:none;
}

.sidebar-content li .input-search  button {
  margin-right:0.3rem;
  border-radius:50%;
  cursor: pointer;
}

.sidebar-content .list {
  list-style: none;
}
.list .nav-link {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding: 14px 12px;
  border-radius: 8px;
  text-decoration: none;
}
.lists .nav-link:hover {
  background-color: #f00;
}
.nav-link .icon {
  margin-right: 14px;
  font-size: 1.6rem;
  color: #f00;
}
.nav-link .link {
  font-size: 16px;
  color: #bbb;
  font-weight: 400;
}
.lists .nav-link:hover .icon,
.lists .nav-link:hover .link {
  color: #fff;
}
.overlay {
  position: fixed;
  top: 0;
  left: -100%;
  height: 1000vh;
  width: 200%;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
nav.open ~ .overlay {
  opacity: 1;
  left: 260px;
  pointer-events: auto;
  z-index: 9999;
}

#main {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  flex-direction:row;
   margin-top:5rem;
  position:relative;
  margin-bottom:3.5rem;
  z-index:99;
}

.busca {
  color:#f00;
  display:flex;
  font-size:1.5rem;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  margin-top:5rem;
}


.movie {
  width:200px;
  margin:1rem;
  border-radius:4x;
  box-shadow:0.2px 4px 5px rgba(0,0,0,0.1);
  
  position:relative;
  overflow:hidden;
  background-color:#000;
  border-radius:4px;
  margin-top:0.5rem;
  margin-bottom:3rem;
  z-index:99;
}

.movie img {
  position:relative;
  width:100%;
  background-size:cover;
  align-items:center;
  object-fit:cover;
  border-left-top-radius:4px;
  border-right-top-radius:4px;
  z-index:90;
  transition:all 1s linear;
}

.movie img:hover {
  opacity:0.8;
  transform:scale(1.1);
}

#lang {
  position:absolute;
  display:flex;
  left:0.4rem;
  background-color:#f00;
  color:#fff;
  padding:0.4rem;
  border-radius:4px;
  font-size:0.8rem;
  z-index:99;
  margin-top:0.3rem;
  font-weight:400;
}

 #vote {
  position:absolute;
  background-color:#fc0;
  right:0.4rem;
  padding:0.4rem;
  margin-top:0.3rem;
  border-radius:4px;
  font-weight:bold;
  z-index:99;
}

.movie-info { 
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.6rem;  
}

.movie-info h3 {
  margin-top:0;
  color:#eeee;
  letter-spacing:0.1rem;
  font-weight:400;
  display:flex;
  justify-conten:center;
  align-item:center;
}

/* .film-date {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.5rem;
}

.film-date .data-release {
  background-color:#fc0;
  padding:0.2rem;
  color:#000;
  font-size:0.8rem;
  border-radius:4px;
  font-weight:bold;
} */



 #vote.white {
  color:#eeee;
}

 #vote.gray {
  color:#424242;
}

 #vote.red {
  color:#b71c1c;
}

.know-more {
  display:flex;
}

.know-more a {
  display:flex;
  justify-content:center;
  align-items:center;
}

.know-more .know-more-btn {
  align-items:center;
  justify-content:center;
  background-color:trtansparent;
  color:#f00000;
  padding:0.5rem 1rem;
  border-radius:4px;
  font-weight:bold;
  margin-right:0.5rem;
  border:2px solid #f00000;
  box-shadow:0.2px 4px 5px rgba(0,0,0,0.1);
}

.know-more {
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background-color:#000;
  max-height:100%;
  padding:1rem;
  transform:translateY(1001%);
  transition:transform 1s ease-in-out;
  z-index:999999;
}

.know-more a:hover {
  background-color:#f00000;
  color:#fff;
  transition:all 1s linear;
}


.movie:hover .know-more {
  display:flex;
  transform:translateY(0);
  align-items:center;
  justify-content:center;
}

#visible {
  width:40px;
  height:40px;
  display:flex;
  position:relative;
  justify-content:center;
  margin:0 auto;
  align-items:center;
  margin-bottom:5rem;
  background-color:transparent;
  z-index:200000;
  margin-top:1rem;
  transition:all 1s linear;
  
}


#visible button {
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  
  padding:1rem;
  border-radius:50%;
  background-color:transparent;
  border:2px solid #f00;
  cursor:pointer;
  padding:1rem;
  color:#eeee;
  font-weight:bold;
}

#visible button i {
  color:#eeee;
  font-size:1rem;
  font-weight:bold;
}

#visible button:hover {
 background-color:#f00;
 color:#eeee;
 border:2px solid #f00;
}
.footer {
  position:fixed;
  width:100%;
  bottom:0;
  left:0;
  right:0;
  background-color:#000;
  padding:1rem;
  margin-top:2rem;
  text-align:center;
  z-index:99;
}

.footer p {
  color:#fff;
  font-fize:0.8rem;
  margin:0 auto;
}

.footer strong {
  color:red;
}
 
 @media screen and (min-width:699px) {
    .movie-info {
      display:flex;
      align-items:center;
      justify-content:center;
      padding:1rem;
    }
    .movie-info h3 {
      color:#eeee;
      letter-spacing:0.1rem;
      font-weight:400;
      display:flex;
      justify-conten:center;
      align-item:center;
    }
 }

  @media screen and  (max-width: 699px) {
      header .navbar-menu {    
          display:none;
        }
        .search {
          display:none;
        }
        .movie  {
          Width:150px;
          display:flex;
          flex-direction:column;
          flex-wrap:wrap;
       }

       .movie-info {

        padding:1rem;
       }

        .movie-info h3 {
          font-size:14px;
          font-weight:lighter;
          color:#eeee;
          font-weight:400;
       }
        .movie-info span {
          padding:0.2rem;
          font-weight:bold;
          font-size:14px;
       }
        .know-more .know-more-btn {

          display:flex;
          width:100%;
          align-items:center;
          justify-content:center;
          z-index:999999;
       }
        .know-more a {
          font-weight:lighter;
          font-size:14px;
          text-align:center;
       }
      
        .footer {
          padding:0.5rem;
       }
        .footer p {
          font-size:13px;
       }
      }
  
  @media screen and (max-width:700px) { 
    .sidebar-content ul li .input-search {
      display:none;
    }
    .sidebar-content li .input-search input {
      display:none;
    }
    .sidebar-content li .input-search button {
      display:none;
    }
  }
      
    @media screen and (max-width:720px) {
      .input-search {
        display:flex;
      }
      .input-search input {
        display:flex;
      }
    }
      

  /* Medium devices (tablets, 768px and up) */
  @media screen and (max-width: 768px) { 
    header .navbar-menu {    
      display:block;
    }
    .sidebar-content ul li .input-search {
      display:flex;
      width:100%;
      height:3rem;
    }
    .sidebar-content li .input-search input {
      display:flex;
      Width:100%;
      height:100%
    }
    
    .sidebar-content li .input-search button {
      display:flex;
      height:2rem;
      padding:0.5rem;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      cursor:pointer;
    }
   
    .sidebar-content li .input-search button i {
      display:flex;
      align-items:center;
      font-size:14px;
    }
  }
   

  /* Large devices (desktops, 992px and up) */
  @media (min-width: 992px) { 
    
    .sidebar-content ul li .input-search {
      display:none;
    }
    .sidebar-content li .input-search  {
      display:none;
    }
  }

  /* X-Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) { ... }

  /* XX-Large devices (larger desktops, 1400px and up) */
  @media (min-width: 1400px) { ... }


  /* Desktop First i.e Larger to Smaller Devices */

  /* XX-Large devices (larger desktops) */
  /* No media query since the xxl breakpoint has no upper bound on its width */

  /* X-Large devices (large desktops, less than 1400px) */
  @media (max-width: 1399.98px) { ... }

  /* Large devices (desktops, less than 1200px) */
  @media (max-width: 1199.98px) { ... }

  /* Medium devices (tablets, less than 992px) */
  @media (max-width: 991.98px) { ... }

  /* Small devices (landscape phones, less than 768px) */
  @media (max-width: 767.98px) { ... }

  /* X-Small devices (portrait phones, less than 576px) */
  @media (max-width: 575.98px) { ... }