:root{
    --accent-color : rgb(255, 200, 0);
    --opac-accent-color : rgba(255, 200, 0, 0.3);
    --bg-color: rgb(20, 20, 20);
    --secondary-color:rgb(110, 110, 110);
    --dim-secondary-color: rgb(63, 63, 63);
    --teritiary-color:rgb(170, 121, 0);
    cursor: none;
    scroll-behavior: smooth;
}


body{
    background-color: var(--bg-color);
    padding: 0;
    margin:0;
    top:0;
    left:0;
    font-family: "Google Sans Code", monospace;
}


.container{
    max-width: 1500px;
    margin:0 auto;
}
section{
    width:100%;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}
section > h1{
    margin: 50px 70px;
    color: var(--accent-color);

}
.sectionTitle{
    position: absolute;
    top:10px;
    left:10px;
    color: var(--secondary-color);
    font-size: x-large;
}
.sectionTitleEnd{
    position: absolute;
    bottom:10px;
    right:10px;
    color: var(--secondary-color);
    font-size: x-large;
}

.btn{
    padding:20px;
    border-radius: 10px;
    background-color: var(--dim-secondary-color);
    color: var(--accent-color);
    transition: 0.1s ;
}
.accentBtn{
    font-weight: 700;
    background-color: var(--accent-color);
    color: black;
}
.btn:hover{
    box-shadow: inset 0px 0px 0px 3px var(--accent-color);
}
.accentBtn:hover{
    background-color: var(--bg-color);
    color: var(--accent-color);
}



.mouse{
    z-index: 10;
    position: absolute;
    width:16px;
    background-color: var(--accent-color);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid var(--accent-color);
    transform: translateY(-11px) translateX(-11px);
    pointer-events: none;
    transition: width 0.5s, background-color 0.1s, transform 0.5s;
}
.mouseActive{
    width:64px;
    transform: translateY(-35px) translateX(-35px);
    background-color: rgba(0,0,0,0);
    border:3px solid var(--opac-accent-color);
}


.pulse-1{
    animation: pulse 1.5s linear infinite;
}
@keyframes pulse {
    0%{
        opacity: 1;
    }
    45%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    95%{
        opacity: 0;
    }
}