/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
  --anti-fresh-white: #E7EBEB;
  --mantis: #6FBF74;
  --viridian: #498866;
  --teal: #14797E;
  --robin-egg-blue: #00C6CF;

  --primary-background-color: #faf8ff;
  --text-color: #242424;
  --primary-color: #068488;
  --secondary-color: #00c6cf;
  --third-color: #56babd;
  --grey-cyan: #324b4c;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--primary-background-color);
  color: var(--text-color);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

main {
  line-height: 1.8;
  max-width: 850px;
  margin: 0 auto;

}

#aboutmain {
  line-height: 1.8;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.aboutmeinfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px dashed var(--primary-color);
  border-radius: 25px;
  padding: 30px;
  margin: 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1.5;
  font-size: 14px;
}

.page-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding: 10px;
  -ms-flex-line-pack: center;
  align-content: center;
  font-weight: bold;
  font-size: 18px;
  border-bottom: 1px solid var(--primary-color);
}

.page-header__item {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 50px;
  flex: 0 1 50px;
}

.page-header__item:last-child {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: right;
}

.navigation-list {
  list-style-type: none;
}

.navigation-list li {
  display: inline-block;
}

.page-footer {
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

h1 {
  font-size: 30px;
  font-weight: 700;
  margin: 5px 0px;
}

h2 {
  font-size: 24px;
  font-weight: 700;
}

h3 {
  font-size: 18px;
  font-weight: 700;
}

p {
  margin: 5px 0;
}

.profile__portrait {
  float: left;
  max-width: 250px;
  width: 100%;
  height: auto;
  margin-right: 40px;
  border-radius: 50%;
}

.profile {
  max-width: 100%;
  margin: 100px 250px;
  border: 1px dashed var(--primary-color);
  border-radius: 25px;
  padding: 50px 0 50px 80px;

  /* background-color: rgba(0, 198, 207, 0.05); */
}

a {
  color: var(--grey-cyan);
  padding: 5px;
}

/* a:visited {
  color: var(--primary-color);
} */

a:hover,
a:focus {
  text-decoration: none;
  color: var(--secondary-color);
  border-radius: 10px;
}

a:active {
  color: var(--primary-background-color);
  outline: 2px solid var(--secondary-color);
}

#checkcode,
.backtop {
  text-decoration: none;
  color: var(--primary-color);
  border-radius: 10px;
  -webkit-box-shadow: 0 0 2px var(--primary-color);
  box-shadow: 0 0 2px var(--primary-color);
  padding: 4px;
}

#checkcode {
  margin-top: 50px;
}

.backtop {
  margin-right: 20px;
}

#checkcode:visited,
.backtop:visited {
  color: var(--secondary-color);
}

#checkcode:hover,
#checkcode:focus,
.backtop:hover,
.backtop:focus {
  text-decoration: none;
  color: var(--secondary-color);
  border-color: var(--secondary-color);
  border-radius: 10px;
  -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
  -webkit-box-shadow: 0 0 10px var(--secondary-color);
  box-shadow: 0 0 10px var(--secondary-color);
}

#checkcode:active,
.backtop:active {
  color: var(--primary-background-color);
  background-color: var(--secondary-color);
  outline: 1px solid var(--secondary-color);
  -webkit-transform: scale(1.03);
  -ms-transform: scale(1.03);
  transform: scale(1.03);
}

.navigation-list__item {
  color: var(--primary-color);
}

.navigation-list__item--active {
  text-decoration: none;
}

.navigation-list__item:hover,
.navigation-list:focus {
  outline: 2px solid var(--secondary-color);
  color: var(--secondary-color);
}

.navigation-list__item:active {
  color: var(--primary-background-color);
  outline: 2px solid var(--secondary-color);
  background-color: var(--secondary-color);
}

.gridlink {
  margin-top: 10px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
  outline: 2px solid var(--text-color);
  border-radius: 10px;
}

.gridlink:visited {
  color: var(--text-color);
  text-decoration: none;
  border-radius: 10px;
}

