/* prerequisites */
:root {
    --color-text: white;
    --color-text-semi-highlight: rgb(189, 255, 186);

    --color-click: rgb(131, 131, 131);
    --color-hover: rgba(75, 75, 75, 0.911);

    --color-background: rgba(9, 9, 9, 0.911);
    --color-backgrounder: rgba(6, 6, 6, 0.95);
    --color-backgroundest: rgb(0, 0, 0);

    --color-highlight-bg: rgb(7, 219, 0);
    --color-highlight-dark-bg: rgb(1, 32, 0);

    --color-master: rgb(68, 0, 255);
    --color-expert: rgb(0, 89, 255);
    --color-advanced: rgb(0, 255, 0);
    --color-proficient: rgb(6, 182, 0);
    --color-competent: rgb(80, 179, 0);
    --color-learner: rgb(168, 206, 0);

    --color-backgroundest-semi-transparent: rgba(0, 0, 0, 0.8);
    --color-cmd-text: rgb(0, 255, 0);

    --pointer: url("/src/cursors/pointer.png");
    --cursor: url("/src/cursors/cursor.png");
    --text: url("/src/cursors/text.png");
}


* {
    color: white;
    top: 0;
    left: 0;
    font-family: "Consolas", monospace, auto;
}

body {
    background-color: var(--color-backgroundest);
    cursor: var(--cursor), auto;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
}

[data-main-name] {
    display: none;
}

[data-main-name="command-line"] {
    display: block;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;

    background-color: var(--color-backgroundest);
    color: var(--color-cmd-text);
    padding: 0em 0.25em;
}

a {
    cursor: var(--pointer), pointer;
}

input[type="text"] {
    cursor: var(--text), text;
}


/* command line */
[data-main-name="command-line"] > p {
    color: var(--color-cmd-text);
    margin: 0;
}


/* intro section */
#s1 {
    position: absolute;
    top: 200px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 3vw;
    animation: 1.5s ease 0s 1 normal forwards running opacity-show;
}

#s1 > h1 {
    margin: 0;
    font-size: 9vw;
}

#s1 > p {
    margin: 0;
    font-size: 4vw;
}

/* who am i section */
#s2 {
    position: absolute;
    top: 950px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s2 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s2 > p {
    margin: 0;
    font-size: 4vw;
}

/* hobbies */
#s3 {
    position: absolute;
    top: 2400px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s3 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s3 > p {
    margin: 0;
    font-size: 4vw;
}

/* picture of me */
#s4 {
    position: absolute;
    top: 4800px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s4 > p {
    margin: 0;
    font-size: 4vw;
}

#s4 > img {
    max-width: 80vw;
    max-height: 60vh;
    margin: 1em;
    user-select: none;
}


/* as a programmer */
#s5 {
    position: absolute;
    top: 7500px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s5 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s5 > p {
    margin: 0;
    font-size: 4vw;
}


/* programming languages */
#s6 {
    position: absolute;
    top: 8500px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s6 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s6 > p {
    margin: 0;
    font-size: 4vw;
}

#s6 > .contrast {
    color: var(--color-text-semi-highlight);
}


/* school life */
#s7 {
    position: absolute;
    top: 11500px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s7 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s7 > p {
    margin: 0;
    font-size: 4vw;
}


/* achievements */
#s8 {
    position: absolute;
    top: 12500px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s8 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s8 > p {
    margin: 0;
    font-size: 4vw;
    text-align: left;
}


/* projects */
#s9 {
    position: absolute;
    top: 13500px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s9 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s9 > p {
    margin: 0;
    font-size: 4vw;
}


/* cards */
.cards {
    display: flex;
    overflow-x: auto;
    padding: 2em 0em;
    gap: 1em;
    justify-content: space-around;
    user-select: none;
}

.cards > a {
    text-decoration: none;
    background-color: var(--color-background);
    border-radius: 2em;
    padding: 0.5em 0;
    cursor: var(--pointer), pointer;
}

.cards > a:hover {
    background-color: var(--color-hover);
}

.cards > a:active {
    background-color: var(--color-click);
}

