/* 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: #32a824;
--background-white-rgb-color: rgba(255, 255, 255, 1);
color-scheme: light dark;
scrollbar-color: rebeccapurple green;
}
/* wildcard */
* {
/*Box model stuff*/
padding: 0;
/*Typography stuff*/
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*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;
}
body {
/*Box model stuff*/
background-color: var(--secondary-hex-color);
/*Typography stuff*/
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
font-weight: 300;
/*Miscellaneous*/
overflow: visible;
cursor: pointer;
}
header {
/*Display stuff*/
display: flex;
/*Positioning stuff*/
position: sticky;
top: 0;
z-index: 1;
/*Box model stuff*/
padding: 10px 30px;
border: var(--secondary-hex-color) 10px double;
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;
}
ul li p {
font-size: 10px;
color: var(--secondary-hex-color);
font-weight: bold;
display: flex;
text-align: left;
}
nav {
/*Box model stuff*/
width: 100%;
margin: 0 auto;
padding: 0;
/*Typography stuff*/
font-size: 20px;
text-align: center;
text-shadow: var(--secondary-shadow-color);
}
header nav li {
/*Display stuff*/
display: inline-block;
/*Box model stuff*/
margin: 10px;
padding: 0px;
/*Miscellaneous*/
list-style: none;
}
header nav li a {
/*Display stuff*/
display: block;
/*Positioning stuff*/
z-index: 1;
/*Box model stuff*/
margin: 0;
padding: 5px 10px;
border-radius: 3px;
outline-color: var(--secondary-hex-color);
outline-style: double;
outline-width: 5px;
background-color: var(--secondary-hex-color);
/*Typography stuff*/
font-size: 18px;
font-weight: bold;
text-decoration: none;
color: var(--primary-hex-color);
/*Miscellaneous*/
line-height: 1.5;
cursor: pointer;
}
header nav li a:hover {
/*Positioning stuff*/
z-index: 1;
/*Box model stuff*/
padding: 5px 10px;
border-radius: 3px;
outline-color: var(--primary-hex-color);
outline-style: dashed;
outline-width: 2px;
background-color: var(--primary-hex-color);
/*Typography stuff*/
text-decoration: none;
color: var(--secondary-hex-color);
/*Miscellaneous*/
cursor: pointer;
box-shadow: 2px 0px 1px var(--primary-hex-color);
transform: scale(0.9) rotate(5deg) translate(10%, 10%);
filter: saturate(1) contrast(200%) drop-shadow(5px 5px 2rem var(--secondary-hex-color)) brightness(1) sepia(5%) opacity(95%) hue-rotate(4deg) grayscale(50%) blur(0px) invert(5%);
}
header nav li a:active {
/*Box model stuff*/
padding: 5px 10px;
border-radius: 3px;
outline-color: var(--primary-hex-color);
outline-style: dashed;
outline-width: 2px;
background-color: var(--primary-hex-color);
/*Typography stuff*/
text-decoration: none;
color: var(--secondary-hex-color);
/*Miscellaneous*/
cursor: pointer;
box-shadow: 2px 0px 1px var(--primary-hex-color);
}
header nav li a:focus {
/*Positioning stuff*/
z-index: 1;
/*Box model stuff*/
padding: 5px 10px;
border-radius: 3px;
outline-color: var(--primary-hex-color);
outline-style: dashed;
outline-width: 2px;
background-color: var(--primary-hex-color);
/*Typography stuff*/
text-decoration: none;
color: var(--secondary-hex-color);
/*Miscellaneous*/
cursor: pointer;
box-shadow: 2px 0px 1px var(--primary-hex-color);
}
.canvas {
background-color: url(./assets/images/avatarNikShar2022.png);
}
.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: black;
/*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/Frameless-Acrylic-paint-By-Numbers-DIY-Little-White-Boat-Home-decor-Wall-font-b-Art-b.webp);
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);
}
.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;
/*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);
color: var(--primary-hex-color);
background-color: var(--primary-hex-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);
}
.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 {
border: 10px ridge var(--primary-hex-color);
background-color: var(--secondary-hex-color);
width: 100%;
padding: 0.5rem;
display: flex;
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;
max-width: 1200px;
width: auto;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
display: inline;
max-width: 1200px;
width: 1200px;
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);
}
.projects {
/*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);
}
.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);
}
.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 {
display: flex;
position: relative;
justify-content: center;
flex-flow: row wrap;
margin: auto;
overflow: hidden;
max-width: 100%;
}
.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-flow: column;
margin: auto;
border: thin #c0c0c0 solid;
padding: 5px;
background-color: black;
width: 600px;
}
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 {
/*Box model stuff*/
background-color: var(--primary-hex-color);
/*Typography stuff*/
font-size: clamp(1.5rem, 1.8vw, 1.8rem);
font-weight: bold;
text-align: center;
color: var(--primary-hex-color);
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;
background-color: var(--primary-hex-color);
color: var(--primary-hex-color);
}
.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;
}
@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;
}
.hero-intro img {
transform: scale(0.7);
}
.hero-intro {
padding: 0 0px;
font-size: 18px;
top: -30px;
}
#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;
}
}
@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;
}
}