:root {
  --primary-color: #ff69b4;
  --accent-color: #ffe6fa;
  --shadow-color: #ff00aa;
  --background-color: #1a001a;
  --border-size: 1px;
  --spacing-size: 9px;
  --shadow-size: 8.5px;
  --line-width: 1px;
}

a:link {
  color: hotpink;
}

a:visited {
  color: hotpink;
}

a:hover {
  color: lightpink;
}

a:active {
  color: var(--accent-color);
}


body {
  background-color: #000000;
  color: var(--accent-color);
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  line-height: 1.25;
  flex-direction: column;
  align-items: center;
  display: flex;
  padding: 20px;
  font-smooth: none;
}

.all {
  width: 757.6px;
  height: fit-content;
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  padding-top: var(--spacing-size);
  padding-right: var(--spacing-size);
  padding-left: var(--spacing-size);
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 125px;
  margin-bottom: var(--spacing-size);
  box-sizing: border-box;
}

.sideheart {
  height: inherit;
  width: 125px;
  background-color: var(--background-color);
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.sideheart img {
  max-width: 90%;
  max-height: 90%;
}


.logo {
  width: 470px;
  height: inherit;
  background-color: var(--background-color);
  border: var(--border-size) solid var(--primary-color);
  text-align: center;
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--spacing-size);
  margin-right: var(--spacing-size);
  box-sizing: border-box;
}

.logo img {
  width: 65%;
  height: 65%;
}

nav {
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  width: 100%;
  height: 25px;
  text-align: center;
  justify-content: space-evenly;
  display: flex;
  align-items: center;
  background-color: var(--background-color);
  margin-bottom: var(--spacing-size);
  box-sizing: border-box;

}

.verticaldiv {
  background-color: var(--accent-color);
  width: var(--line-width);
  height: 100%
}
.horizontaldiv {
  background-color: var(--accent-color);
  width: 100%;
  height: var(--line-width);
}

.body {
  display: flex;
  justify-content: space-between;
  height: 400px;
  align-items: center;
  margin-bottom: var(--spacing-size);
}

.sidebar {
  width: 100px;
  height: inherit;
  border: var(--border-size) solid var(--primary-color);
  background-color: var(--background-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  box-sizing: border-box;
}

.sidebar img {
  width: 100%;
  image-rendering: pixelated;
}

.subbody {
  width: 520px;
  margin-top: var(--spacing-size);
  margin-bottom: var(--spacing-size);
  text-shadow: 0 0 10 #ff1493;
}

.welcome {
  width: 150px;
  height: 35px;
  background-color: var(--background-color);
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  margin-top: var(--spacing-size);
  box-sizing: border-box;
}

.bio {
  width: inherit;
  height: calc((400px - var(--spacing-size)) * 0.6);
  background-color: var(--background-color);
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  margin-bottom: var(--spacing-size);
  box-sizing: border-box;
  padding-left: 5px;
  padding-bottom: 5px;
  position: relative;
  overflow: hidden;
}

.beat {
  width: 150%;
  overflow: hidden;
  background: transparent;
  position: absolute;
  bottom: -25px;
  left: 0;
}

.beat svg {
  width: 200%;
  height: 100%;
  animation: moveHeartbeat 10s linear infinite;
}

.beat-path {
  stroke: var(--primary-color);
  stroke-width: var(--border-size);
  fill: none;
  filter: drop-shadow(0 0 6px var(--primary-color));
  opacity: 0.7;
}

@keyframes moveHeartbeat {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.subbio {
  width: inherit;
  height: calc((400px - var(--spacing-size)) * 0.4);
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  background-color: var(--background-color);
  box-sizing: border-box;
}

/*Works styles begin here*/

.works {
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  background-color: var(--background-color);
  box-sizing: border-box;
}

.works h2 {
  align-self: initial;
  justify-self: center;
  text-align: center;
}

.game {
  border: var(--border-size) solid var(--primary-color);
  box-shadow: 0 0 var(--shadow-size) var(--shadow-color);
  background-color: var(--background-color);
  box-sizing: border-box;
  justify-content: initial;
  align-items: center;
  text-align: center;
  margin-left: var(--spacing-size);
  margin-bottom: var(--spacing-size);
  margin-right: var(--spacing-size);
}

.game img {
  width: 100%;
  border-bottom: var(--border-size) solid var(--primary-color);
  box-sizing: border-box;
}