body {
    font-family: arial, sans-serif;
    background-color: rgb(199, 230, 255);
    margin: 0 auto;
    overflow: auto;
    overflow-x: hidden;
    background-image: url(../assets/media-1/sample-BG.png);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.hero-title {
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    box-shadow: 0px 0px 20px 0px rgb(0, 0, 0, .5);
    padding: 10px;
    animation: menuGlow 3s infinite ease-in-out;
    width: auto;
    height: auto;
}

#title {
    background-image: url(../assets/media-1/sample-BG.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 50px;
    color: transparent;
    font-weight: bold;
    animation: txtMoveUp 2s ease infinite;
}

.logo {
    max-width: 100%;
    width: 120px;
    height: auto;
    border-radius: 250px;
    box-shadow: 0px 0px 16px;
    margin: 20px;
    animation: menuGlow 3s infinite ease-in-out;
}

.box {
    width: 95%;            
    max-width: 1400px;    
    margin: 10px auto;          
    box-sizing: border-box;
}

.box:hover {
    background: rgba(255, 255, 255, 0.228);
    backdrop-filter: blur(5px);
}

@keyframes pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.1); opacity: 0.8; }
}

@keyframes rightPulse {
    from {transform: scale(1);}
    to {transform: scale(1.03); transform: translateY(-5);}
}

p {
    color: #ffffff;
    font-size: 24px;
    text-shadow: 0px 0px 16px rgb(0, 0, 0);
    font-weight: bold;
    text-align: justify;
    padding: 15px;
    padding-left: 40px;
    padding-right: 40px;
}

@keyframes menuGlow {
  0% {
    box-shadow: 0 0 5px rgba(0, 183, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 183, 255, 0.9);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 183, 255, 0.5);
  }
}

@keyframes txtMoveUp {
  0% {
    text-shadow: 0px 0px 0px rgb(255, 255, 255);
  }
  50% {
    text-shadow: 5px -3px 0px rgb(255, 255, 255);
  }
  100% {
    text-shadow: 0px 0px 0px rgb(255, 255, 255);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-150%);
  }
  to {
    transform: translateY(0);
  }
}
p:hover {
    animation: rightPulse .3s ease forwards;
}
.container {
    grid-area: stack;
    z-index: 1;
    width: 12rem;
    aspect-ratio: 1/1;
    border-radius: 9999px;
    border: 15px white solid;
}
.base-container {
    grid-area: stack;
    z-index: 2;
    width: 12rem;
    aspect-ratio: 1/1;
    border-radius: 9999px;
    border: 15px solid transparent;
    background: linear-gradient(90deg, rgb(94, 255, 0),rgb(225, 255, 0), transparent) border-box;

    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: loadingScreen 3s ease-in-out infinite;
}
.dotted {
    width: 3em;
    height: 3em;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: white;
    box-shadow:
        6.5em -6.5em 0em rgba(255, 255, 255, .75),
        2.425em -4.05em 0em rgb(255, 255, 255, .875),
        6.5em 6.5em 0em rgba(255, 255, 255, .25),
        2.425em 4.05em 0em rgb(255, 255, 255, .125),
        13em 0em 0em rgba(255, 255, 255, .5),
        10.525em -4.05em 0em rgba(255, 255, 255, .625),
        10.525em 4.05em 0em rgba(255, 255, 255, .375);
}
.dotted-base {
    width: 250px;
    height: 250px;
    margin: 50px auto;
    display: flex;
    justify-items: center;
    align-items: center;
    animation: loadingScreen 4s linear infinite;
}
#general-div {
    overflow: hidden;
    margin-top: 50px;
    position: relative;
    display: grid;
    grid-template-areas: "stack";
    justify-items: center;
    align-items: center;
}
@keyframes loadingScreen {
    from {transform: rotate(0deg);}
    to {transform: rotate(-1080deg);}
}
.base-container, .container {
    grid-area: stack;
}