.gridlink:hover {
  outline: 2px solid var(--primary-background-color);
  color: var(--primary-background-color);
  font-weight: bolder;
}

.gridlink:active {
  color: var(--secondary-color);
  outline: 2px solid var(--secondary-color);
  border-radius: 10px;
}

button,
.button {
  border: none;
  font-family: inherit;
  background-color: var(--primary-color);
  color: var(--primary-background-color);
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity, background-color, color;
  -o-transition-property: opacity, background-color, color;
  transition-property: opacity, background-color, color;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  color: var(--primary-background-color);
  cursor: pointer;
  background-color: var(--secondary-color);
  opacity: 0.8;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 30px;
  margin: 0;
  width: auto;
  padding: 30px;

}

.grid__item {
  display: flex;
  flex-direction: column;
  justify-content: space-around; /* 确保子元素分布于顶部和底部 */
  background-color: var(--third-color);
  color: var(--primary-background-color);
  text-align: left;
  padding: 20px;
  border-radius: 25px;
  border: 2px solid var(--primary-color);
  opacity: 0.9;
  transition: transform 0.6s ease;
}

.grid__item a {
  color: var(--primary-background-color);
  font-weight: bold;
}

.grid__item img {
  height: 25px;
  width: 25px;
}

.grid__item img.screenshot {
  height: 100px;
  width: auto;
}

.grid__item:hover {
  -webkit-transform: scale(1.02);
  -ms-transform: scale(1.02);
  transform: scale(1.02);
}

.gridheader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 30px 20% 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px dashed var(--primary-color);
  border-radius: 25px;
  padding: 10px;
}

/* @media for responsive website */

@media all and (max-width: 500px) {
  .gridheader {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 3%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px dashed var(--primary-color);
    border-radius: 25px;
    padding: 10px;
  }
  .grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    width: 100%;
    grid-gap: 10px;
    padding: 30px 10px;
  }

  /* not necessary anymore due to "max-width: 750px"

  .grid__item:nth-child(1) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }
  .grid__item:nth-child(3) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }
  .grid__item:nth-child(6) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  } */
  h1 {
    font-size: 22px;
  }

  .profile {
    padding: auto;
    margin: 20px;
  }
}

@media all and (min-width: 500px) and (max-width: 750px) {
  .grid {
    -ms-grid-columns: 1fr 10px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 50px 20px;
  }

  /* not necessary anymore due to "max-width: 750px"

  .grid__item:nth-child(1) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }
  .grid__item:nth-child(3) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }
  .grid__item:nth-child(6) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  } */
  h1 {
    font-size: 22px;
  }

  .profile {
    padding: auto;
    margin: 20px;
  }
}

@media all and (max-width: 750px) {
  .grid {
    grid-gap: 10px;
  }

  .grid__item:nth-child(1) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }

  .grid__item:nth-child(3) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }

  .grid__item:nth-child(6) {
    grid-column: auto / auto;
    grid-row: auto / auto;
  }

  h1 {
    font-size: 22px;
  }

  .profile {
    padding: auto;
    margin: 40px;
  }
}

/* @keyframes for animation */

@-webkit-keyframes moving-right {
  from {
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }

  to {
    -webkit-transform: translate(50px, 20px);
    transform: translate(50px, 20px);
  }
}

@keyframes moving-right {
  from {
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }

  to {
    -webkit-transform: translate(50px, 20px);
    transform: translate(50px, 20px);
  }
}

#gear1 {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-name: moving-right;
  animation-name: moving-right;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes moving-up {
  from {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0);
  }

  to {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
}

@keyframes moving-up {
  from {
    -webkit-transform: translate(15px, 0);
    transform: translate(15px, 0);
  }

  to {
    -webkit-transform: translate(15px, 30px);
    transform: translate(15px, 30px);
  }
}

#gear2 {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-name: moving-up;
  animation-name: moving-up;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes color-change {
  0% {
    fill: var(--primary-background-color);
  }

  35% {
    fill: var(--primary-color);
  }

  100% {
    fill: var(--primary-background-color);
  }
}

