@media (max-width: 768px) {
  body {
    font-size: 14px; /* Adjust base font size for readability */
  }

  .bucket, .random-fact, .special, .page-marker, .look-top, .item button, .discover button {
    font-size: 20px; /* Adjust font size for key elements */
  }

  .spacer {
    height: 30px; /* Reduce spacing */
  }

  .spacer2 {
    height: 300px; /* Reduce spacing */
  }

  .random-fact-container, .bucket-container {
    flex-direction: column; /* Stack elements vertically */
    padding: 0 15px; /* Add some padding */
  }

  .image-container {
    justify-content: center; /* Center-align images */
    margin-right: 0; /* Remove right margin */
  }

  .random-fact-image {
    margin: 0 auto; /* Center-align and remove margin */
    width: 80%; /* Adjust image size */
    height: auto; /* Maintain aspect ratio */
  }

  .nav--list {
    flex-direction: column; /* Stack navbar items vertically */
    align-items: center; /* Center-align items */
  }

  .item, .logout, .discover {
    margin: 5px 0; /* Adjust margin for nav items */
    width: auto; /* Allow items to fit content */
  }
}


body {
    color: #1faa50;
    font-family: Spotify;
    background-color: #373737;
}

@font-face {
    font-family: Spotify;
    src: url(../fonts/GothamMedium.ttf);
}
@font-face {
  font-family: Winter;
  src: url(../fonts/epkyouka.ttf);
}

.spacer {
  height: 90px;
}

.spacer2{
  height: 700px;
}

.bucket-container{
  display: flex;
}

.bucket{
  color: white;
  font-size: 40px;
  margin-left: 20px;
}

.random-fact-container {
  display: flex;
  text-align: center;
  justify-content: space-between;
  color: #fff;
}

.random-fact{
  text-align: start;
  margin-top: 50px;
  font-size: 40px;
  padding-left: 30px;
}

.special{
  color: #1faa50;
  font-size: 40px;
  text-shadow: 2px 2px 4px #000;
}

.image-container{
  display: flex;
  justify-content: flex-end;
  margin-right: 300px;
}

.random-fact-image{
  margin-left: 100px;
  border: rgba(76, 140, 174, 0.603) 2px solid;
  box-shadow: rgb(50 159 163) 0px 10px 30px 10px;
  width: 340px;
  height: 340px;
}

.page-marker{
  display: flex;
  color: #ffffffaf;
  font-family: Winter;
  font-size: 40px;
  margin-left: 30px;
  margin-bottom: 20px;
  font-style: italic;
  position: fixed;
  bottom: 0;
}

.look-top{
  color: #ffffffaf;
  font-family: Spotify;
  font-size: 26px;
  margin-left: 1050px;
  margin-bottom: 20px;
  font-style: italic;
  position: fixed;
  bottom: 0;

}

/* NAV BAR CSS */

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

.container {
  justify-content: center;
  align-items: center;
}

.welcome{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 80px;
}

.weltext{
  font-size: 24px;
  color: #ffffffaf;
}

.friend{
  color: #1faa50;
  text-shadow: 2px 2px 4px #000;
}


nav {
  display: flex;
  align-content: center;
  background: #1a1a1a;
  box-shadow: rgba(31, 170, 80, 0.8) 0px 15px 20px -5px;
  border-bottom:rgba(30, 112, 64, 0.493) 3px solid;
}
nav.navbar{
  display: flex;
  justify-content: space-between
}

.logo{
  display: flex;
  height: 75px;
  width: 75px;
}


.nav--list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.item {
  position: relative;
  width: 100px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  cursor: pointer;
  margin: 0 10px;
  border: 2px solid #f2c75c;
  overflow: hidden;
}

.logout{
  position: relative;
  width: 100px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  cursor: pointer;
  margin: 0 10px;
  border: 2px solid rgb(50 159 160);
  overflow: hidden;
}

.logout a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  width: 140px;
  height: 40px;
  text-transform: uppercase;
  color: rgb(50 159 160);
  z-index: 10;
  text-decoration: none;
  transition: color 200ms ease;
}

.logout button{
  font-size: 16px;
  text-transform: uppercase;
  color: rgb(50 159 160);
  z-index: 10;
  text-decoration: none;
  transition: color 200ms ease;
  background: none;
  border: none;
}

.logout:hover a {
  color: #003b49;
}

.logout:hover button {
  color: #003b49;
}

.logout:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  transform: skew(30deg);
  background: rgb(50 159 160);
  transition: width 400ms ease;
}

.logout:hover:before {
  width: 120%;
}

.item:nth-child(6){
  border: 2px solid green;
  color: green;
}

.item a.log{
  color: rgb(16, 189, 16);
}

.item a.logout{
  color: rgb(183, 16, 16);
}

.item a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  width: 140px;
  height: 40px;
  text-transform: uppercase;
  color: #f2c75c;
  z-index: 10;
  text-decoration: none;
  transition: color 200ms ease;
}

.item button {
  font-size: 16px;
  text-transform: uppercase;
  color: #f2c75c;
  z-index: 10;
  text-decoration: none;
  transition: color 200ms ease;
  background: none;
  border: none;
}

.item:hover a {
  color: #003b49;
}

.item:hover button {
  color: #003b49;
}

.item:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  transform: skew(30deg);
  background: #f2c75c;
  transition: width 400ms ease;
}

.item:hover:before {
  width: 120%;
}

.item:nth-child(2):before {
  transform: skew(-20deg);
}

.item:nth-child(3):before {
  transform: skew(0deg);
}

.item:nth-child(4):before {
  transform: skew(25deg);
}

.item:nth-child(6):before {
  width: 180px;
  height: 0%;
  bottom: 0px;
  transition: height 400ms ease;
  background: #1faa50;
}

.item:nth-child(6):hover:before {
  height: 100%;
}




/* EVERYTHING .welcome_back IS REACT TEST WORK */

/* .welcome-back button:hover {
    color: #fff;
    background: #000;
  }
  .welcome-back > p {
    font-size: 1.2em;
    text-align: center;
    margin: 0 0 25px;
    color: #980000;
  }
  .welcome-back p.downloading {
    font-size: 2em;
    color: #333;
  }

  .welcome-back {
    margin: 35px auto;
    background: #ccc;
    border-radius: 12px;
    padding: 25px;
  }
  .welcome-back h2 {
    margin: 0 0 35px;
    text-align: center;
    font-size: 2.5em;
    font-weight: normal;
  }
  .welcome-back button {
    font-size: 2em;
    background: #20232a;
    color: rgb(97, 218, 251);
    border: none;
    padding: 15px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    cursor: pointer;
    display: block;
    border-radius: 12px;
    transition: .3s;
  }
 */


 .discover{
  position: relative;
  width: 100px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
  cursor: pointer;
  margin: 0 10px;
  border: 2px solid #f2c75c;
  overflow: hidden;
}

.discover a{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  width: 140px;
  height: 40px;
  text-transform: uppercase;
  color: #f2c75c;
  z-index: 10;
  text-decoration: none;
  transition: color 200ms ease;
}

.discover button{
  font-size: 16px;
  text-transform: uppercase;
  color: #f2c75c;
  z-index: 10;
  text-decoration: none;
  transition: color 200ms ease;
  background: none;
  border: none;
}

.discover:hover a {
  color: #003b49;
}

.discover:hover button {
  color: #003b49;
}

.discover:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  transform: skew(30deg);
  background: #f2c75c;
  transition: width 400ms ease;
}

.discover:hover:before {
  width: 120%;
}