/* COMMON */
body {
  width: 70%;
  margin:2% 0 0 25%;
}
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: rgb(84, 112, 114);
  
}
a:hover {
  color: rgb(156, 40, 40);
  transition: 0.5s;
}

  a:checked {
  color: rgb(156, 40, 40);
}

/* HEADER------------------------------------------ */

header {
  background: rgba(208, 185, 71, 0.66);
  width: 20%;
  height: 100%;
  padding: 50px 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

nav li {
  font-size: 1.1rem;
  letter-spacing: 2px;
  line-height: 2;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}


/* BUCKET LIST -------------------------------- */
.bucket-list {
  text-align: right;
  position: absolute;
  bottom: 5%;
  right: 5%;
  letter-spacing: 2px;
  line-height: 2;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: rgb(84, 112, 114);
}

.bucket-list p {
  border-bottom: 1px solid whitesmoke;
}

/* MAIN---------------------------------------- */
.top-img {
  height: 77vh;
  width: 100%;
  position: relative;
  border-radius: 10px;
}

.top-title {
  position: absolute;
  left: 33%;
  top: 54%;
  font-size: 2rem;
  color: rgba(231, 228, 228, 0.861);
  font-family: 'Kiwi Maru', serif;
  letter-spacing: 2px;
}

.top-title p {
  font-size: 1.2rem;
font-family: 'Zen Kaku Gothic New', sans-serif;
}

.top-article {
  margin-top: 20px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  text-align: center;
  color: rgb(104,136,138);
}

.border1 {
  background: rgba(208, 185, 71, 0.66);
  width: 40%;
  height: 1px;
  right: 0;
  margin-top: 80px;
  margin-left: 65%;
}

.border2 {
  background: rgba(208, 185, 71, 0.66);
  width: 50%;
  height: 1px;
  right: 0;
  margin-bottom: 100px;
  margin-top: 5px;
  margin-left: 50%;
}

/* COUNTRIES ----------------------------------*/

.countries {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 25px;
}

.item-img {
  width: 100%;
  border-radius: 30px;
}

span img {
  width: 90px;
}

.item-title {
  font-size: 1.5rem;
  padding-top: 200px;
  margin:30px 130px 5px;
  font-family: 'Kiwi Maru', serif;
  color: rgb(104,136,138);
  width: 100%;
  min-width: 500px;
}

.item-title p {
  font-size: 0.8rem;
  margin-left: 150px;
}

.ams img,
.paris img,
.porto img,
.abu img{
  height: 180px;
  margin-bottom: 50px;
}

.cancun img,
.barse img{
  height: 200px;
  margin-top: 50px;
}

.porto img,
.abu img {
  margin-top: 20px;
}

.scroll {
  writing-mode: vertical-lr;
  color: rgb(208, 185, 71);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  padding: 200px 0 0 130px;
}

/* FOOTER-------------------------------------*/

footer {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  margin:  60px 0 10px;
  background: rgba(181, 179, 179, 0.16);
  padding: 30px;
  color: rgb(104,136,138);
  border-radius: 10px;
  width: 100%;
  
}

footer h2 {
  font-size: 1.2rem;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  margin-left: 30px;
  letter-spacing: 2px;
}

footer p {
  margin-left: 40px;
  font-size: 0.9rem;
}


@media screen and (max-width:600px) {

  body {
    width: 100%;
    margin: 0;
  }

  header {
  visibility: hidden;
  }

  .top-img {
    width: 100%;
    height: 50vh;
    border-radius: 0%;
  }

  .top-title {
    font-size: 1.3rem;
    top: 35%;
    left: 5%;
  }

  .top-title p  {
    font-size: 0.8rem;
  }

  .top-article {
    font-size: 0.8rem;
    width: 90%;
    margin-left: 15px;
    
  }

  .border1,
  .border2 {
    display: none;
  }

.countries {
  margin-top: 0;
  grid-template-columns:2fr;
}

.item-img {
  width: 100%;
}

.ams img,
.paris img,
.porto img,
.abu img,
.cancun img,
.barse img {
  height: 300px;
  border-radius: 0px;
  margin-bottom: 0px;
  margin-top: 0;
}

span img {
  width: 50px;
  margin-left: 10px;
}

.item-title {
  font-size: 1rem;
  padding: 0;
  margin:0;
  font-family: 'Kiwi Maru', serif;
  color: rgb(104,136,138);
  min-width: 0;
}

.item-title p {
  font-size: 0.7rem;
}

.scroll {
  display: none;
}


footer {
  margin:  50px 0 1px;
}

footer h2 {
  font-size: 1rem;
}

footer p {
  font-size: 0.7rem;
}
}