.cards > a:hover .card > img {
    background-color: var(--color-click);
}

.card > img {
    width: 80vw;
    height: 30vh;
    object-fit: contain;

    background-color: var(--color-backgrounder);
}

.card > div {
    width: 80vw;
    padding: 1em;
}

.card > div > h2 {
    font-size: 5vw;
}

.card > div > p {
    font-size: 3.5vw;
}

.cards::-webkit-scrollbar {
    color: var(--color-text)
}

.cards::-webkit-scrollbar-track {
    background: linear-gradient(var(--color-click), var(--color-backgrounder));
}

.cards::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--color-highlight-dark-bg), var(--color-highlight-bg))
}


/* games */
#s10 {
    position: absolute;
    top: 14500px;
    left: 0;
    right: 0;

    color: var(--color-text);

    max-width: 100vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s10 > h1 {
    margin: 0;
    font-size: 6vw;
}


/* websites */
#s11 {
    position: absolute;
    top: 16000px;
    left: 0;
    right: 0;

    color: var(--color-text);

    max-width: 100vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s11 > h1 {
    margin: 0;
    font-size: 6vw;
}


/* other projects */
#s12 {
    position: absolute;
    top: 17500px;
    left: 0;
    right: 0;

    color: var(--color-text);

    max-width: 100vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s12 > h1 {
    margin: 0;
    font-size: 6vw;
}

/* blogs */
#blogs {
    position: absolute;
    top: 21000px;
    left: 0;
    right: 0;

    color: var(--color-text);

    max-width: 100vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#blogs > h1 {
    margin: 0;
    font-size: 6vw;
}



/* contacts */
#s13 {
    position: absolute;
    top: 23500px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s13 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s13 > p {
    margin: 0;
    font-size: 4vw;
}

#s13 > p > a {
    text-decoration: none;
    color: var(--color-text-semi-highlight);
    cursor: var(--pointer), pointer;
}

#s13 > p > a:hover {
    text-decoration: underline;
}



/* history of website */
#s14 {
    position: absolute;
    top: 25000px;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#s14 > h1 {
    margin: 0;
    font-size: 6vw;
}

#s14 > p {
    margin: 0;
    font-size: 4vw;
}

#s14 > a {
    margin: 0;
    font-size: 4vw;
    display: block;
    text-decoration: none;
    color: var(--color-text-semi-highlight);
    cursor: var(--pointer), pointer;
}

#s14 > a:hover {
    text-decoration: underline;
}

#s14 > .end {
    margin: 0;
    font-size: 3vw;
}


/* redirect section */
#r {
    position: absolute;
    top: 25vh;
    left: 0;
    right: 0;

    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: auto;
    text-align: center;
    padding: 2vw;
    
    border-radius: 1em;
}

#r > h1 {
    margin: 0;
    font-size: 6vw;
}

#r > p {
    margin: 0;
    font-size: 4vw;
}

/* blog section */
#blog {
    display: block;
    position: relative;
    top: 100px;
    padding: 2em;
}

#blog > div {
    background: var(--color-background);
    color: var(--color-text);

    max-width: 85vw;
    margin: 2em auto;
    text-align: left;
    padding: 2vw;
    
    border-radius: 1em;
}

#blog h1 {
    margin: 0;
    font-size: 8vw;
}

#blog h2 {
    margin: 0;
    font-size: 4.5vw;
}

#blog p {
    margin: 0;
    font-size: 4vw;
}

#blog a {
    color: var(--color-cmd-text);
    overflow-wrap: anywhere;
}

#blog img {
    display: block;
    width: 100%;
    margin: 1.5em auto;
}


/* navigation */
nav {
    position: fixed;
    width: 100%;
    color: var(--color-text);
    background-color: var(--color-backgroundest-semi-transparent);
    display: flex;
    z-index: 5;
    border: 1px solid var(--color-text);
    user-select: none;
    box-sizing: border-box;
}

nav > a {
    padding: 1em 1em;
    border-right: 1px solid var(--color-text);
    display: flex;
    align-items: center;
    gap: 1em;
    cursor: var(--pointer), pointer;
    text-decoration: none;
}

