1@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
  2@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
  3
  4html {
  5    --main-bg-color: white;
  6    --text-color: black;
  7    --text-secondary-color: #555;
  8    --border-color: rgba(0, 0, 0, 0.33);
  9    --semi-bg-color: rgba(0, 0, 0, 0.03);
 10    background: var(--main-bg-color);
 11}
 12
 13body {
 14    margin: 0;
 15    background: url(./assets/noise-strong.png);
 16    font-family: 'Ubuntu', sans-serif;
 17    color: var(--text-color);
 18}
 19
 20#toast-notification {
 21    position: absolute;
 22    top: -55.5px;
 23    left: 50%;
 24    -webkit-transform: translateX(-50%);
 25    transform: translateX(-50%);
 26    transition: top 0.5s ease, color 1s ease, background 1s ease;
 27    background: var(--semi-bg-color);
 28    padding: 12px 64px 12px 64px;
 29    border-radius: 8px;
 30    box-shadow: 0px 0px 10px var(--border-color);
 31}
 32
 33#header {
 34    display: flex;
 35    justify-content: flex-end;
 36    background: var(--semi-bg-color);
 37}
 38
 39#header-icon-image {
 40    height: 16px;
 41}
 42
 43#header-icon {
 44    padding: 12px;
 45}
 46
 47#header-title {
 48    width: 100%;
 49    text-align: left;
 50    padding: 12px;
 51}
 52
 53#schedule-file-link {
 54    color: var(--text-color);
 55}
 56
 57.week-control-button {
 58    padding: 10px 12px 10px 12px;
 59    margin: 2px 0px 2px 0px;
 60    border: solid 1px var(--border-color);
 61}
 62
 63.night-mode-button {
 64    padding: 10px 12px 10px 12px;
 65    margin: 2px 20px 2px 0px;
 66    border: solid 1px var(--border-color);
 67    border-radius: 8px;
 68}
 69
 70#week-back-button {
 71    border-radius: 8px 0px 0px 8px;
 72}
 73
 74#week-upload-button {
 75    border-radius: 0px 8px 8px 0px;
 76}
 77
 78#week-count {
 79    transition: text-decoration 150ms ease;
 80}
 81
 82#base-pair-container {
 83    display: flex;
 84    font-family: "Space Mono";
 85    overflow-wrap: anywhere;
 86    flex-wrap: wrap;
 87    margin: 64px;
 88}
 89
 90.base-pair {
 91    position: relative;
 92}
 93
 94.annotation {
 95    position: absolute;
 96    font-weight: bolder;
 97    color: white;
 98}
 99
100.dates-control-button {
101    padding: 10px 12px 10px 12px;
102    margin: 2px 2px 2px auto;
103    border: solid 1px var(--border-color);
104}
105
106#molstar-viewer-window {
107    position: fixed;
108    width: 40vw;
109    height: 40vh;
110    bottom: 16px;
111    right: 16px;
112}
113
114@keyframes loadIn {
115    0% {
116        opacity: 0;
117        transform: translateY(10px);
118    }
119
120    100% {
121        opacity: 1;
122        transform: translateY(0px);
123    }
124
125}
126
127@keyframes loadOut {
128    0% {
129        opacity: 1;
130        transform: translateY(0px);
131    }
132
133    100% {
134        opacity: 0;
135        transform: translateY(10px);
136    }
137
138
139}
140
141@keyframes paddingLoadIn {
142    0% {
143        padding: 16px 32px 16px 32px;
144    }
145
146    100% {
147        padding: 0px;
148    }
149}