styles - test.css

:root {
    --background-color: #010409;
    --text-color: #fff;
    --border-color: #253042;
    --border-hov: #36465f;
    --accent: #0d1117;
    --navbar: #0d1117;
    --navtext: #fff;
    --mobilenav: #010409ee;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.default {
    --background-color: #010409;
    --text-color: #fff;
    --border-color: #253042;
    --border-hov: #36465f;
    --accent: #0d1117;
    --navbar: #0d1117;
    --navtext: #fff;
    --mobilenav: #010409ee;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.neue {
    --background-color: #1c1c25;
    --text-color: #f3f3f5;
    --border-color: #3d3d4c;
    --border-hov: #5c5f70;
    --accent: #22222c;
    --navbar: #2c2c38;
    --navtext: #f3f3f5;
    --mobilenav: #2c2c38;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
  }

.light {
    --background-color: #fcfcfc;
    --text-color: #575e75;
    --border-color: #ccc;
    --border-hov: #bbb;
    --accent: #fff;
    --navbar: #855cd6;
    --navtext: #fff;
    --mobilenav: #ffffff91;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.black {
    --background-color: #000;
    --text-color: #fff;
    --border-color: #ffffff15;
    --border-hov: #ffffff25;
    --accent: #1c1c1e;
    --navbar: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    --navtext: #fff;
    --mobilenav: #000000aa;
    --nav-blur: blur(15px) saturate(180%);
    --button-color: transparent;
    --button-hover: transparent;
	--webkit-nav: #000;
    --select: var(--accent);
}

.white {
    --background-color: #f2f2f7;
	--text-color: #0d0d0d;
	--border-color: #c6c6c8;
	--border-hov: #a6a6a8;
	--accent: #fff;
	--navbar: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.5) 100%);
	--navtext: #0d0d0d;
	--mobilenav: #ffffffaa;
	--nav-blur: blur(15px) saturate(180%);
	--button-color: transparent;
	--button-hover: transparent;
	--webkit-nav: #fff;
    --select: var(--accent);
}

.ambient {
    --background-color: #000;
    --text-color: #fff;
    --border-color: #ffffff15;
    --border-hov: #ffffff25;
    --accent: #ffffff1c;
    --navbar: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    --navtext: #fff;
    --mobilenav: #000000aa;
    --nav-blur: blur(15px) saturate(180%);
    --button-color: transparent;
    --button-hover: transparent;
    --webkit-nav: #000;
    --select: #1c1c1c;
}

