html {
  height: 100%;
  width: 100%;
  background-color: #8DCFEC;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

p {
  font-size: 25px;
}

ul { /**#h (For when I ctrl+F)**/
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #d8d3e9;
  border: 3px solid #1aa7ec;
  overflow-y: hidden;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: #C41717;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #9243d9;
  transition: 0.2s ease-in-out;
  color: #fff;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1aa7ec;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a { /**#hed (For when I ctrl+F)**/
  color: light #C41717;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #9243d9;
}

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

a {
  font-size: 25px;
}

hr {
  border: 2px solid #1aa7ec;
}

#unfixed {
  position: fixed;
  bottom: 0;
  right: 0;
  border: 3px solid #1aa7ec;
  opacity: .5;
}

h1 {
  font-size: 45px;
}

#gr {
  border: 3px solid green;
}

#search-results {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 200px; 
    display: none;
    z-index: 1;
    width: 100%;
}

#search-results a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: #333;
}

#search-results a:hover {
    background-color: #f2f2f2;
}

#search-results.show {
    display: block;
}

#search {
  height: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#long {
  font-size: 55px;
}

img {
  max-width: 100%;
}

#coolImg {
  background: radial-gradient(circle at bottom left, transparent 15px, #b4a078 16px) bottom left, 
                radial-gradient(circle at top left, transparent 15px, #b4a078 16px) top left, 
                radial-gradient(circle at top right, transparent 15px, #b4a078 16px) top right, 
                radial-gradient(circle at bottom right, transparent 15px, #b4a078 16px) bottom right;
    background-size: 51% 51%;
    background-repeat: no-repeat;
}

a:hover {
  color: darkgoldenrod;
  background-color: green;
}


#cookie-popup {
  display: none;
  position: fixed;
  bottom: 0;
  left: 15%;
  right: 15%;
  width: 70%;
  background-color: #333;
  color: #fff;
  padding: 1px;
  text-align: center;
  opacity: .7;
  border-radius: 15px;
  z-index: 1000;
}

#ok-button {
  background-color: #f2f2f2;
  color: #333;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

#ok-button:hover {
  background-color: #ddd;
  color: #333;
}

body {
  background-color: #8DCFEC;
  color: #000;
  transition: background-color 0.5s;
  font-family: 'Quicksand', sans-serif;
}

.dark-theme {
  background-color: #1a1a1a;
  color: #fff; 
  outline: 150px solid #1a1a1a;
}

.dark-theme a{
  color: #66b2ff;
}

.dark-theme .dropdown-content {
  background-color: #1a1a1a;
  color: white;
}

.dark-theme figcaption {
  color: white;
}

body {
  transition: background-color 0.5s, color 0.5s;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
}

.neon-text {
    font-size: 36px;
    color: #1a1a1a;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    animation: neon-glow 3.5s ease-in-out infinite;
}

.dark-theme .neon-text {
  font-size: 36px;
  color: #fff;
  text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
  animation: neon-glow 3.5s ease-in-out infinite;
}

@keyframes neon-glow {
    0%, 100% {
        text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    }
    50% {
        text-shadow: none;
    }
}

#center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#black a{
  color: #333333;
}

figure {
  margin: 0;
  padding: 0;
  text-align: center;
}

figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

#u {
  list-style:none;
  width:100%;
}

#mobile img {
  width: 100%;
  height: auto;
  display: none;
}

#computer img {
  width: 43%;
  margin: 7px;
  border: 2px solid black;
}

@media only screen and (max-width: 767px) {
    #mobile img {
        display: block;
    }

    #mobilesmall {
      font-size: 2px !important;
      
    }

    #computer img {
        display: none;
    }
}

#mobileBox {
  width: 100%;
  height: auto;
  display: none;
}

#computerBox {
  width: 43%;
  margin: 7px;
  border: 2px solid black;
}

@media only screen and (max-width: 767px) {
    #mobileBox {
        display: block;
    }

    #computerBox {
        display: none;
    }
}

#theme-icon {
  font-size: 15px;
}

#form {
  border: 2px solid blueviolet;
}

