body {
    margin: 0;             
    display: flex;         
    justify-content: center; 
    align-items: center;   
    min-height: 100vh;      
    flex-direction: column;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    width: 90vw;
    gap:30px;
    margin-left:20px;
    margin-right:20px;
    margin-top: 30px;
}

.sidebar-box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh;
    width: 80vw;
    margin-left:20px;
    margin-right:20px;
    margin-top:30px;
    margin-bottom: 30px;
}

.area{
    position: relative;
    width: 90%;
    height: 100%;
    border: 3px solid gray;
    overflow: hidden;
}

.sidebar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 20vw;
    background-color: rgba(0, 0, 0, 0.616);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
}

.sidebar.active {
    animation: sidebar-trans 0.7s ease-out forwards;
}

.menu-toggle{
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1000;
    transform: translateX(0);
    transition: transform 0.7s ease-out;
}

.menu-toggle.active {
    transform: translateX(17vw);
}

@keyframes sidebar-trans{
    0% {transform: scaleX(0); opacity: 0;}
    100% {transform: scaleX(1); opacity: 1;}
}

.transition-box{
    width:45%;
    height: 95%;
    border: 3px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animation-box{
    width:45%;
    height: 95%;
    border: 3px solid gray;
    display: flex;
    justify-content: center;
    align-items: center;
}

.t-button{
    width: 300px;
    height: 80px;
    font-size: 23px;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
    cursor: pointer;
    transform: translateY(0);
    border: 2px solid black;
    font-style: italic;
    /*transition: transition-property, transition-duration, transition-timing-function, transition-delay*/
    transition: 
        all 1s ease-in-out 0.2s,
        transform 2s ease-in-out 0.2s,
        box-shadow 1.3s ease-in-out 0.2s,
        letter-spacing 1.5s ease-in-out 0.2s,
        border 2s ease-in-out 0.2s
}

.t-button:hover{
    background-color: rgb(44, 42, 42);
    color: rgb(255, 255, 255);
    transform: translateY(-20px);
    border-radius: 50px;
    letter-spacing: 5px;
    opacity: 1;
    box-shadow: 0px 0px 20px rgb(47, 48, 48);
    border: 2px solid rgb(255, 255, 255);
    
}

.a-button{
    width: 300px;
    height: 80px;
    font-size: 23px;
    font-weight: bold;
    background: transparent;
    border: 4px solid aqua;
    color: aqua;
    cursor: pointer;
    /* animation: pulse-glow 2s ease-in-out infinite;
    animation: color-shift 2s linear infinite;
    animation: vibrate 0.05s linear infinite;
    animation: border-glow 2s linear infinite; */
    /* animation: border-rainbow 2s linear infinite; */
}

.a-button:hover {
    animation: border-rainbow 2s linear infinite;
}



@keyframes pulse-glow{ /*First one by AI, rest myself */
    0% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(0, 255, 255, 0);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(0, 255, 255, 0);
    }
}

@keyframes color-shift{ /*From here by myself */
    0%   { background-color: aqua; transform: rotate(0deg); }
    33%  { background-color: pink; transform: rotate(5deg); }
    66%  { background-color: yellow; transform: rotate(-5deg); }
    100% { background-color: aqua; transform: rotate(0deg); }
}

@keyframes vibrate{
    0% {transform: rotate(0deg) translate(0, 0);}
    25% {transform: rotate(1deg) translate(1px, 1px);}
    50% {transform: rotate(-1deg) translate(-1px, -1px);}
    75% {transform: rotate(1deg) translate(1px, -1px);}
    100% {transform: rotate(0deg) translate(0, 0);}
}

@keyframes border-glow{
    0% {box-shadow: 0 0 5px rgb(0, 255, 255), inset 0 0 5px rgb(0, 255, 255);}
    50% {box-shadow: 0 0 20px rgb(0, 255, 255), inset 0 0 10px rgb(0, 255, 255);}
    100% {box-shadow: 0 0 5px rgb(0, 255, 255), inset 0 0 5px rgb(0, 255, 255);}
}

@keyframes border-rainbow{
    0% { border-color: aqua; color: aqua; transform: rotate(0deg);}
    33% { border-color: #ff00ff; color: #ff00ff; transform: rotate(2deg);}
    66% { border-color: #ffcc00; color: #ffcc00; transform: rotate(-2deg);}
    100% { border-color: aqua; color: aqua; transform: rotate(0deg);}
}