* {
  margin: 0;
  padding: 0;
}

.iframe {
  width: 100%;
  height: 100vh;
  border: none;
}

.scrollToSection {
  top:90%;
  right:20px;
  z-index:99;
  position:fixed;
  transform:translateY(-50%);
}

.scrollToSection button {
  width:110px;
  border:none;
  outline:none;
  color:#3399cc;
  display:block;
  cursor:pointer;
  font-size:17px;
  text-align:left;
  padding:12px 10px;
  border-radius:15px;
  margin-bottom:15px;
  backdrop-filter:blur(10px);
  background:rgba(255, 255, 255, 0.2);
  box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);
  transition:color 0.5s ease, transform 0.6s ease, box-shadow 0.5s ease, background 0.5s ease, backdrop-filter 0.5s ease;
}

.scrollToSection button:hover {
  color:#1c7aae;
  transform:translateY(-5px);
  backdrop-filter:blur(15px);
  background:rgba(51, 153, 204, 0.2);
  box-shadow:0 8px 25px rgba(0, 0, 0, 0.4);
}

.scrollToSection button:active {
  transform:translateY(2px);
  backdrop-filter:blur(5px);
  box-shadow:0 4px 15px rgba(0, 0, 0, 0.2);
}

a[mytitle] {
  position:relative;
}

a[mytitle]:hover::after {
  top:-60%;
  left:50%;
  padding:3px;
  z-index:1000;
  color:#3399cc;
  font-size:14px;
  position:absolute;
  white-space:nowrap;
  border-radius:10px;
  content:attr(mytitle);
  transform:translate(-50%, 0);
  background-color:rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme:dark) {
  .scrollToSection button {
    background:#424242;
  }
  
  a[mytitle]:hover::after {
    background-color: #424242;
  }
}

@media (max-width:1099px) {
  .scrollToSection {
    top:90%;
    right:1px;
  }
  
  .scrollToSection button {
    width:30px;
    padding:5px 5px 5px 5px;
  }
}