diff --git a/assets/css/custom.css b/assets/css/custom.css
index cb9e968..5579ff1 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,19 +1,20 @@
:root {
- --primary-pink: #F5A9B8;
- --primary-blue: #5BCFFA;
- --white: #FFFFFF;
- --dark-bg: #161618;
- --gray-blue: #A8C5DB;
- --dark-blue: #12354B;
- --dark-teal: #12404B;
-
+ --primary-pink: #F5A9B8;
+ --primary-blue: #5BCFFA;
+ --white: #FFFFFF;
+ --dark-bg: #161618;
+ --gray-blue: #A8C5DB;
+ --dark-blue: #12354B;
+ --dark-teal: #12404B;
+
}
-display-imagebody,html{
- -ms-scroll-chaining:none;
- overscroll-behavior:none;
- margin:0;
- padding:0;
+display-imagebody,
+html {
+ -ms-scroll-chaining: none;
+ overscroll-behavior: none;
+ margin: 0;
+ padding: 0;
background-color: var(--dark-bg);
background-size: cover;
background-attachment: fixed;
@@ -25,16 +26,6 @@ display-imagebody,html{
"wdth" 100;
}
-.background-canvas {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- pointer-events: none;
-}
-
.background-canvas {
position: fixed;
top: 0;
@@ -49,20 +40,22 @@ display-imagebody,html{
border-radius: 8px;
}
-.display-image{
- width:192px;
- height:192px;
- display:block;
- /*border-radius:50%;*/
- -o-object-fit:cover;
- object-fit:cover
+.display-image {
+ width: 15em;
+ height: auto;
+ display: block;
+ border-radius: 0%;
+ -o-object-fit: cover;
+ object-fit: cover
}
.link-each-image {
- width: 3em;
+ max-width: 3em;
+ max-height: 3em;
+ width: auto;
+ height: auto;
-o-object-fit: cover;
object-fit: cover;
-
}
.main-container {
@@ -84,21 +77,40 @@ display-imagebody,html{
max-width: 800px;
}
+.pronouns-desc {
+ font-size: 1em;
+ font-weight: bold;
+ color: #f2f5f4;
+ text-align: center;
+ margin: 10px auto;
+ margin-top: 10px;
+ width: 100%;
+ max-width: 800px;
+}
+
h1 {
font-size: 2.5em;
font-weight: bold;
}
.flag {
- width: 1em;
+ width: 1.5em;
+ height: auto;
border-radius: 0.10em;
}
+.lang-flag {
+ width: auto;
+ max-width: 2em;
+ height: 1em;
+}
+
.separator {
font-weight: unset;
}
-.separator, .source {
+.separator,
+.source {
color: #f2f5f4;
text-align: center;
margin: 25px auto;
@@ -128,10 +140,14 @@ hr {
.row {
display: table;
- width: 100%; /*Optional*/
- table-layout: fixed; /*Optional*/
- border-spacing: 10px; /*Optional*/
+ width: 100%;
+ /*Optional*/
+ table-layout: fixed;
+ /*Optional*/
+ border-spacing: 10px;
+ /*Optional*/
}
+
.column {
display: table-cell;
text-align: center;
@@ -145,4 +161,17 @@ hr {
svg {
fill: currentColor;
+}
+
+
+@media (max-width:768px) {
+ .display-image {
+ width: 15em;
+ }
+}
+
+@media (max-width:480px) {
+ .display-image {
+ width: 10em;
+ }
}
\ No newline at end of file
diff --git a/assets/images/anilist.svg b/assets/images/anilist.svg
deleted file mode 100644
index bb19116..0000000
--- a/assets/images/anilist.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/index.html b/index.html
index ac4046f..f1c53b6 100644
--- a/index.html
+++ b/index.html
@@ -26,7 +26,7 @@
-
+
@@ -41,25 +41,25 @@
- Elftwink VTuber :3
-
+ AuDHD, Queer, Nonbinary Elftwink VTuber :3