* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;

    background-image: url("../images/background1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    overflow: hidden;
}

/* blackboard */
#overlay{
    position: fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:#000;

    z-index:1;
}

#startButton{

    position:fixed;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:260px;
    height:60px;

    display:flex;

    justify-content:center;
    align-items:center;

    overflow:hidden;

    border-radius:999px;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.3);

    color:white;

    cursor:pointer;

    z-index:2;

    transition: 
        opacity .5s ease,
        transform .25s ease,
        background .3s ease,
        box-shadow .3s ease;
}

#buttonGlow{

    position:absolute;

    width:420px;
    height:420px;

    right:-120px;
    top:-220px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,255,255,.70) 0%,

        rgba(220,235,255,.28) 25%,

        rgba(180,210,255,.12) 50%,

        rgba(255,255,255,0) 80%

    );

    opacity:.6;

    pointer-events:none;

    z-index:1;

}

#startButton span {

    position: relative;

    z-index: 2;

    letter-spacing: 3px;

    color: white;

    text-shadow: 0 0 10px rgba(255,255,255,.35);

    user-select: none;

}

#startButton.clicked{

    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(1.04);

    pointer-events:none;

}

/*Mouse Star Effect*/
.star{
    position:fixed;
    pointer-events:none;
    user-select:none;

    color:#ffffff;
    font-size:15px;
    line-height:1;

    z-index:5;

    will-change:transform,opacity;

    transform: translateZ(0); 
}

#skipMainButton {
    position: fixed;

    top: 28px;
    right: 32px;

    width: 96px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    color: white;

    font-size: 15px;
    letter-spacing: 2px;

    cursor: pointer;

    z-index: 6;

    opacity: 0;
    pointer-events: none;

    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    outline: none;
    
    transition:
        opacity .35s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

#skipMainButton.show {
    opacity: 1;
    pointer-events: auto;
}

#skipMainButton:hover {
    background: rgba(255,255,255,.16);
    box-shadow: 0 0 18px rgba(255,255,255,.25);
}

#skipMainButton:active {
    transform: scale(.96);
}

#endMenu {
    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    gap: 22px;

    z-index: 7;

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .6s ease,
        transform .6s ease;
}

#endMenu.show {
    opacity: 1;
    pointer-events: auto;

    transform: translate(-50%, -50%) scale(1);
}

.endMenuButton {
    width: 220px;
    height: 54px;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    color: white;

    font-size: 16px;
    letter-spacing: 3px;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    font-family: inherit;

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .2s ease;
}

.endMenuButton:hover {
    background: rgba(255,255,255,.16);
    box-shadow: 0 0 18px rgba(255,255,255,.25);
}

.endMenuButton:active {
    transform: scale(.96);
}