:root {
  --text-shadow: #8acade;
  --background-color: #033442;
  --glow-main: #10606e;     
  --glow-alt: #86dceb;      
  --glow-bg: #06282e;          
  --glow-text: #fff;
  --regular-font-color: #ffffff;
  --border-color: #73d7f5;
         
}

body {
   background-color: var(--background-color);
    border: var(--border-color) solid 10px;
    border-radius: 20px;
    color: var(--regular-font-color);
    /*font-family: Verdana, Geneva, Tahoma, sans-serif
    Changing font with google, using right method now lolol*/
    font-family: "Cherry Bomb One", system-ui;  
    font-weight: 400;
    font-style: normal;
}
a:link{
    color: violet;
    background-color: transparent;
    text-decoration: none;
}
a:visited{
    color: blueviolet;
    background-color: transparent;
    text-decoration: none;
}
a:hover{
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:active{
    color: darkmagenta;
    background-color: transparent;
    text-decoration: none;
}
h1{
    margin-left: 10px;
}
p{
    margin-left: 10px;
}
img{
    margin-left: 10px;
}
a{
    margin-left: 10px;
}
h1{
    text-shadow: 5px 5px 2px var(--text-shadow);
}
.mikuphoto{
  position: fixed;
  top: 25px;
  right: 25px;
}
.mel{
    position: absolute;
    top: 25px;
    right: 50px;
}
@keyframes borderGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.glow-button {
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 10px;
  position: relative;
  padding: 12px 30px;
  font-size: 18px;
  color: var(--glow-text);
  background: var(--glow-bg);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1;
}

.glow-button::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 14px;
  background: linear-gradient(270deg, var(--glow-alt), var(--glow-main), var(--glow-alt));
  background-size: 600% 600%;
  animation: borderGlow 6s linear infinite;
  z-index: -1;
}

.glow-button::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px; right: 2px; bottom: 2px;
  background: var(--glow-bg);
  border-radius: 10px;
  z-index: -1;
}

.glow-button:hover {
  box-shadow: 0 0 20px var(--glow-main),
              0 0 40px var(--glow-alt);
  transform: scale(1.05);
}

.glow-button:active {
  transform: scale(0.95);
  box-shadow: 0 0 10px var(--glow-main);
}
  
button{
  font-family: "Cherry Bomb One", system-ui;  
    font-weight: 400;
    font-style: normal;
}
.maintext{
  font-size: 30px;
}
.spotifythingy{
  margin-top: 5px;
  margin-left: 5px;
}