body {
  font-family: Verdana, sans-serif;
  background: #667db6;
  color: whitesmoke;
  font-size: 11pt;
  background: -webkit-linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
  background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
}

header {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.21);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

h1 {
  margin-left: 8px;
  margin-top: 2px;
  letter-spacing: -1.5px;
  user-select: none;
  /* supported by Chrome and Opera */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}

a {
  text-decoration: none;
  color: whitesmoke;
}

img {
  border-radius: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  display: inline;
}

.images {
  height: 150px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
}

.main {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.21);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  margin-top: 200px;
  width: 80%;
  margin-left: 10%;
  border-radius: 20px;
}
.project {
  /* From https://css.glass */
  background: rgba(255, 255, 255, 0.21);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  margin-top: 50px;
  width: 80%;
  margin-bottom: 50px;
  margin-left: 10%;
  min-height: 200px;
  border-radius: 20px;
}

.project a {
  margin: 2px;
  display: inline-block;
}

.project svg {
  vertical-align: middle;
  margin-top: -8px;
}

.circle-green {
  z-index: -1;
  position: relative;
  background: rgba(255, 255, 255, 0.21);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 150px;
  opacity: 80%;
  margin-left: calc(10% - 40px);
  margin-top: -450px;
  height: 150px;
  background-color: rgb(115, 226, 111);
}
.circle-purple {
  z-index: -1;
  position: relative;
  background: rgba(255, 255, 255, 0.21);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 150px;
  opacity: 80%;
  margin-left: calc(90% - 100px);
  margin-top: 160px;
  height: 150px;
  background-color: rgb(170, 111, 226);
}

.github-icon {
  position: fixed;
  color: whitesmoke;
  margin-left: calc(100% - 40px);
  margin-top: -52px;
  cursor: pointer;
}
.linkedin-icon {
  position: fixed;
  color: whitesmoke;
  margin-left: calc(100% - 80px);
  margin-top: -52px;
  cursor: pointer;
}

p {
  margin-left: 10px;
  color: whitesmoke;
  margin-right: 10px;
}

::selection {
  background: #2191ce;
}
::-moz-selection {
  background: #2191ce;
}

.project-title {
  margin-top: 5px;
  color: whitesmoke;
  margin-left: 20px;
}