:root {
  --section-odd-color: #f9f9f9;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: aliceblue;
}

.top-header {
  /* display: flex; */
  /* justify-content: row; */
  background-color: bisque;
  justify-content: center;
  padding: 10px;
  width: 100%;
  /* height: 100px; */
  position: fixed;
  z-index: 1;
}

nav ul {
  list-style-type: none;
  display: flex;
  gap: 20px;
  justify-content: center;
  font-size: large;
}

nav ul li:focus {
  border-bottom: solid;
}

/* li a:focus {
  color: blue;
} */
body main[id="view-port-main"] {
  position: relative;
  top: 100px;
}

a {
  text-decoration: none;
}
section {
  min-height: 100px;
  width: 100%;
  scroll-margin-top: 100px;
  /* margin: 100px; */
  /* height: 30vh; */
}

section[id="home"] .intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: dashed;
}

table {
  width: 100%;
}

section:target header {
  /* background-color: aquamarine; */
}

section + section {
  border-top: solid;
  margin: 10px;
}

/* project-items {
} */

article {
  /* position: relative; */
  /* top: 100px; */
}
article header {
  position: sticky;
  top: 80px;
  /* border: solid blue; */
  background-color: #f9f9f9;
}

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

.project-items {
  cursor: pointer;
  border: solid;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
  min-width: 100px;
  min-height: 100px;
  box-shadow: 10px 10px 10px gray;
  background-color: aliceblue;
  transition: 0.5s 0.2s ease-in;
}
.project-items:hover {
  /* transform: rotate(10deg); */
  /* transform: scale(1.5); */
  /* transform: rotateY(10deg); */
}

.project-items:nth-child(odd) {
  transform: rotate(2deg);
}
.project-items:nth-child(even) {
  /* background-color: aqua; */
  transform: rotate(-2deg);
}

.project-items:active {
  transform: scale(0.9);
  /* transform: rotateY(10deg); */
}

.tag-container {
  font-size: x-small;
  list-style-type: none;
  gap: 10px;
  display: flex;
}

.tag-container li {
  border: 1px solid;
  padding: 2px;
  background-color: beige;
  border-radius: 4px;
}

table th:nth-child(1),
td:nth-child(1) {
  width: 10%;
}
td:nth-child(2) {
  width: 20%;
}
td:nth-child(3) {
  width: 50%;
}
td:nth-child(4) {
  width: 20%;
}

table tr:nth-child(odd) {
  background-color: beige;
}

table tr:only-child {
  background-color: bisque;
}

#scroll-to-top {
  background-color: gray;
  position: sticky;
  bottom: 10px;
  right: 0px;
  /* right: 10px; */
}