.grain {
    --background-color: #0b0b0b;
    --text-color: #fff;
    --border-color: #413d3a;
    --border-hov: #776d67;
    --accent: #111;
    --navbar: #111;
    --navtext: #fff;
    --mobilenav: #0e0e0eaa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.zip {
    --background-color: #111114;
    --text-color: #fff;
    --border-color: #4a4854;
    --border-hov: #676d7a;
    --accent: #1f1e24;
    --navbar: #1f1e24;
    --navtext: #fff;
    --mobilenav: #1f1e24aa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.dawn {
    --background-color: #fff7db;
    --text-color: #27272a;
    --border-color: #fbab24;
    --border-hov: #92340e;
    --accent: #fff2d4;
    --navbar: #fbab24;
    --navtext: #fff8e7;
    --mobilenav: #fff8e7aa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.rose {
    --background-color: #5c113c;
    --text-color: #fff;
    --border-color: #c62982;
    --border-hov: #da238b;
    --accent: #782152;
    --navbar: #b00b69;
    --navtext: #fff8e7;
    --mobilenav: #b00b69aa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.ice {
    --background-color: #f6f9ff;
    --text-color: #27272a;
    --border-color: #cedaf0;
    --border-hov: #3546c0;
    --accent: #f1f4fd;
    --navbar: #496ddc;
    --navtext: #fff;
    --mobilenav: #e7e8ffaa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.glacier {
    --background-color: #18181b;
    --text-color: #f4f4f5;
    --border-color: #3e59d2;
    --border-hov: #6a7aef;
    --accent: #1f234c;
    --navbar: #496ddc;
    --navtext: #fff;
    --mobilenav: #496ddcaa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}


.eagles {
    --background-color: #fff;
    --text-color: #000;
    --border-color: #000;
    --border-hov: #666;
    --accent: #a2aaad;
    --navbar: #004851;
    --navtext: #fff;
    --mobilenav: #004851aa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.mint {
    --background-color: #efffef;
    --text-color: #322;
    --border-color: #00000025;
    --border-hov: #00000045;
    --accent: #cfc;
    --navbar: #cfc;
    --navtext: #322;
    --mobilenav: #ccffccaa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.midnight {
    --background-color: #282a36;
    --text-color: #fff;
    --border-color: #7d83a6;
    --border-hov: #9ba2c7;
    --accent: #44475a;
    --navbar: #44475a;
    --navtext: #e6d5ff;
    --mobilenav: #44475aaa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.hamtter {
    --background-color: #0F0F0F;
    --text-color: #F8F8F2;
    --border-color: #121212;
    --border-hov: #292929;
    --accent: #1f1f1f;
    --navbar: #1f1f1f;
    --navtext: #ff6c60;
    --mobilenav: #1f1f1faa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.mastodon {
    --background-color: #191b22;
    --text-color: #F8F8F2;
    --border-color: #393f4f;
    --border-hov: #393f4f;
    --accent: #282c37;
    --navbar: #282c37;
    --navtext: #cddef5;
    --mobilenav: #282c37aa;
    --nav-blur: none;
    --button-color: #393f4f;
    --button-hover: #444b5d;
    --select: var(--accent);
}

.pleroma {
    --background-color: #0a1117;
    --text-color: #b9b9ba;
    --border-color: #282c37;
    --border-hov: #b9b9ba;
    --accent: #282c37;
    --navbar: #282c37;
    --navtext: #b9b9ba;
    --mobilenav: #282c37aa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.twitter {
    --background-color: #101821;
    --text-color: #fff;
    --border-color: #15202b;
    --border-hov: #15202b;
    --accent: #15202b;
    --navbar: #15202b;
    --navtext: #1da1f2;
    --mobilenav: #15202baa;
    --nav-blur: none;
    --button-color: #203243;
    --button-hover: #324e69;
    --select: var(--accent);
}

.classic {
    --background-color: #0f0f0f;
    --text-color: #fff;
    --border-color: #3b3b35;
    --border-hov: #363631;
    --accent: #1f1f1f;
    --navbar: #1f1f1f;
    --navtext: #fff;
    --mobilenav: #1f1f1faa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}

.first {
    --background-color: #18181b;
    --text-color: #fff;
    --border-color: #fff;
    --border-hov: #ccc;
    --accent: transparent;
    --navbar: #18181b;
    --navtext: #fff;
    --mobilenav: #18181baa;
    --nav-blur: none;
    --button-color: transparent;
    --button-hover: transparent;
    --select: var(--accent);
}


body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Whitney;
    overflow-x: hidden;
    margin: 0;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

select {
    width: 200px;
    height: 30px;
    background-color: var(--accent);
    background-color: var(--select);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: Whitney;
    outline: none;
    box-sizing: border-box;
}

select:focus {
    background-color: var(--accent);
    background-color: var(--select);
    border: 1px solid var(--border-hov);
}

option {
    width: 100px;
    background-color: var(--accent-color);
    color: var(--text-color);
    font-family: Whitney;
    font-weight: 100;
    box-sizing: border-box;
    height: 30px;
}

button {
    width: 100px;
    background-color: var(--button-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 5px;
    font-family: Whitney;
    outline: none;
    box-sizing: border-box;
    height: 30px;
}


button:hover {
    background-color: var(--button-hover);
    border: 1px solid var(--border-hov);
    cursor: pointer;
}

button:focus {
    background-color: var(--button-hover);
    border: 1px solid var(--border-hov);
}

form input {
	width: 200px;
    height: 30px;
    background-color: var(--button-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 5px;
    font-family: Whitney;
    outline: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

form input:focus {
	background-color: var(--button-hover);
    border: 1px solid var(--border-hov);
}

img {
    border-radius: 5px;
}

hr {
    border-color: var(--border-color);
}

.page {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 50px;
}

.read {
    flex: 1;
    border: 1px solid var(--border-color);
    background-color: var(--accent);
    margin: 10px;
    padding: 15px;
    border-radius: 5px;
}

.nav {
    display: flex;
    align-items: center;
    position: fixed;
    background: var(--navbar);
    -webkit-backdrop-filter: var(--nav-blur);
    backdrop-filter: var(--nav-blur);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
    padding: 0;
    width: 100%;
    height: 50px;
    z-index: 1000;
    font-size: 16px;
}

.inner-nav {
    margin: auto;
    box-sizing: border-box;
    padding: 2px 12px;
    display: flex;
    align-items: center;
    flex-basis: 1000px;
    height: 50px;
}

.nav-item {
    display: flex;
    flex: 1;
    height: 50px;
    flex-wrap: wrap;
    align-items: center;
}

.search {
    display: flex;
    align-items: end;
}

.searchbox {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.in {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: none;
}

.in:hover {
    border-left: none;
}

.in:focus {
    border-left: none;
}

.btn .in {
    font-size: 13px;
}

#searchType {
    border-left: none;
    border-radius: 0;
}

.nvl {
    margin-left: 5px;
    margin-right: 5px;
}

.header {
    margin: 10px;
}

.icon {
    font-weight: bold;
    color: var(--navtext);
}

.mobile {
    display: none;
    font-size: 32px;
    transform: translateY(-4px);
    font-family: Whitney;
}

.mobile:hover {
    text-decoration: none;
}

.about {
    height: 150px;
    margin: 10px;
    padding: 10px;
    margin-top: 50px;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
}

.mobile-nav {
    display: none;
}

.mobile {
    display: none;
}

.mobile-header {
    display: none;
}

.about-mobile {
    display: none;
}

.thumbnail-container {
	flex-shrink: 0;
	margin-right: 10px;
}

.thumbnail {
	width: 100px;
	height: auto;
	border-radius: 5px;
}

.project {
	display: flex;
}

.wrap {
	word-wrap: anywhere;
}

.comment {
    margin: 0;
    margin-bottom: 10px;
    margin-top: 10px;
    background-color: transparent;
}

@media screen and (max-width: 480px) {
    .read {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .nav-item {
        display: block;
        height: auto;
        text-align: center;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .about {
        height: 50px;
        opacity: 0;
    }

    #about {
        height: 50px;
        display: none;
    }


    .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding-bottom: 50px;
        padding-top: 5px;
        border-top: 1px solid var(--border-color);
        justify-content: space-evenly;
        /*background-color: #010409;*/
        background-color: var(--mobilenav);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px) saturate(180%);
    }

    .mobile-header {
        display: block;
    }

    .about-mobile {
        display: flex;
        flex-direction: column;
    }

    .about-mobile>a {
        font-size: 18px;
        padding-bottom: 5px;
        padding-top: 5px;
    }


	.thumbnail-container {
		margin: 0;
		width: 100%;
	}

	.thumbnail {
		width: 100%;
		height: auto;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.project {
		flex-direction: column;
	}
}

.mobile-nav-item>a {
    display: block;
    width: 100%;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: 30px;
    padding: 15px;
    padding-left: 25px;
    padding-right: 25px;
    transition: all 250ms;
}

.material-symbols-outlined:hover {
    transform: scale(0.8);
}

.material-symbols-outlined-no-trans {
    font-family: 'Material Symbols Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined-no-trans {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/*.exp-nav {
	background: none;
	mask-image: linear-gradient(rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0) 100%);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}

.exp-nav-mobile {
	background: #01040955;
	mask-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0,0,0) 25% ,rgb(0, 0, 0) 100%);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}*/


/*Fonts*/
@font-face {
    font-family: Whitney;
    font-weight: normal;
    src: url(fonts/whitney/whitney-medium.otf) format("opentype");
}

@font-face {
    font-family: Whitney;
    font-weight: bold;
    src: url(fonts/whitney/whitney-bold.otf) format("opentype");
}

@font-face {
    font-family: Whitney;
    font-weight: light;
    src: url(fonts/whitney/whitney-light.otf) format("opentype");
}

@font-face {
    font-family: Whitney Italic;
    font-weight: normal;
    src: url(fonts/whitney/whitney-mediumitalic.otf) format("opentype");
}

@font-face {
    font-family: Whitney Italic;
    font-weight: bold;
    src: url(fonts/whitney/whitney-semibolditalic.otf) format("opentype");
}

@font-face {
    font-family: Whitney Italic;
    font-weight: light;
    src: url(fonts/whitney/whitney-lightitalic.otf) format("opentype");
}

@font-face {
    font-family: Whitney Book;
    font-weight: normal;
    src: url(fonts/whitney/whitneybook.otf) format("opentype");
}

/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url(fonts/icon/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI.woff2) format('woff2');
}

@font-face {
    font-family: 'Material Symbols Round';
    font-style: normal;
    font-weight: 100 700;
    src: url(fonts/icon/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
}