body,html{
    user-select: none;
    -moz-user-select: none;
    background: linear-gradient(180deg,rgb(194, 236, 255),rgb(227, 198, 255));
    height: 100%;
    overflow: hidden;
}
#sys-logo{
    position: absolute;
    left: 50%;
    top: 100px;
    transform: translate(-50%,-50%);
    height: 0px;
    animation: syslogobig 0.7s forwards;
    transition: filter 0.3s ease,
    transform 0.3s ease;
}
#sys-logo:hover{
    filter: brightness(1.2);
}
#sys-logo:active{
    filter: brightness(1.4);
    transform: translate(-50%,-50%) scale(0.8);
}
*{
    font-weight: 200;
    margin: 0;
    padding: 0;
}
@keyframes syslogobig{
    0%{
        height: 0px;
    }
    50%{
        height: 160px;
    }
    100%{
        height: 140px;
    }
}
#ghvswebtpc-text{
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0px;
    animation: ghvswebtpctextbig 0.7s forwards;
    animation-delay: 0.4s;
}
@keyframes ghvswebtpctextbig{
    0%{
        font-size: 0px;
    }
    50%{
        font-size: 40px;
    }
    to{
        font-size: 35px;
    }
}
#go{
    position: absolute;
    top: 290px;
    left: calc(50% - 90px);
    transform: translate(-50%,-50%);
    height: 0px;
    width: 0px;
    border-radius: 15px;
    border: none;
    background-color: rgb(132, 0, 255);
    color: white;
    animation: gobig 0.7s forwards;
    animation-delay: 0.7s;
    font-size: 0px;
    transition: background-color 0.5s ease;
}
#go:hover{
    background-color: rgb(127, 0, 211);
}
#go:active{
    background-color: rgb(99, 0, 165);
}
@keyframes gobig{
    0%{
        width: 0px;
        height: 0px;
        font-size: 0px;
    }
    50%{
        height: 40px;
        width: 170px;
        font-size: 19px;
    }
    100%{
        height: 35px;
        width: 150px;
        font-size: 16px;
    }
}
#guides{
    position: absolute;
    top: 290px;
    left: calc(50% + 90px);
    transform: translate(-50%,-50%);
    height: 0px;
    width: 0px;
    border-radius: 15px;
    border: 0px solid rgb(188, 99, 255);
    background-color: transparent;
    font-size: 0px;
    color: rgb(188, 99, 255);
    animation: guidesbig 0.7s forwards;
    animation-delay: 1s;
    transition: background-color 0.5s ease,
    color 0.5s ease;
}
#guides:hover{
    background-color: rgb(188, 99, 255);
    color: white;
}
#guides:active{
    background-color: rgb(170, 22, 255);
    color: white;
}
@keyframes guidesbig{
    0%{
        width: 0px;
        height: 0px;
        font-size: 0px;
        border-width: 0px;
    }
    50%{
        height: 40px;
        width: 170px;
        font-size: 19px;
        border-width: 1px;
    }
    100%{
        height: 35px;
        width: 150px;
        font-size: 16px;
        border-width: 1px;
    }
}
#web-sys-text{
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0px;
    animation: websystextbig 0.7s forwards;
    animation-delay: 1.4s;
}
@keyframes websystextbig{
    0%{
        font-size: 0px;
    }
    50%{
        font-size: 35px;
    }
    100%{
        font-size: 30px;
    }
}
#oldmain{
    position: absolute;
    top: 340px;
    left: 50%;
    transform: translate(-50%,-50%);
    text-decoration: none;
    transition: color 0.2s ease;
    color: rgb(170, 22, 255);
    font-size: 0px;
    animation: oldmainbig 0.7s forwards;
    animation-delay: 1s;
}
#oldmain:hover{
    color: rgb(202, 97, 255);
}
#oldmain:active{
    color: rgb(215, 135, 255);
}
@keyframes oldmainbig{
    0%{
        font-size: 0px;
    }
    50%{
        font-size: 25px;
    }
    100%{
        font-size: 20px;
    }
}
#t-codesystem{
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 500px;
    height: 105px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 32px;
    border-radius: 20px;
    transition: transform 0.5s ease;
}
#t-codesystem h1{
    font-size: 22.5px;
}
#t-codesystem button{
    width: 150px;
    height: 25px;
    border-radius: 8px;
    border: none;
    background-color: rgb(183,0,255);
    color: white;
    transition: background-color 0.5s ease;
}
#t-codesystem button:hover{
    background-color: rgb(155,0,255);
}
#t-codesystem button:active{
    background-color: rgb(125,0,255);
}
#close{
    position: absolute;
    right: 20px;
    top: 10px;
    width: 25px;
    height: 25px;
    font-size: 20px;
    transition: background-color 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
#t-codesystem:has(#close:hover){
    transform: perspective(1000px) rotateY(10deg) rotateX(10deg);
}
#close:hover{
    background-color: rgb(230,230,230);
}