static/css/style.css

:root {
    --fisheye_color: #58df94;
    --caltech_orange: #FF6C0C;
}

html,
body {
    height: 100%;
}

body {
/*     padding-top: 40px; */
    padding-bottom: 40px;
    background-color: #f5f5f5; 
}

#content {
    padding-top: 40px;
}

#home_banner * {
    transition: all .2s ease-in-out;
}
#home_banner:hover > svg {
    transform: scale(1.3) rotate(180deg);
}
#home_banner:hover #banner_svg_eye {
    fill: var(--fisheye_color)
}
#home_banner:hover #banner_svg_slit {
    fill: #231F20;
}
#home_banner:hover #banner_svg_pupil {
    fill: #FFFFFF;
}
#home_banner > span {
    color: black;
    font-style: italic;
}
#home_banner:hover > span {
    transform: translateX(6px);
}
#home_banner:hover #banner_text_caltech {
    /*color: var(--caltech_orange);*/
}
#home_banner:hover #banner_text_fisheye {
    /*color: var(--fisheye_color);*/
}

.mode_screen {
    width: calc(100% - 280px); 
    display: none;
    max-height: 100vh;
    overflow-y: scroll;
    position: absolute;
    top: 0px;
    left: 280px;
}
.page_image {
    max-width: min(95%, 600px);
}
.result-download {
    color:gray;
    font-size: 20px;
}
.result-download:hover {
    color:black;
}
.result-analysis {
    width: 25px;
    margin-top: -5px;
}
.result-analysis path {
    fill:gray;
}
.result-analysis:hover path {
    fill:black;
}


#analysis_table {
    width: 50%;
    margin-left: 25%
}
#analysis_table th {
    padding: 2px;
    width: 200px;
    text-align: right;
    padding-right: 10px;
}
#analysis_table td {
    padding: 2px;
    width: 200px;
    text-align: left;
    padding-left: 10px;
}

#sidebar {
    width: 280px; 
    height: 100vh; 
    border: lightgray; 
    border-right-style: solid;
}











analysis-fishstick {
    width: 80%;
    height: 40px;
    display: block;
    margin-left: 10%;
    position: relative;
}
.fishstick_line {
    position: absolute;
    width: 100%;
    height: 8px;
    top: 50%;
    translate: 0 -50%;
    background-color: blue;
}
.fishstick_token {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    border-radius: 50%;
    background-color: orange;
    translate: -50% -50%;
}