body {
  background: orange;
  color: white;
  font-family: 'Silkscreen';
  margin: 0 200px;
}

header {
  background-image: url('img/header.png');
  background-size: auto 140%;
  background-position: center;
  height: 150px;
  margin: 20px 20px 0;
  border-radius: 50px 50px 0 0;
  border: 2px dashed white;
}

header:hover {
  cursor: pointer;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: white;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, orange 0%, #ffcc00 50%, orange 100%);
  border: 2px solid white;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #e68a00 0%, orange 50%, #e68a00 100%);;
}

.nav {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  font-weight: bolder;
}

.nav p {
  font-weight: normal;
}

.nav button {
  background-color: orange;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-family: inherit; 
  border: 2px dashed white;
  box-shadow: 2px 2px 0 #003344, -2px -2px 0 orange;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s;
}

.nav button:hover {
  background-color: #ffd633;
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 4px 4px 0 #003344, -2px -2px 0 #ffd633;
}

.three-column-layout {
  display: flex;
  gap: 10px;
  padding: 20px;
  align-items: flex-start;
  color: black;
}

.right, .left {
  flex: 1;
}

.middle {
  flex: 2.5;
}

.intro, .links, .hobby-container, .stats-container, .img-container, .rn-container, .music, .ann, .sticky-note, .nav, .coffee, .clicker-container, .guestbook {
  background-color: white;
  padding: 15px;
  box-shadow: 2px 6px 2px #e69500;
}

.intro, .hobby-container, .rn-container, .img-container, .sticky-note, .nav, .links, .ann, .music, .coffee {
  margin-bottom: 10px;
}

.intro {
  transform: rotate(0.5deg);
}

.img-container {
  transform: rotate(-0.5deg);
}

.abtme {
  width: 100%;  
}

.ann {
  text-align: center;
}

.ann span:hover {
  cursor: pointer;
  text-decoration: underline;
}

.ann img {
  width: 100%;
}

.ann img:hover {
  cursor: pointer;
}

.sticker-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

.sticker {
  width: 80%;
  display: block;
  transition: transform 0.1s ease-in-out;
}

.sticker:hover {
  transform: scale(1.05);
}

h1, p, a {
  text-align: center;
}

p, a {
  font-size: small;
}

h1 {
  font-size: 24px;
}

a {
  color: white;           
  text-decoration: none;   
  cursor: pointer; 
}

a:hover {
  text-decoration: underline;       
}

.status {
  background-color: orange;
  padding: 10px;
  color: white;
}

.status-pixelbox p {
  margin: 0.6rem 0;
}

.status-pixelbox .highlight {
  color: orange;
}

.deco {
  display: flex;
  justify-content: center;
}

.rn-container img {
  margin-top: 10px;
  width: 70%;
}

.hobby-container {
    transform: rotate(0.5deg);
}

.hobby-stamps, .guestbook, .social-buttons-container, .coffee {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.stamp {
  font-family: 'Silkscreen';
  padding: 10px 16px;
  border: 2px dashed white;
  background-color: orange;
  color: white;
  box-shadow: 2px 2px 0 #003344, -2px -2px 0 orange;
  cursor: pointer;
  transition: transform 0.1s ease-in-out, box-shadow 0.2s;
}

.stamp:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 4px 4px 0 #003344, -2px -2px 0 orange;
}

.pink {
  background-color: #ff99cc;
  box-shadow: 2px 2px 0 #003344, -2px -2px 0 #ff99cc;
}
.pink:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 4px 4px 0 #003344, -2px -2px 0 #ff99cc;
}

.blue {
  background-color: #99ccff;
  box-shadow: 2px 2px 0 #003344, -2px -2px 0 #99ccff;
}
.blue:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 4px 4px 0 #003344, -2px -2px 0 #99ccff;
}

.purple {
  background-color: #cc99ff;
  box-shadow: 2px 2px 0 #003344, -2px -2px 0 #cc99ff;
}
.purple:hover {
  transform: scale(1.05) rotate(-1deg);
  box-shadow: 4px 4px 0 #003344, -2px -2px 0 #cc99ff;
}

.stats-container {
  transform: rotate(-0.5deg);
}

.stat {
  display: flex;
  align-items: center;
}

.label {
  flex: 1;
}

.bar {
  flex: 3;
  height: 20px;
  border: 2px solid orange;
  position: relative;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: linear-gradient(135deg, orange 0%, #ffcc00 100%);
  box-shadow: 0 0 6px orange;
  transition: width 0.5s ease-in-out;
}

.percent {
  width: 90px;
  flex: 1;
  text-align: right;
}

.clicker-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.hobby {
  padding: 10px;
  background-color: orange;
  color: white;
  border-radius: 8px;
  margin: 0;
}

#click-btn {
  padding: 10px;
  background-color: orange;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Silkscreen';
  transition: 0.3s;
}

#click-btn:hover {
  transform: scale(1.05);
}

.sign {
  width: 100px;
  margin: auto;
  display: flex;
  padding: 20px;
}