nav > a:hover {
    background-color: var(--color-hover)
}

nav > a:active {
    background-color: var(--color-click);
}

nav > a.right {
    margin-left: auto;
    border-right: none;
    border-left: 1px solid var(--color-text);
}

nav > a > img {
    width: 25px;
    height: 25px;
    filter: invert(1);
}

nav > a > p {
    display: none;
    font-size: 1em;
}

nav > div {
    display: flex;
    box-sizing: border-box;
    position: absolute;
    width: calc(100% + 2px);
    height: 1.5em;
    top: 100%;
    left: -1px;
    margin: 0;
    padding: 0;
}

nav > div > input {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    padding-block: 0;
    padding-inline: 0.5em;
    border: 1px solid var(--color-text);
    background-color: var(--color-backgroundest);
    color: var(--color-cmd-text);
    cursor: var(--text), text;
}

nav > div > input:focus-visible {
    outline: none;
}

nav > div > input::placeholder {
    color: var(--color-click);
}

nav > div > button {
    background-color: var(--color-backgroundest);
    color: var(--color-cmd-text);
    padding-block: 0;
    padding-inline: 0;
    padding: 0 1em;
    border: 1px solid var(--color-text);
    border-left: none;
    cursor: var(--pointer), pointer;
}

nav > div > button:hover {
    background-color: var(--color-hover);
}

nav > div > button:active {
    background-color: var(--color-click);
}


/* scrollbar */
::-webkit-scrollbar {
    color: var(--color-text)
}

::-webkit-scrollbar-track {
    background: linear-gradient(0.25turn, var(--color-click), var(--color-backgrounder));
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(0.25turn, var(--color-highlight-dark-bg), var(--color-highlight-bg));
    cursor: var(--pointer), pointer;
}


/* text select */
::selection {
    background-color: var(--color-highlight-bg);
    color: var(--color-highlight-dark-bg);
    font-family: "Arial";
}



/* barlists */
.barlist {
    margin: 0;
    font-size: 3.25vw;
    user-select: none;
}

.baritem {
    border-radius: 1em;
    display: flex;
    align-items: center;
}

.baritem > .name {
    display: inline;
    margin: 0;
    text-align: right;
    width: 30%;
    padding-right: 0.5em;
}

.baritem > meter {
    display: inline;
    height: 1em;
    width: 40%;
}

.baritem > meter::-webkit-meter-bar {
    background-color: var(--color-backgrounder);
    border-radius: 0;
}

.baritem > meter[data-status="Master"]::-webkit-meter-optimum-value {
    background-color: var(--color-master);
}

.baritem > .status[data-status="Expert"] {
    color: var(--color-master)
}

.baritem > meter[data-status="Expert"]::-webkit-meter-optimum-value {
    background-color: var(--color-expert);
}

.baritem > .status[data-status="Expert"] {
    color: var(--color-expert)
}

.baritem > meter[data-status="Advanced"]::-webkit-meter-optimum-value {
    background-color: var(--color-advanced);
}

.baritem > .status[data-status="Advanced"] {
    color: var(--color-advanced)
}

.baritem > meter[data-status="Proficient"]::-webkit-meter-optimum-value {
    background-color: var(--color-proficient);
}

.baritem > .status[data-status="Proficient"] {
    color: var(--color-proficient)
}

.baritem > meter[data-status="Competent"]::-webkit-meter-optimum-value {
    background-color: var(--color-competent);
}

.baritem > .status[data-status="Competent"] {
    color: var(--color-competent)
}

.baritem > meter[data-status="Learner"]::-webkit-meter-optimum-value {
    background-color: var(--color-learner);
}

.baritem > .status[data-status="Learner"] {
    color: var(--color-learner)
}

.baritem > .status {
    display: inline;
    text-align: left;
    margin: 0;
    padding-left: 0.5em;
    width: 30%;
}

.shiny {
    color: var(--color-cmd-text);
    user-select: none;
    animation: 2s infinite alternate shiny;
}