latex.css

body
{
    /* animation: 10.0s movement linear infinite; */
    background-color: #fdafb6;
    background-image: 
    radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
    radial-gradient(closest-side, rgb(255, 116, 116), rgba(243, 100, 100, 0)),
    radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
    radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
    radial-gradient(closest-side, rgb(250, 171, 107), rgba(248, 192, 147, 0));
    background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
    background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
    background-repeat: no-repeat;
    margin: 0px;
    min-height: 100vh;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

svg
{
    color: inherit;
    vertical-align: -0.075em;
}

#topbar
{
    background-color: rgba(245, 245, 245);
    /* box-shadow: gray 0px 0px 4px; */
    height: 10vh;
    width: 100vw;
    z-index: 10;
}

#logo
{
    /* color: transparent; */
    color: rgb(60, 60, 60);
    display: inline-flex;
    font-size: 4vh;
    font-family: Sofia;
    float: left;
    line-height: 10vh;
    height: fit-content;
    margin: 0;
    padding-left: 4vh;
    padding-right: 4vh;
    position: relative;
    width: fit-content;
}

/* #logo:hover
{
    animation: RGB 10s infinite;
} */

#topbar button
{
    background-color: transparent;
    border-radius: 5px;
    border: none;
    color: rgb(60, 60, 60);
    display: inline-flex;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: left;
    line-height: 3vh;
    height: 4vh;
    margin-right: 20px;
    overflow: hidden;
    padding: 1vh;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    position: relative;
    top: 3vh;
    width: fit-content;
}

#topbar button:hover
{
    background-color: rgb(220, 220, 220);
}

#apple
{
    position: relative;
    top: calc((4vh - 16px) / 5);
}

#searchButton
{
    display: none;
}

#searchButton + label
{
    background-color: transparent;
    border-radius: 5px;
    border: none;
    color: rgb(60, 60, 60);
    display: inline-flex;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    float: left;
    line-height: 3vh;
    height: 3vh;
    margin-right: 20px;
    overflow: hidden;
    padding: 1vh;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    position: relative;
    top: 3vh;
    width: fit-content;
}

#searchButton + label:hover
{
    background-color: rgb(220, 220, 220);
}

#searchButton:checked + label
{
    background-color: rgb(220, 220, 220);
}

#link
{
    color: rgb(60, 60, 60);
    font-size: 15px;
    line-height: 10vh;
    position: absolute;
    text-decoration: none;
    right: 20px;
    /* top: 4vh; */
}

#link:hover
{
    color: rgb(99, 99, 99);
}

#sidebar
{
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-top: 0.5px solid rgb(232, 232, 232);
    height: 90vh;
    overflow: scroll;
    position: absolute;
    top: 10vh;
    width: 25vw;
    z-index: 5;
}

#sidebar::-webkit-scrollbar
{
    display: none;
}

#sidebar h4
{
    /* background-color: rgba(250, 250, 250, 0.95); */
    background-color: transparent;
    border-radius: 8px;
    color: rgba(76, 0, 130, 0.5);
    cursor: pointer;
    font-size: 18px;
    line-height: 30px;
    height: 30px;
    margin: 10px;
    padding-left: 10px;
    user-select: none;
    width: calc(25vw - 30px);
}

#sidebar svg
{
    overflow: visible !important;
    transform: rotate(0deg);
    transition: transform 0.2s;
}

#sidebar section
{
    list-style: none;
    height: 0;
    margin: 0;
    overflow: hidden;
    padding-left: 10px;
    transition: all 0.2s;
    width: calc(25vw - 10px);
}

#sidebar button
{
    background-color: rgba(245, 245, 245, 0.95);
    border: none;
    border-radius: 7px;
    height: 4vw;
    margin-right: 0.5vw;
    margin-bottom: 0.5vw;
    width: 4vw;
}

.big
{
    height: fit-content !important;
}

#sidebar button:hover
{
    background-color: rgba(215, 215, 215, 0.678);
}

#fmc
{
    display: block;
}

#search
{
    display: none;
}

#searchBox
{
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(214, 214, 214, 0.4);
    box-sizing: border-box;
    color: rgb(60, 60, 60);
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 1vw;
    height: 35px;
    outline: none;
    padding-left: 32px;
    width: 23vw;
}

#search svg
{
    color: rgb(91, 91, 91);
    left: 1.7vw;
    position: absolute;
    top: calc(1vw + 9px);
}

#mainContent
{
    background-color: white;
    border-left: 0.5px solid rgb(232, 232, 232);
    border-top: 0.5px solid rgb(232, 232, 232);
    left: 25vw;
    height: 90vh;
    overflow-y: scroll;
    position: absolute;
    top: 10vh;
    width: 75vw;
    z-index: 5;
}

#mainContent::-webkit-scrollbar
{
    display: none;
}

#mainContent p
{
    padding: 20px;
}

#mainContent h2
{
    color: gray;
    font-weight: normal;
    line-height: 3vh !important;
    padding: 14px;
}

#mainContent h3
{
    color: gray;
    font-weight: normal;
    font-size: 16px;
    line-height: 3vh !important;
    padding: 8px;
    padding-left: 14px;
}

i
{
    color: rgba(76, 0, 130, 0.5);
}

#refresh
{
    text-decoration: none;
}

#refresh:hover
{
    text-decoration: underline rgba(76, 0, 130, 0.5);
}

#wordbox
{
    background-color: rgba(242, 242, 242, 0.3);
    border: 1px dashed rgb(211, 211, 211);
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    height: 30vh;
    outline-color: rgba(76, 0, 130, 0.5);
    padding: 10px;
    margin: 20px;
    max-width: 37vw;
    min-width: 37vw;
    min-height: 2vw;
    width: 37vw;
}

.functionButton
{
    background-color: rgba(232, 232, 232, 0.678);
    border: none;
    border-radius: 7px;
    font-size: 12px;
    height: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
    width: 75px;
}

.functionButton:hover
{
    background-color: rgba(215, 215, 215, 0.678);
}

#L_block
{
    background-color: rgba(235, 105, 78, 0.4);
    color: white;
}

#L_inline
{
    background-color: rgba(235, 105, 78, 0.4);
    color: white;
}

#rendersetting
{
    background-color: rgba(76, 0, 130, 0.5);
    color: whitesmoke;
    width: 110px;
}

#outputBox
{
    background-color: rgba(242, 242, 242, 0.3);
    border-radius: 10px;
    border: 1px dashed rgb(230, 230, 230);
    color: rgb(60, 60, 60);
    float: right;
    height: 30vh;
    margin: 20px;
    margin-left: 0px;
    overflow: scroll;
    padding: 10px;
    position: relative;
    width: calc(38vw - 105px);
}

#outputBox::-webkit-scrollbar
{
    display: none;
}

#guide
{
    background-color: rgba(242, 242, 242, 0.3);
    border-radius: 10px;
    border: 1px dashed rgb(230, 230, 230);
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    width: calc(75vw - 40px);
}

#guide h2
{
    margin: 0;
    border-bottom: 1px dashed rgb(230, 230, 230);
}

#sign
{
    bottom: 12px;
    color: rgb(180, 180, 180);
    font-size: 10px;
    position: fixed;
    right: 12px;
    user-select: none;
}

@keyframes movement 
{
    0%, 100%
    {
        background-size: 130vmax 130vmax, 80vmax 80vmax, 90vmax 90vmax, 110vmax 110vmax, 90vmax 90vmax;
        background-position: -80vmax -80vmax, 60vmax -30vmax, 10vmax 10vmax, -30vmax -10vmax, 50vmax 50vmax;
    }
    25%
    {
        background-size: 100vmax 100vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 60vmax 60vmax;
        background-position: -60vmax -90vmax, 50vmax -40vmax, 0vmax -20vmax, -40vmax -20vmax, 40vmax 60vmax;
    }
    50%
    {
        background-size: 80vmax 80vmax, 110vmax 110vmax, 80vmax 80vmax, 60vmax 60vmax, 80vmax 80vmax;
        background-position: -50vmax -70vmax, 40vmax -30vmax, 10vmax 0vmax, 20vmax 10vmax, 30vmax 70vmax;
    }
    75%
    {
        background-size: 90vmax 90vmax, 90vmax 90vmax, 100vmax 100vmax, 90vmax 90vmax, 70vmax 70vmax;
        background-position: -50vmax -40vmax, 50vmax -30vmax, 20vmax 0vmax, -10vmax 10vmax, 40vmax 60vmax;
    }
}

@keyframes RGB
{
    0%, 100%
    {
        color: #ff0000;
    }
    14.3%
    {
        color: #ff7f00;
    }
    28.6%
    {
        color: #ffff00;
    }
    42.9%
    {
        color: #00ff00;
    }
    57.1%
    {
        color: #00ffff;
    }
    71.3%
    {
        color: #0000ff;
    }
    85.6%
    {
        color: #8b00ff;
    }
}

@media screen and (max-width: 950px)
{
    body
    {
        background-color: white;
        background-image: none;
        opacity: 0;
    }
}