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

body {
  background-image: url("images/background.gif");
  background-repeat: repeat;
  font-family: "VT323", monospace;
  color: white;
}

div {
  display: block;
}

.wrapper {
    width: 65rem;
    background: #202020;
    margin: auto;
    margin-bottom: 1rem;
    padding: 1.2rem;
    box-shadow: 0 0 1.2rem #000000;
}

.header {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
  gap: 1rem;
}

.profile-title {
  font-weight: 600;
  font-size: 3rem;
}

.profile-description {
  margin-top: 1rem;
  font-size: 1.2rem; 
}

.header-text {
  width: 60%;
}

.avatar {
  width: 15%
}

.avatar img {
  width: 100%;
}

.main-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.showcases {
  flex-direction: column;
  width: 70%;
}

.artwork-showcase {
  background-color: #111111;
  padding-bottom: 2rem;
  margin-bottom: 1rem;
}

.showcase-header {
  background-color: #080808;
  padding: 0.5rem;
  font-size: 1.5rem;
}

.grid-container {
  display: grid;
  padding: 1.2rem;
  gap: 1rem;
  grid-template-columns: 1rem, 1rem, 1rem, 1rem;
  grid-template-rows: 1rem, 1rem, 1rem;
  grid-template-areas:
    "box-1 box-1 box-1 box-2"
    "box-1 box-1 box-1 box-3"
    "box-1 box-1 box-1 box-4";
}

.grid-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sub-artwork img {
  width: 85%;
}

.activity-container {
  overflow: hidden;
  white-space: nowrap;
  padding: 1.2rem;
  background-color: #111111;
  margin-bottom: 1rem;
}

.scrolling {
  animation: marquee 15s linear infinite;
  display: inline-block;
  padding-right: 10px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to { 
    transform: translateX(-50%);
  }
}


.navbar-container {
  width: 30%;
  height: 50%;
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  background-color: #111111;
  padding: 1.5rem;
}

.navbar {
  margin-top: 2rem;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: 1.5rem;
}

a {
  color: #ffffff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.in-game-text {
  font-size: 1.7rem;
}

span {
  color: #8CB53A
}

.friend {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin: 1rem 0;
  color: #818181;
  font-size: 1rem;
}

#online {
  color: #57CBDE;
}

#online img {
  border-color: #57CBDE;
}

.friend img {
  width: 20%;
  border: 0.15rem;
  border-style: solid;
  border-color: #818181;
}

iframe {
  width: 100%;
  height: 40rem;
  border: 0;
}