|
@@ -0,0 +1,113 @@
|
|
|
+:root {
|
|
|
+ --background-color: #55C9F6;
|
|
|
+ --light-background-color:#CAE3FB;
|
|
|
+ --text-color: black;
|
|
|
+ --accent-color: #29A5F2;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-button {
|
|
|
+ width: 0px;
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ background: var(--text-color);
|
|
|
+ border: none;
|
|
|
+ border-radius: 0px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: var(--text-color);
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb:active {
|
|
|
+ background: var(--text-color);
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: rgba(0,0,0,0);
|
|
|
+ border: none;
|
|
|
+ border-radius: 0px;
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track:hover {
|
|
|
+ background: rgba(0,0,0,0);
|
|
|
+}
|
|
|
+::-webkit-scrollbar-track:active {
|
|
|
+ background: rgba(0,0,0,0);
|
|
|
+}
|
|
|
+::-webkit-scrollbar-corner {
|
|
|
+ background: rgba(0,0,0,0);
|
|
|
+}
|
|
|
+
|
|
|
+*{
|
|
|
+ transition-duration: 0.5s;
|
|
|
+ scrollbar-color: var(--text-color) rgba(0,0,0,0) !important;
|
|
|
+ scrollbar-width: thin !important;
|
|
|
+}
|
|
|
+
|
|
|
+a {
|
|
|
+ color: var(--accent-color);
|
|
|
+}
|
|
|
+
|
|
|
+a:hover {
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ background: var(--background-color);
|
|
|
+ color: var(--text-color);
|
|
|
+ font-family: 'Fira Sans', sans-serif;
|
|
|
+ position: fixed;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+body>div {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+body>div>* {
|
|
|
+ max-width: 900px;
|
|
|
+ background: var(--light-background-color);
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+
|
|
|
+input {
|
|
|
+ border: none;
|
|
|
+ border-bottom: white solid 2px;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ width: 100%;
|
|
|
+ outline: none;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+input:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+input:focus {
|
|
|
+ border: none;
|
|
|
+ border-bottom: var(--accent-color) solid 2px;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+}
|
|
|
+
|
|
|
+#logo {
|
|
|
+ float: right;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 80px;
|
|
|
+ border-radius: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|