@keyframes color-change {
  0% {
    fill: var(--primary-background-color);
  }

  35% {
    fill: var(--primary-color);
  }

  100% {
    fill: var(--primary-background-color);
  }
}

#gear3 {
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-name: color-change;
  animation-name: color-change;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes color-reverse {
  0% {
    fill: var(--primary-color);
  }

  35% {
    fill: var(--primary-background-color);
  }

  100% {
    fill: var(--primary-color);
  }
}

@keyframes color-reverse {
  0% {
    fill: var(--primary-color);
  }

  35% {
    fill: var(--primary-background-color);
  }

  100% {
    fill: var(--primary-color);
  }
}

#gear4 {
  -webkit-animation-duration: 15s;
  animation-duration: 15s;
  -webkit-animation-name: color-reverse;
  animation-name: color-reverse;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes moving-down {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
  }
}

@keyframes moving-down {
  from {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  to {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
  }
}

#cloudsvg,
#arrowsvg {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: moving-down;
  animation-name: moving-down;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

#aboutlist {
  list-style-type: none;
  text-align: center;
}

table,
th,
td {
  padding: 20px;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity, background-color, color;
  -o-transition-property: opacity, background-color, color;
  transition-property: opacity, background-color, color;
}

table {
  width: 60%;
  border-collapse: collapse;
}

th {
  background-color: var(--primary-color);
  color: var(--primary-background-color);
  border-bottom: 2px solid var(--text-color);
}

td {
  text-align: center;
}

.tablerow {
  border: 1px solid var(--text-color);
  -webkit-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: opacity, background-color;
  -o-transition-property: opacity, background-color;
  transition-property: opacity, background-color;
}

.tablerow:hover {
  color: var(--primary-background-color);
  background-color: var(--primary-color);
  font-weight: bolder;
  border: 1px solid var(--text-color);
  opacity: 0.6;
}

th.skillshead,
th.loehead {
  width: 22%;
}

th.yoehead {
  width: 16%;
}

.skillstable {
  text-align: left;
  border: 1px solid var(--text-color);
}

.leveltable {
  border: 1px solid var(--text-color);
}

/* rounding the top corners of the table */

th:first-of-type {
  border-top-left-radius: 10px;
}

th:last-of-type {
  border-top-right-radius: 10px;
}

.contactme {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-line-pack: justify;
  align-content: space-between;
  padding: 50px;
  margin: 50px 300px;
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  background-color: rgba(0, 198, 207, 0.05);
}

.contactsite {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;

  /* justify-content: space-between;
  align-content: flex-start; */
}

#contactdetails {
  width: 100%;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 30px;
  margin: 50px;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  background-color: rgba(0, 198, 207, 0.05);
  border: 1px solid var(--primary-color);
  border-radius: 10px;
}

#contact-form {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 50px;
  margin: 50px;
  background-color: rgba(0, 198, 207, 0.05);
  border: 1px solid var(--primary-color);
  border-radius: 10px;
}

form {
  font-weight: bold;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: wrap column;
  flex-flow: wrap column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0 30px;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

label {
  margin: 0;
}

input {
  width: 100%;
  padding: 12px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 0.5px solid var(--secondary-color);
  border-bottom: 2px solid var(--primary-color);
  border-radius: 5px;
  margin-bottom: 20px;
  background-color: var(--primary-background-color);
}

textarea {
  width: 100%;
  height: 150px;
  padding: 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 0.5px solid var(--secondary-color);
  border-bottom: 2px solid var(--primary-color);
  border-radius: 5px;
  background-color: var(--primary-background-color);
  resize: none;
}

input:focus,
textarea:focus {
  width: 100%;
  border: 2px solid var(--primary-color);
}

#contactdetails {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  padding: 50px;
}

.backtoplink {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  position: absolute;
  padding-bottom: 50px;
}

.textlink,
.textlink:focus,
.textlink:active {
  text-decoration: none;
  color: var(--text-color);
  font-weight: bold;
}
.textlink:hover {
  color: var(--primary-background-color);
  font-weight: bold;
}

.gridtext {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: left;
}