@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Nunito", serif;
}

/*-----------Main menu--------------*/
.topnav {
  background-color: #f80;
  border-radius: 0.5rem;
}

.topnav a {
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

.dropbtn {
  background-color: inherit;
  padding: 16px;
  color: #f2f2f2;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  list-style-type: none;
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

@media (max-width: 1000px) {
  .topnav {
      overflow: hidden;
  }

  .topnav a {
      float: left;
      display: block;
  }

  .topnav a:not(:first-child),
  .dropdown .dropbtn {
      display: none;
  }

  .topnav a.icon {
      float: right;
      display: block;
  }

  .topnav.responsive {
      position: relative;
  }

  .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
  }

  .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      color: #fff;
  }

  .topnav.responsive .dropdown {
      float: none;
  }

  .topnav.responsive .dropdown-content {
      position: relative;
      min-width: 496px;
      border-radius: 0.5rem;
      background-color: inherit;
  }

  .dropdown-content li {
      max-width: 473px;
      border-bottom: 1px solid #fafafa;
  }

  .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
  }
}

/* ----------Gallery images----------- */
.container {
  width: 100%;
}

.wraper {
  width: 90%;
  margin: 0 auto;
}

.uploadFile{
    background-color: #fff;
    width: 60%;
    position: relative;
    margin: 50px auto;
    padding: 50px 20px;
    border-radius: 5px;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.2);
}

input[type="file"]{
  display: none;
}

label {
  display: block;
  position: relative;
  background-color: #025bee;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 18px 0;
  margin: auto;
  border-radius: 5px;
}

#num-of-files{
  text-align: center;
  margin: 20px 0 30px 0;
}

#list-images{
  width: 90%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
}

#list-images > li{
  height: 246px;
  grid-column-end: span 2;
  grid-row-end: span 2;
}

#list-images > li > img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.caption{
  padding: 15px;
  text-align: center;
  overflow-wrap: break-word;
  color: #000;
}

#list-images > a > img{
  width: 100%;
}

@media (max-width: 600px){
  .uploadFile{
    width: 100%;
  }
  label{
    padding: 13px 0;
  }
  #list-images > a{
    width: 100%;
  }
}