body {
  margin: 20px;
  font-family: 'Courier New', Courier, monospace;
  background-color: #2b2b2b;
  color: #fff;
  user-select: none;
  background-image:url(img/lg/5.png);
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto); 
  gap: 18px; 
  max-width: 1300px; 
  margin: 0 auto;
}


.block {
  background: #2b2b2b;
  border: 2px solid #ffb347;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  animation: slideOut 0.7s ease forwards, borderGlow 5s linear infinite; 
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  will-change: transform;
  cursor: default;
  font-size: 0.9rem;
}

.block:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}


.time {
    grid-column: 1 / 2; 
    grid-row: 1 / 2; 
	text-align: center;
}

.return {
    grid-column: 1 / 5; 
    grid-row: 1 / 2; 
	text-align: center;
}

.date {
    grid-column: 2 / 3; 
    grid-row: 1 / 2; 
	text-align: center;
}

.weather {
    grid-column: 1 / 2; 
    grid-row: 2 / 3; 
	text-align: center;
}

.about {
    grid-column: 1 / 2;
    grid-row: 3 / 4; 
}

.project1 {
    grid-column: 1 / 2; 
    grid-row: 2 / 4; 
}

.project2 {
    grid-column: 2 / 3; 
    grid-row: 2 / 4; 
}

.project3 {
    grid-column: 3 / 4; 
    grid-row: 2 / 4; 
}

.skills {
    grid-column: 2 / 3; 
    grid-row: 3 / 4; 
	text-align: center;
}

.spotify {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
	text-align: center;
}

.projects {
    grid-column: 1 / 5; 
    grid-row: 4 / 6; 
    text-align: center;
}

.projects4 {
    grid-column: 1 / 5; 
    grid-row: 4 / 6; 
    text-align: center;
}

.copy {
    grid-column: 3 / 4; 
    grid-row: 3 / 4; 
    text-align: center;
}

.ds {
    grid-column: 3 / 4; 
    grid-row: 1 / 2; 
    text-align: center;
}

.tg {
    grid-column: 3 / 4; 
    grid-row: 2 / 3; 
    text-align: center;
}


h2 {
  margin-top: 0;
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
  font-weight: normal;
  color: #fff;
  font-size: 1.1rem;
}

.avatar {
  display: block;
  width: 100px; 
  height: 100px; 
  border-radius: 50%;
  margin: 10px auto;
  border: 2px solid #aaa;
}

ul {
  list-style-type: none;
  padding-left: 0;
  margin: 8px 0;
}

ul li {
  margin-bottom: 4px;
  color: #ааа;
}

.buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
}

button {
  background: #2b2b2b;
  color: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.1s ease; 
  font-family: monospace;
  font-size: 0.85rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
  background: #333;
  border-color: #999;
  color: #fff;
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 
}

.language {
  background: #171717;
  margin: 5px 0;
  padding: 5px 8px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: #fff;
  font-size: 0.95rem;
}


.all-skills {
  margin-top: 8px;
  padding: 8px;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 0.95rem;
  transition: background-color 0.3s ease;
}

.all-skills:hover {
  background: #ddd;
}

.statuson {
  font-weight: normal;
  font-size: 1.2rem;
  color: #00d9b1;
}

.statusoff {
  font-weight: normal;
  font-size: 1.2rem;
  color: #f00;
}


audio {
  width: 100%;
  outline: none;
}

audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  display: none !important; 
}

.track-title {
  margin-top: 6px;
  font-style: italic;
  font-size: 0.85rem;
  color: #fff;
  text-align: center;
}


body.dark-theme {
  background-color: #080808;
  color: #fff;
}

body.dark-theme .block {
  background: #080808;
  border: 2px solid #ffb347;
  animation: slideOut 0.7s ease forwards, borderGlow 5s linear infinite; 

}

body.dark-theme h2 {
  border-color: #555;
  color: #fff;
}

body.dark-theme ul li {
  color: #fff;
}

body.dark-theme button {
  background: #1a1a1a;
  color: #fff;
  border-color: #bbb;
}

body.dark-theme button:hover {
  background: #222;
  border-color: #999;
  color: #fff;
}

body.dark-theme .language {
  background: #171717;
  color: #fff;
}

body.dark-theme .status {
  color: #171717;
}

body.dark-theme .all-skills {
  background: #444;
  color: #eee;
}

body.dark-theme .all-skills:hover {
  background: #666;
}

body.dark-theme .track-title {
  color: #fff;
}

.gradient-skill {
    background: linear-gradient(90deg,rgba(13, 13, 13, 1) 12%, rgba(0, 62, 48, 1) 50%, rgba(3, 3, 3, 1) 90%);;
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease infinite;

      text-shadow:
      0 0 0px #00a857,
      0 0 10px #018a48,
      0 0 10px #006b37,
      0 0 40px #00522a;
    }
  .gradient-text {
    background: linear-gradient(270deg, #ff7e00, #ffb347, #ff7e00);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease infinite;


    text-shadow:
      0 0 0px #ff7e00,
      0 0 10px #ff7e00,
      0 0 10px #ffb347,
      0 0 40px #ffb347;
  }

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes borderGlow {
  0% {
    border-color: #ffb347; 
    box-shadow: 0 0 5px #ff7e00;
  }
  50% {
    border-color: #ff7e00; 
    box-shadow: 0 0 15px #ff7e00;
  }
  100% {
    border-color: #ffb347;
    box-shadow: 0 0 5px #ff7e00;
  }
}