/* for scrollbar */
/* width */
::-webkit-scrollbar {
  width: 0.625em;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 0.625em;
  background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: blue;
  border-radius: 0.625em;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: red;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

/* for webpage */
body {
  background: linear-gradient(45deg, #000000, #000000, #0ff, #000000);
  background-size: 400% 400%;
  animation: gradientAnimation 20s ease infinite;
  color: white;
  font-family: Helvetica, Arial, Georgia, Tahoma, Roboto;
  font-weight: 520;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* Ensure the body takes at least the full viewport height */
}

@keyframes gradientAnimation {
  0% {
      background-position: 0% 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0% 50%;
  }
}

p {
  text-align: center;
}

a:visited {
  color: currentColor;
}

a:hover {
  color: red;
  text-decoration: underline;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

#navbar {
  background-color: blue;
  position: fixed;
  top: -50px;
  /* Hide the navbar 50 px outside of the top view */
  width: 100%;
  /* Full width */
  transition: top 1s;
  /* Transition effect when sliding down (and up) */
  background: linear-gradient(45deg, #00ff08, #0ff, #fbff00, #0ff);
  background-size: 400% 400%;
  animation: gradientAnimation 20s ease infinite;
}

/* Style the navbar links */
#navbar a {
  float: left;
  display: block;
  color: red;
  text-align: center;
  padding: 0.9375em;
  text-decoration: dashed;
}

#navbar a:hover {
  background-color: yellow;
  color: black;
  text-decoration: underline;
}

header {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  position: relative;
  background-color: rgb(0, 33, 116);
  color: rgb(245, 196, 34);
  background: linear-gradient(45deg, #ff0000, #0ff, #1d3cec, #0ff);
  background-size: 400% 400%;
  animation: gradientAnimation 20s ease infinite;
}

.title {
  text-align: left;
  font-size: 50px;
  margin: 0px;
  padding: 0px;
}

nav {
  text-align: left;
  font-size: 1.5em;
  font-style: italic;
  position: relative;
}

#profile-picture {
  width: 10%;
  height: 95%;
  position: absolute;
  top: 0;
  right: 0;
  border: 2.5px solid rgb(245, 196, 34);
  border-radius: 50%;
  display: inline;
}

header a {
  text-decoration: underline;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
  color: rgb(245, 196, 34);
}

header a:hover {
  color: red;
  text-decoration: underline;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

main {
  text-align: center;
  font-size: 1.3em;
}

h2 {
  text-align: left;
  text-decoration: underline;
}

ul {
  text-align: left;
  list-style-type: none;
}

#forza-vid {
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  align-content: center;
  text-align: center;
}

#forza-vid:hover {
  background-color: rgb(0, 33, 116);
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  color: rgb(245, 196, 34);
}

#pi-hole {
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  align-content: center;
  text-align: center;
}

#pi-hole:hover {
  background-color: rgb(211, 3, 3);
  transition: 0.5s;
  color: rgb(72, 255, 0);
}

#excursion {
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  align-content: center;
  text-align: center;
}

#excursion a:hover {
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  color: rgb(237, 165, 44);
}

#excursion:hover {
  background-color: black;
  transition: 0.5s;
  color: white;
}

#excursion:hover a {
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  color: white;
}

#excursion:hover a:hover {
  transition: 0.5s;
  transition-timing-function: ease-in-out;
  color: red;
}

#pro-img {
  min-width: 25%;
  max-width: 50%;
  min-height: 50%;
  max-height: 50%;
}

#pro-vid {
  width: 75%;
  height: 75%;
}

footer {
  text-align: center;
  height: 12.5em;
  width: 100%;
  color: rgb(245, 196, 34);
  position: relative;
  background: linear-gradient(45deg, #ff0000, #0ff, #5d00ff, #0ff);
  background-size: 400% 400%;
  animation: gradientAnimation 20s ease infinite;
}

#adddr {
  align-content: flex-start;
  text-align: right;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-right: 1em;
  padding-bottom: 1em;
}

#copyright {
  text-align: left;
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 1em;
  padding-bottom: 1em;
}

h3 {
  text-align: left;
}

#conclusion {
  text-align: center;
}

#codecademy {
  align-content: center;
  transition: 0.5s;
  color: white;
  text-align: center;
}

#codecademy h3 {
  text-align: center;
}

#codecademy:hover {
  background-color: rgb(26 31 56);
  transition: 0.5s;
  color: rgb(96, 254, 246);
}

#codecademy-list {
  text-align: center;
}

#certificates {
  height: 11.5em;
  width: 15em;
}

#unity {
  align-content: center;
  text-align: center;
  transition: 0.5s;
}

#unity h3 {
  text-align: center;
}

#unity:hover {
  background-color: rgb(153, 154, 155);
  color: black;
}

#unity-list {
  text-align: center;
  align-content: center;
}

/* Dropdown part */

.dropdown {
  position: absolute;
  float: left;
}

.dropdown-content {
  display: none;
  min-width: 1em;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.7);
  z-index: 1;
  padding: 0.125em;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  transition: 0.5s;
}