/* root element (sort of the element) pseudo-class for global scoped variables*/
:root {
/*Miscellaneous*/
--primary-shadow-color: 0 0 10px #01c044, 0 0 20px #20ace4, 0 0 30px #4a0aa3;
--secondary-shadow-color: 0 0 5px #0affeb, 0 0 10px #00ffff, 0 0 20px #11ebeb;
--primary-hex-color: #000000;
--secondary-hex-color: #8eb8a3;
--background-white-rgb-color: rgb(255, 255, 255);
color-scheme: normal;
scrollbar-color: rebeccapurple green;
}
/* wildcard */
* {
/*Box model stuff*/
padding: 0px;
margin: 0px;
/*Miscellaneous*/
box-sizing: border-box;
/*Manipulations stuff*/
animation-name: cursor;
animation-duration: 2s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-play-state: running;
}
html * {
touch-action: manipulation;
font-family: Arial, Helvetica, sans-serif;
cursor: crosshair;
}
noscript {
background-color: red;
color: rgb(0, 0, 0);
font-size: 25px;
font-weight: bold;
text-align: center;
}
body {
/*Box model stuff*/
background: linear-gradient(90deg, #000000 0%, #494949 50%, #000000 100%);
background-color: var(--secondary-hex-color);
/*Typography stuff*/
font-size: calc(12px + (26 - 12) * ((100vw - 300px) / (1600 - 300)));
/*Miscellaneous*/
overflow: visible;
}
header {
/*Display stuff*/
display: flex;
/*Positioning stuff*/
position: sticky;
top: 0px;
z-index: 1;
/*Box model stuff*/
padding: 5px 10px;
border: var(--secondary-hex-color) 10px double;
border-radius: 20px;
background-attachment: fixed;
background-color: var(--primary-hex-color);
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
/*Miscellaneous*/
list-style-type: none;
overflow: hidden;
}
.Custom-Script-Details summary mark {
/*Display stuff*/
display: flex;
/*Positioning stuff*/
position: relative;
/*Box model stuff*/
padding: 10px;
margin: 0px;
/*Typography stuff*/
font-size: 12px;
font-weight: bold;
text-align: center;
text-shadow: 0 0 10px #ec5f5fbb, 0 0 20px #20ace4, 0 0 30px #4a0aae;
color: rgb(148, 46, 46);
/*Miscellaneous*/
list-style-type: none;
border-radius: 20px;
}
.Custom-Script-Details ul li p {
color: white;
text-shadow: var(--primary-shadow-color);
}
.Custom-Script-Details summary mark:hover {
/*Display stuff*/
display: flow;
/*Positioning stuff*/
position: relative;
/*Box model stuff*/
padding: 5px;
margin: 5px;
/*Typography stuff*/
font-size: 12px;
font-weight: bold;
text-align: center;
text-shadow: var(--primary-shadow-color);
color: rgb(148, 46, 46);
/*Miscellaneous*/
list-style-type: none;
border-radius: 20px;
background-color: var(--primary-hex-color);
color: var(--secondary-hex-color);
text-shadow: var(--secondary-shadow-color);
}
.Custom-Script-Details summary mark:hover .tooltiptext {
/*Miscellaneous*/
visibility: visible;
}
ul li p {
font-size: 10px;
color: var(--secondary-hex-color);
font-weight: bold;
display: flex;
text-align: left;
}
nav {
/*Display stuff*/
align-items: center;
justify-content: center;
/*Box model stuff*/
width: 100%;
margin: 0px auto;
padding: 0px;
/*Typography stuff*/
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: center;
text-shadow: var(--secondary-shadow-color);
border-radius: 20px;
}
header nav ul {
display: flex;
justify-content: center; /* Evenly space the items */
padding: 0;
margin: 0;
list-style: none;
}
header nav li {
/*Display stuff*/
display: inline-block;
/*Box model stuff*/
margin: 5px;
padding: 5px;
/*Miscellaneous*/
list-style: none;
flex: 1; /* Make each list item take up equal space */
text-align: center; /* Center the text within each list item */
}
header nav li a {
/*Display stuff*/
display: block;
/*Positioning stuff*/
z-index: 1;
width: 100%; /* Make the anchor tag take up the full width of the list item */
/*Box model stuff*/
margin: 0px;
padding: 10px 0px;
border-radius: 3px;
outline-color: var(--secondary-hex-color);
outline-style: double;
outline-width: 5px;
background: linear-gradient(90deg, #000000 0%, #494949 50%, #000000 100%);
/* background-color: rgb(72, 12, 212); */
/*Typography stuff*/
color: var(--primary-hex-color);
text-decoration: none;
/*Miscellaneous*/
line-height: 1.5;
}
header nav li a:hover,
header nav li a:active,
header nav li a:focus {
background-color: var(--primary-hex-color) drop-shadow(0px 0px 1.2rem var(--secondary-hex-color));
color: white;
outline-color: whitesmoke;
transform: scale(1) rotate(0deg) translate(0%, 0%);
filter: saturate(6) contrast(100%) drop-shadow(0px 0px 1.2rem var(--secondary-hex-color)) brightness(1) sepia(0%) opacity(95%) hue-rotate(4deg) grayscale(50%) blur(0px) invert(5%);
outline-style: dashed;
outline-width: 2px;
box-shadow: 2px 0px 1px var(--primary-hex-color);
border-radius: 3px;
}
.rightNow {
/*Display stuff*/
display: grid;
/*Positioning stuff*/
margin: 5px auto;
padding: 5px;
align-items: center;
justify-content: center;
background-color: whitesmoke;
/*Box model stuff*/
border: 1px dotted rgb(148, 46, 46);
/*Typography stuff*/
color: var(--primary-hex-color);
font-size: 14px;
border-radius: 20px;
width: 400px;
}
#canvasID {
/*Display stuff*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*Positioning stuff*/
background-color: #000000;
/*Box model stuff*/
border: 2px dotted rgb(39, 54, 36);
/*Typography stuff*/
color: var(--primary-hex-color);
font-size: 14px;
}
.outer {
width: 100%;
border-color: #000000;
border-width: 5px;
}
.inner {
font-family: monospace;
position:relative;
width: 100%;
background-color: rgb(248, 0, 174);
color: white;
cursor: crosshair;
user-select: none;
border-color: #000000;
border-width: 5px;
}
.tooltip-nav {
/*Display stuff*/
display: inline-block;
/*Positioning stuff*/
position: relative;
/*Box model stuff*/
border-bottom: 1px dotted black;
/*Typography stuff*/
color: var(--primary-hex-color);
font-size: 14px;
}
.tooltip-nav .tooltiptext-nav{
/*Positioning stuff*/
position: absolute;
left: -5%;
top: 30px;
z-index: 4;
/*Box model stuff*/
width: auto;
padding: 2px 2px;
border-radius: 6px;
background-color: rgb(48, 41, 41);
/*Typography stuff*/
text-align: center;
color: var(--secondary-hex-color);
/*Miscellaneous*/
visibility: hidden;
/* Position the tooltip */
}
.tooltip-nav:hover .tooltiptext-nav {
/*Miscellaneous*/
visibility: visible;
}
hr {
/*Box model stuff*/
border: none;
/*Typography stuff*/
text-align: center;
color: #333;
/*Miscellaneous*/
overflow: visible;
}
hr:after {
/*Display stuff*/
content: "⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘";
/*Box model stuff*/
padding: 0 0px;
}
.hero {
/*Box model stuff*/
margin: 0 auto;
padding: 0;
background-attachment: fixed;
background-image: url(../images/ns-6-14-2024-stsci-01h1q2vfhvmajgh4wrnmk0dy52.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*Typography stuff*/
font-weight: bold;
text-align: center;
text-shadow: var(--primary-shadow-color);
color: var(--primary-hex-color);
border: 10px double var(--secondary-hex-color);
border-radius: 20px;
}
.hero img {
/*Positioning stuff*/
position: relative;
/*Box model stuff*/
width: auto;
height: auto;
border: 5px solid var(--secondary-hex-color);
border-radius: 50%;
/*Miscellaneous*/
box-shadow: var(--primary-shadow-color);
/*Box model stuff*/
border: 10px ridge var(--primary-hex-color);
}
.hero img:hover {
transform: scale(0.9);
filter: saturate(0.9) drop-shadow(10px 5px 2rem rgba(0, 255, 34, 0.7)) brightness(.8) sepia(30%) opacity(90%) hue-rotate(4deg) grayscale(30%) blur(0px) invert(5%);
}
.hero-intro {
/*Positioning stuff*/
position: relative;
top: -50px;
/*Box model stuff*/
padding: 0 0px;
border-radius: 10px;
/*Typography stuff*/
}
#hero-name {
/*Positioning stuff*/
position: relative;
/*Typography stuff*/
font-size: 50px;
text-shadow: var(--primary-shadow-color);
color: var(--primary-hex-color);
}
#hero-name:hover {
/*Typography stuff*/
transform: scale(0.9) rotate(5deg) translate(10%, 10%);
filter: saturate(0.9) drop-shadow(10px 5px 2rem rgba(0, 255, 34, 0.7)) brightness(.8) sepia(30%) opacity(90%) hue-rotate(4deg) grayscale(30%) blur(0px) invert(5%);
}
.about-me {
/*Display stuff*/
/*Box model stuff*/
background-color: var(--secondary-hex-color);
/*Typography stuff*/
color: var(--primary-hex-color);
}
section .container-heading h1 {
text-shadow: var(--primary-shadow-color);
font-weight: bolder;
border: 10px ridge var(--primary-hex-color);
padding: 1.2rem;
}
.container-content {
border: 10px ridge var(--primary-hex-color);
background-color:rgb(0, 0, 0);
width: 100%;
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.container-content p {
color: rgb(255, 255, 255);
padding-left: 5px;
font-weight: normal;
font-size: calc(10px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
}
.div-resume {
display: flexbox;
border: 10px ridge var(--primary-hex-color);
background-color: rgb(92, 92, 92);
width: 100%;
padding: 0.5rem;
flex-direction: column;
}
.p-resume {
font: small-caps bold 1.2rem sans-serif;
justify-content: center;
display: flex;
font-size: 30px;
text-shadow: 0 0 10px var(--primary-hex-color), var(--primary-shadow-color), 0 0 10px var(--primary-hex-color);
}
.fieldset-1 {
/*Display stuff*/
background-color: var(--primary-hex-color);
font-weight: bold;
}
.fieldset-2 {
background-color: var(--primary-hex-color);
}
.fieldset-3 {
color: black;
}
details {
border: 1px dotted;
border-radius: 4px;
padding: 0.5em 0.5em 0;
text-align: center;
align-self: center;
width: auto;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
display: inline;
align-self: center;
width: auto;
text-align: center;
}
mark {
background-color: var(--primary-hex-color);
color: var(--secondary-hex-color);
padding: 2px;
}
mark:hover {
background-color: var(--secondary-hex-color);
color: var(--primary-hex-color);
}
details[open] {
padding: 0.5em;
font-weight: bold;
font-size: 14px;
background-color: black;
color: green;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
background-color: var(--primary-hex-color);
color: var(--secondary-hex-color);
}
.legend-3-span mark {
/*Display stuff*/
display: flexbox;
/*Positioning stuff*/
position: relative;
/*Box model stuff*/
margin: 0px;
/*Typography stuff*/
font-size: 12px;
font-weight: bold;
text-align: center;
text-shadow: 0 0 10px #ec5f5fbb, 0 0 20px #20ace4, 0 0 30px #4a0aae;
color: rgb(148, 46, 46);
/*Miscellaneous*/
list-style-type: none;
border-radius: 20px;
}
.resume-details {
/*Display stuff*/
display: block;
/*Box model stuff*/
background-color: var(--primary-hex-color);
/*Typography stuff*/
font-size: 14px;
font-weight: bold;
text-align: center;
color: var(--secondary-hex-color);
border: 10px ridge var(--secondary-hex-color);
}
.details-p {
font-size: 12px;
text-align: left;
}
.projects {
/*Display stuff*/
display: flexbox;
/*Box model stuff*/
background-color: var(--primary-hex-color);
/*Typography stuff*/
font-size: 14px;
font-weight: bold;
text-align: center;
color: var(--secondary-hex-color);
border: 10px ridge var(--secondary-hex-color);
}
.project-header {
/*Typography stuff*/
font-size: calc(26px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
text-shadow: var(--primary-shadow-color);
color: var(--primary-hex-color);
border: 10px ridge var(--secondary-hex-color);
padding: 1.2rem;
display: flex;
justify-self: center;
}
.project-title{
border: thin var(--secondary-hex-color) solid;
background-color: rgb(0, 0, 0);
width: max(200px, 10%);
display: inline-block;
}
.project-grid-container {
margin: 0 auto;
display: inline-flex;
justify-content: center;
gap: 5px;
width: 100%;
padding: 0.5rem;
border: 10px ridge var(--primary-hex-color);
background-color: rgb(30, 24, 43)
}
.project-container-left {
border: thin var(--secondary-hex-color) solid;
background-color: rgb(0, 0, 0);
font-size: calc(16px + (16 - 14) * ((100vw - 300px) / (1600 - 300)));
width: 600px;
max-width: 600px;
min-width: 100px;
max-height: 400px;
min-height: 100px;
overflow: auto;
}
.project-repository-dialog {
font-family: monospace;
text-align: left;
font-size: 12px;
padding-left: 5px;
}
.project-container-right {
border: thin var(--secondary-hex-color) solid;
grid-area: right;
width: 600px;
max-width: 600px;
min-width: 100px;
max-height: 400px;
min-height: 100px;
display: block;
background-size: contain;
}
.project-container-right-img {
width:100%;
height: 200px;
display: block;
background-size: contain;
}
figure {
display: flex;
flex-direction: column;
border: thin #c0c0c0 solid;
background-color: rgb(0, 0, 0);
}
figcaption {
border: thin var(--secondary-hex-color) solid;
background-color: #222;
color: #fff;
font: italic smaller sans-serif;
padding: 3px;
text-align: left;
width: auto;
}
footer {
/*Typography stuff*/
font-size: clamp(1.5rem, 1.8vw, 1.8rem);
font-weight: bold;
text-align: center;
border: 10px ridge var(--secondary-hex-color);
}
footer p{
/*Typography stuff*/
font-size: clamp(1.8rem, 1.8vw, 2rem);
color: var(--secondary-hex-color);
}
footer details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: 0.5em;
}
.tooltip {
/*Display stuff*/
display: inline-block;
/*Positioning stuff*/
position: relative;
/*Box model stuff*/
border-bottom: 1px dotted black;
/*Typography stuff*/
color: var(--primary-hex-color);
}
.tooltip .tooltiptext {
/*Positioning stuff*/
position: absolute;
left: 105%;
top: -5px;
z-index: 4;
/*Box model stuff*/
width: auto;
padding: 10px 10px;
border-radius: 6px;
background-color: black;
/*Typography stuff*/
text-align: center;
color: var(--secondary-hex-color);
/*Miscellaneous*/
visibility: hidden;
/* Position the tooltip */
}
.tooltip:hover .tooltiptext {
/*Miscellaneous*/
visibility: visible;
}
#contact-me {
width: auto;
}
#contact-me > details > h4 {
font-size: 25px;
}
#contact-me > details > div {
font-size: 20px;
align-items: stretch;
display: flex;
justify-content: space-around;
align-self: stretch;
justify-items: center;
width: auto;
border: thin var(--secondary-hex-color) solid;
color: var(--secondary-hex-color);
}
#contact-me > details > .legend-3-span {
font-size: 20px;
display: inline-grid;
border: thin var(--secondary-hex-color) solid;
color: var(--secondary-hex-color);
}
div .contact-list-item {
font-size: 20px;
padding: 5px;
margin: 10px;
width: auto;
border: thin var(--secondary-hex-color) solid;
color: var(--secondary-hex-color);
}
div .contact-list-item span {
padding: 5px;
margin: 10px;
color: var(--secondary-hex-color);
}
div .contact-list-item p {
color: var(--secondary-hex-color);
}
.contact-info iframe {
border: 1px solid rgb(10, 231, 2);
max-width: 600px;
max-height: 600px;
}
/* === dhbinfo.js Info Panel Spreadsheet Style (Force Visibility) === */
#dhbinfo-panel {
width: 100% !important;
max-width: 700px;
margin: 1.5em auto !important;
border-collapse: collapse;
background: #181818 !important;
border-radius: 8px !important;
box-shadow: 0 2px 12px 0 #0008 !important;
font-size: 1rem !important;
overflow-x: auto !important;
padding: 0.5em 0.5em 1em 0.5em !important;
color: #e0e0e0 !important;
display: block !important;
z-index: 1000 !important;
}
.dhbinfo-row {
display: table-row !important;
border-bottom: 1px solid #333 !important;
}
.dhbinfo-label, .dhbinfo-value {
display: table-cell !important;
padding: 0.5em 1em !important;
vertical-align: middle !important;
border-bottom: 1px solid #333 !important;
}
.dhbinfo-label {
font-weight: bold !important;
color: #8eb8a3 !important;
background: #232323 !important;
min-width: 180px !important;
border-right: 1px solid #333 !important;
}
.dhbinfo-value {
color: #e0e0e0 !important;
background: #181818 !important;
min-width: 120px !important;
text-align: left !important;
}
#dhbinfo-panel .dhbinfo-row:last-child .dhbinfo-label,
#dhbinfo-panel .dhbinfo-row:last-child .dhbinfo-value {
border-bottom: none !important;
}
@media (max-width: 600px) {
#dhbinfo-panel {
font-size: 0.9rem !important;
max-width: 100vw !important;
padding: 0.2em !important;
}
.dhbinfo-label, .dhbinfo-value {
padding: 0.3em 0.5em !important;
min-width: 80px !important;
}
}
/* === End dhbinfo.js Info Panel Spreadsheet Style === */
@media only screen and (max-width: 1200px) {
details,
summary {
max-width: 980px;
width: 980px;
}
}
/* MEDIA QUERY FOR SMALLER DESKTOP SCREENS The "only" is to prevent older browser that do not support media queries*/
@media only screen and (max-width: 980px) {
html {
overflow: auto;
font-size: 20px;
}
nav ul li a {
font-size: 20px;
}
details,
summary {
max-width: 640px;
width: 640px;
}
}
@media only screen and (max-width: 640px) {
html {
overflow: auto;
font-size: 16px;
}
nav ul li a {
font-size: 16px;
}
hr {
overflow: visible;
text-align: center;
height: 5px;
}
hr:after {
content: "⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘⫘";
padding: 0 0px;
position: relative;
top: -20px;
}
.hero-intro h1{
font-size: 16px;
top: 30px;
border-radius: 10px;
}
.hero-intro img {
transform: scale(0.7);
}
.hero-intro {
padding: 0 0px;
font-size: 18px;
top: -30px;
border-radius: 10px;
}
#hero-name {
font-size: 20px;
position: relative;
top: -20px;
}
details,
summary {
max-width: 480px;
width: 480px;
}
.project-grid-container {
width: 75%;
}
.projects img {
width: 100%;
height: auto;
}
}
.google-map {
width: 480px;
height: 480px;
}
@media only screen and (max-width: 480px) {
.projects h1 {
font-size: 14px;
}
h3 {
font-size: 12px;
}
h4 {
font-size: 10px;
}
.hero-intro h1{
font-size: 12px;
top: 30px;
}
.hero-intro h3{
font-size: 10px;
top: 30px;
}
.hero-intro img {
transform: scale(0.7);
}
details,
summary {
max-width: 300px;
width: 300px;
}
.project-grid-container {
width: 50%;
}
.projects img {
width: 100%;
height: auto;
}
.contact-info iframe {
width: auto;
height: auto;
}
}
@media only screen and (max-width: 480px) {
html {
font-size: 14px;
}
body {
font-size: 14px;
}
header {
flex-direction: column;
padding: 10px;
}
header nav ul {
flex-direction: column;
}
header nav li {
margin: 5px 0;
}
header nav li a {
font-size: 14px;
padding: 8px 0;
}
.hero {
padding: 10px;
border-radius: 10px;
}
.hero img {
width: 100%;
height: auto;
border-radius: 10px;
}
.hero-intro {
top: 0;
padding: 10px;
}
#hero-name {
font-size: 24px;
}
.project-grid-container {
flex-direction: column;
padding: 10px;
}
.project-container-left,
.project-container-right {
width: 100%;
max-width: 100%;
min-width: 100%;
max-height: auto;
min-height: auto;
}
.contact-info iframe {
width: 100%;
height: auto;
}
footer {
padding: 10px;
}
footer p {
font-size: 14px;
}
}
@keyframes projects {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes Loadup {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cursor {
0% {
cursor: url(../cursorfavicon/niksharfavicon16x.ico) 0 0, crosshair;
}
20% {
cursor: url(../cursorfavicon/niksharpfavicon16x.ico) 0 0, crosshair;
}
40% {
cursor: url(../cursorfavicon/niksharfavicon36x.ico) 0 0, crosshair;
}
60% {
cursor: url(../cursorfavicon/niksharpfavicon36x.ico) 0 0, crosshair;
}
80% {
cursor: url(../cursorfavicon/niksharfavicon64x.ico) 0 0, crosshair;
}
100% {
cursor: url(../cursorfavicon/niksharpfavicon64x.ico) 0 0, crosshair;
}
}