#countdown-box {
    width: 100%;
    margin: auto;
    padding: 59px 29px;
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset, 0 .3em 1em rgba(0, 0, 0, 0.12);
    font: 150%/1.6 Baskerville, Palatino, serif;
    color: white !important;
    text-align: center;
  }

  #countdown-box, #countdown-box > div::before {
    background: url("https://raw.githubusercontent.com/ahujaesh/ahujaesh.github.io/main/photos/city-night.webp") fixed 0 / cover;
  }


  #countdown-box > div::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    filter: blur(10px);
    margin: -30px;
  }

  #mobile-countdown-box {
    width: 70%;
    margin: auto;
    padding: 59px 29px;
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset, 0 .3em 1em rgba(0, 0, 0, 0.12);
    font: 150%/1.6 Baskerville, Palatino, serif;
    color: white !important;
    text-align: center;
  }

  #mobile-countdown-box, #mobile-countdown-box > div::before {
    background-color: #B4A078;
  }

  #mobile-countdown-box > div::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    filter: blur(10px);
    margin: -30px;
  }

  #circle-section {
    width: 100%; height: 529px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 500;
  }

  #circle-section a {
   font-size: 14px;
  }

  .path {
    width: 300px; height: 300px;
    border-radius: 50%;
    margin: 100px auto;
    position: relative;
    display: flex;
  }

  .avatar {
    width: 50px;
    position: absolute;
    top: 124px; left: 124px;
    animation: circular-smooth-spin 7.5s infinite linear;
    animation-play-state: running;
    z-index: 500;
  }

  .avatar > span {
    font-weight: 500;
    position: absolute;
    white-space: nowrap;
    top: -50%; left: 50%;
    padding: 3px 12px;
    opacity: 0;
    transform: scale(0);
    transition: opacity, transform .8s;
    transform-origin: 0 bottom;
  }

  .avatar > img {
    width: inherit;
    border-radius: 50%;
    overflow: hidden;
  }

  .path:hover .avatar {
    animation-play-state: paused;
  }

  .path:hover .avatar > span {
    opacity: 1;
    transform: scale(1);
    transition: opacity, transform .8s;
  }
  .avatar:nth-of-type(2){
    animation-delay: -1.25s;
  }

  .avatar:nth-of-type(3){
    animation-delay: -2.5s;
  }

  .avatar:nth-of-type(4){
    animation-delay: -3.75s;
  }

  .avatar:nth-of-type(5){
    animation-delay: -5s;
  }
  .avatar:nth-of-type(6){
    animation-delay: -6.25s;
  }

  @keyframes circular-smooth-spin {
    from {
      transform: rotate(0turn) translateY(-124px) rotate(1turn)
    }
    to {
      opacity: 1;
      transform: rotate(1turn) translateY(-124px) rotate(0turn)
    }
  }

  #alt-circle-section {
    display: none;
  }

  @media only screen and (max-width: 767px) {
    #alt-circle-section {
        display: block;
    }

    #circle-section {
        display: none;
    }
  }

  .orbit-spinner, .orbit-spinner * {
    box-sizing: border-box;
  }

  .orbit-spinner {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    perspective: 800px;
    display: inline-block;
  }

  .orbit-spinner .orbit {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .orbit-spinner .orbit:nth-child(1) {
    left: 0%;
    top: 0%;
    animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
    border-bottom: 3px solid #ff1d5e;
  }

  .orbit-spinner .orbit:nth-child(2) {
    right: 0%;
    top: 0%;
    animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
    border-right: 3px solid #ff1d5e;
  }

  .orbit-spinner .orbit:nth-child(3) {
    right: 0%;
    bottom: 0%;
    animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
    border-top: 3px solid #ff1d5e;
  }

  @keyframes orbit-spinner-orbit-one-animation {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }

  @keyframes orbit-spinner-orbit-two-animation {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }

  @keyframes orbit-spinner-orbit-three-animation {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }

  .button-blue {
    background-color: #1aa7ec;
    color: #fff;
    padding: 10px 20px;
    border: 2px solid #1aa7ec;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
  }

  .button-blue:hover {
    background-color: #155a8a;
    color: #fff;
  }
