body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: #fff;
  background: #090f20;
  overflow-x: hidden;
}


/* NAVBAR */
.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: rgba(30, 199, 250, 0.11);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  width: 100%;
  box-shadow: 0 2px 15px #1ec7fa33;
  position: relative;
  z-index: 2;
  border-bottom: 1.5px solid #1ec7fa44;
  backdrop-filter: blur(6px);
}

.navbar li {
  position: relative;
  margin: 0 10px;
}

.navbar a {
  display: block;
  color: #1ec7fa;
  padding: 16px 22px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: none;
}

.navbar a.active {
  background: linear-gradient(90deg, #1ec7fa 60%, #2c5aa0 100%);
  color: #fff;
  box-shadow: 0 2px 14px #1ec7fa33;
}

.navbar a:hover:not(.active) {
  background: rgba(30, 199, 250, 0.2);
  color: #fff;
  box-shadow: 0 2px 10px #1ec7fa22;
}

.dropdown-menu {
  list-style-type: none;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(30, 199, 250, 0.10);
  min-width: 200px;
  box-shadow: 0 8px 24px #1ec7fa22;
  border-radius: 10px;
  z-index: 10;
  padding: 0;
  backdrop-filter: blur(7px);
}

.dropdown-menu li {
  margin: 0;
}

.dropdown-menu a {
  padding: 12px 20px;
  text-align: left;
  color: #1ec7fa;
  background: none;
  border-radius: 0;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}

.dropdown-menu a:hover {
  background: #1ec7fa;
  color: #11293c;
}

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

/* Main */
.main{
  margin:100px;
  padding:1px 16px;
  height:1000px;
}

/* BOX SHAPES & ANIMATIONS */
.div15 {
  width: 300px;
  height: 100px;
  background: rgba(30, 199, 250, 0.18);
  border: 2px solid #1ec7fa;
  box-shadow: 0 4px 22px #1ec7fa22;
  border-radius: 14px;
  transform: translate(50px,100px);
}

.div1, .div2, .div3, .div4 {
  background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%);
  border-radius: 14px;
  box-shadow: 0 2px 12px #1ec7fa44;
  margin-bottom: 30px;
  transition: width 2s, height 4s, transform 2s;
  border: none;
}

.div1 {
  width: 100px;
  height: 100px;
  transition: width 2s;
}
.div1:hover { width: 400px; }

.div2 {
  width: 100px;
  height: 100px;
  transition: width 2s, height 4s;
}
.div2:hover { width: 300px; height: 300px; }

.div3 {
  width: 100px;
  height: 100px;
  transition: width 3s;
  transition-delay: 1s;
}
.div3:hover { width: 300px; }

.div4 {
  width: 100px;
  height: 100px;
  transition: width 2s, height 2s, transform 2s;
}
.div4:hover {
  width: 400px;
  height: 400px;
  transform: rotate(180deg);
}

/* Centering */
.center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}

h1 {
  margin-bottom: 30px;
  color: #1ec7fa;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-shadow: 0 0 24px #1ec7fa55;
}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(90deg, #1ec7fa 80%, #2c5aa0 100%);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 9px;
  box-shadow: 0 2px 10px #1ec7fa33;
  transition: background 0.3s, color 0.3s;
  border: none;
}

.btn:hover {
  background: #2c5aa0;
  color: #fff;
}

/* Notes */
.note {
  margin-bottom: 20px;
  color: #1ec7fa;
  font-size: 1.08rem;
  text-shadow: 0 0 6px #1ec7fa11;
}

/* ANIMATION BOXES */
.div5 {
  width: 100px;
  height: 100px;
  background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%);
  border-radius: 14px;
  box-shadow: 0 2px 12px #1ec7fa44;
  animation: fadeBlue 4s;
  margin-bottom: 30px;
}
@keyframes fadeBlue {
  from { background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%); }
  to { background: linear-gradient(90deg, #2c5aa0 60%, #5affec 100%); }
}

/* For div6-div10: smooth blue/purple/cyan transitions and movement */
.div6, .div7, .div8, .div9, .div10, .div12, .div13, .div14 {
  width: 100px;
  height: 100px;
  background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%);
  border-radius: 14px;
  box-shadow: 0 2px 12px #1ec7fa44;
  position: relative;
  margin-bottom: 30px;
}
.div6 { animation: glassBlue 4s; }
.div7 { animation: boxMove 4s; }
.div8 { animation: boxMove 4s 2s; }
.div9 { animation: boxMove 4s 0s 3; }
.div10 { animation: boxMove 4s infinite; }
.div12, .div13, .div14 {
  animation: boxMove 5s linear 2s infinite alternate;
}

@keyframes glassBlue {
  0%   {background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%);}
  25%  {background: linear-gradient(120deg, #5affec 60%, #1ec7fa 100%);}
  50%  {background: linear-gradient(120deg, #c78dfa 40%, #1ec7fa 100%);}
  100% {background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%);}
}
@keyframes boxMove {
  0%   {background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%); left:0px; top:0px;}
  25%  {background: linear-gradient(120deg, #5affec 60%, #1ec7fa 100%); left:200px; top:0px;}
  50%  {background: linear-gradient(120deg, #a470e7 80%, #00d2ff 100%); left:200px; top:200px;}
  75%  {background: linear-gradient(120deg, #1e3a5f 60%, #1ec7fa 100%); left:0px; top:200px;}
  100% {background: linear-gradient(120deg, #1ec7fa 80%, #2c5aa0 100%); left:0px; top:0px;}
}

/* Animation timing for movement examples */
.div11 {
  width: 100px;
  height: 50px;
  background: linear-gradient(90deg, #1ec7fa 70%, #2c5aa0 100%);
  font-weight: bold;
  color: #fff;
  position: relative;
  border-radius: 10px;
  animation: mymove 5s;
  animation-fill-mode: forwards;
  margin-bottom: 10px;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}

@media (max-width: 700px) {
  .navbar a { padding: 10px 6px; font-size: 14px; }
  .div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9, .div10, .div11, .div12, .div13, .div14, .div15 {
    width: 70px;
    height: 70px;
    font-size: 0.9rem;
  }
}