:root {
  --bg: #2D353D;
  --box: #848c8e;
  --text: #f1f2ee;
  --accent: #dcf763;
  --accent-soft: #CFDFBE;
}

body {
  background-color: var(--bg);
  color:  var(--text);
  font-family: Verdana, sans-serif;

}
a {display: inline-block;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  color: var(--accent-soft);
  font-weight: bold;
}
a:hover {
  color: var(--accent);
  text-shadow: 0 0 8px var(--box);
}

h1{
  color:  var(--accent);
  padding: 10px;
  width: 400px;
  font-weight: semi-bold;
}


.card {
  display: flex;
  align-items: center;
  gap: 30px;
  background-color: var(--bg);
  padding: 30px;
  border-radius: 20px;
  
}


.intro{
	background-color: var(--box);
	transition: transform 0.2s ease;
}
.intro p{
	color: var(--accent-soft);
	font-size: 20px;
	font-weight: bold;
}

.intro-image {
  width: 180px;
  border-radius: 20px;
}

.intro:hover {
  transform: translateX(10px);
}