/* ==================================================== /
# Project Title: Portfolio Website
# Started:  26/05/2025 19:06
# Author: Jordan
/ ==================================================== */

/*  ;                Variables Core Style                 */
:root {
  --main-background: rgba(22, 22, 22, 0.4);
  --image-colour-background: rgba(211, 68, 255, 0.2);
  --hover-background: rgba(211, 68, 255, 0.4);
  --main-colour: rgb(208, 143, 214);
  --second-colour: rgb(105, 16, 156);
  --white: #FFFFFF;
  --gray: #525252;
  --black: #000;
  --dark-background: rgba(22, 22, 22, 0.7);

  /*--- Summary Animation ---*/
  interpolate-size: allow-keywords;

  /*--- Progress Bar Percentages ---*/
  --5-percent: #FF0000;
  --10-percent: #F91A00;
  --15-percent: #F33400;
  --20-percent: #ED4E00;
  --25-percent: #E76800;
  --30-percent: #E18200;
  --35-percent: #DB9C00;
  --40-percent: #D5B600;
  --45-percent: #CFCF00;
  --50-percent: #C3E300;
  --55-percent: #B7F700;
  --60-percent: #9EFF00;
  --65-percent: #84FF00;
  --70-percent: #6AFF00;
  --75-percent: #50FF00;
  --80-percent: #36FF00;
  --85-percent: #1CFF00;
  --90-percent: #08FF00;
  --95-percent: #04FF08;
  --100-percent: #00FF00;
}

/*--- General Styling ---*/
html {
  scroll-behavior: smooth;
}

body {
  background-image: url(../media/images/backgrounds/canada.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  max-height: 100vh;
  max-width: 100vw;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  width: 100%;
  padding: 0.5vh 0.5vw 0.5vh 0.5vw;
  background-color: var(--main-background);
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
}

h1 {
  font-size: 4rem;
  color: var(--main-colour);
  text-transform: uppercase;
  text-align: center;
  flex-grow: 1;
}

h2 {
  color: var(--second-colour);
  font-size: 3.2rem;
  text-decoration: underline;
  text-align: center;
}

h4 {
  text-align: center;
}

main {
  margin: 1rem 0;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 1s,
    content-visibility 1s;
    
  transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

summary {
  font-size: 1.5rem;
  cursor: pointer;
  list-style-position: outside;
  margin-inline-start: 1rem;
}

p {
  margin: 1em 0;
}

a {
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
  font-style: italic;
}

a:visited {
  color: var(--white);
}

a:hover {
  cursor: pointer;
  color: var(--second-colour);
}

footer {
  left: 0;
  bottom: 0;
  padding-top: 0.2rem;
  display: flex;
  width: 100vw;
  background-color: var(--dark-background);
  justify-content: space-around;
  position: fixed;
}

/* ~ ====================================================
~                                     Navigation
~                                       Section
~ ==================================================== */
#nav-logo-link {
  height: 10vh;
  margin: 10px;
  border-radius: 5rem;
  box-sizing: border-box;
  outline: var(--second-colour) 3px solid;
  background-color: var(--hover-background);
  transition: ease-in-out;
}

#nav-logo-link:hover {
  transition: all 2s ease-in-out;
  outline: var(--main-colour) 3px solid;
  rotate: 360deg;
}

#nav-logo-link>img {
  height: 100%;
  border-radius: 5rem;
}

/* ~ ====================================================
~                                            Main
~                                         Section
~ ==================================================== */
#main-content {
  width: 90%;
  display: flex;
  flex-direction: column;
  margin: auto;
  background-color: var(--main-background);
  padding: 1rem;
  border-radius: 1rem;
  box-sizing: border-box;
  outline: 3px var(--second-colour) solid;
}

#main-content>h2 {
  font-weight: 900;
  background: linear-gradient(to bottom, var(--dark-background) 80%, rgba(22, 22, 22, 0));
  border-radius: 1rem 1rem 0 0;
  padding-bottom: 0.8rem;
  margin-bottom: 0.5rem;
}

#my-logo {
  margin: auto;
  width: 350px;
  border-radius: 15rem;
  border: 3px solid var(--second-colour);
}

/*--- Links Section Styling ---*/
#links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto 0 auto;
  background-color: var(--dark-background);
  width: 20%;
  padding: 0.25rem;
  border-radius: 1rem;
  outline: 3px var(--main-colour) solid;
  box-sizing: border-box;
}

.link-icon {
  border-radius: 100px;
  padding: 1px;
  margin: 0 4px;
  background-color: var(--image-colour-background);
  transition: 500ms ease;
  max-width: 100%;
}

.link-icon:hover {
  background-color: var(--hover-background);
}

/*--- Last Updated/Current Project - Parent Element Styling. ---*/
#top-two {
  display: flex;
  margin: 1rem auto;
  width: 100%;
  background-color: var(--dark-background);
  border-radius: 1rem;
  outline: var(--second-colour) 3px solid;
  box-sizing: border-box;
  padding: 1rem;
}

#current {
  width: 50%;
  margin-left: 0.5rem;
  color: var(--main-colour);
}

#updated {
  width: 50%;
  margin-right: 0.5rem;
  color: var(--main-colour);
}

/*--- Section Reusables ---*/
.parent-section {
  background-color: var(--dark-background);
  box-sizing: border-box;
  border-radius: 1rem;
}

.section-items {
  display: flex;
  padding: 1rem;
}

.section-item {
  margin: auto;
  box-sizing: border-box;
  border-radius: 1rem;
  padding: 0.5rem;
  color: var(--main-colour);
}

.section-item-img {
  width: 100%;
  display: block;
  border-radius: 1rem;
  transition: 700ms ease-in-out;
  margin-bottom: 0.6rem;
}

/*--- Projects Section ---*/
#projects {
  outline: var(--main-colour) 3px solid;
}

.project-item,
.aproject-item {
  width: 19%;
  outline: var(--second-colour) 3px solid;
}

.project-img-overlay,
.aproject-img-overlay {
  position: relative;
  width: 50%;
}

.project-item-img,
.aproject-item-img {
  max-height: 30vh;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 30%;
  width: 100%;
  opacity: 0;
  transition: 500ms ease;
  background-color: var(--dark-background);
  border-radius: 1rem;
}

.project-item:hover img,
.aproject-item:hover img,
.recommended-item:hover img {
  transform: scale(95%);
}

.project-img-overlay:hover .overlay,
.aproject-img-overlay:hover .overlay {
  opacity: 1;
  height: 100%;
}

.img-overlay-txt {
  color: var(--daisy);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*--- Tech Stack Section ---*/
#tech-stack {
  outline: var(--second-colour) 3px solid;
  margin-top: 1rem;
}

#tech-stack>p {
  text-align: center;
  color: var(--main-colour);
  padding: 0.8rem 0;
}

.tech-item {
  width: 10%;
  outline: var(--main-colour) 3px solid;
}

.tech-item>h4 {
  font-weight: 500;
}

.tech-item-img {
  max-height: 13vh;
}

.tech-progress {
  width: 100%;
  background-color: var(--gray);
  border-radius: 1rem;
  padding: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.tech-progress-fill {
  display: block;
  height: 100%;
  border-radius: 1rem;

  transition: width 500ms ease-in-out;
}

.five {
  width: 5%;
  background-color: var(--5-percent);
}

.ten {
  width: 10%;
  background-color: var(--10-percent);
}

.fifteen {
  width: 15%;
  background-color: var(--15-percent);
}

.twenty {
  width: 20%;
  background-color: var(--20-percent);
}

.twenty-five {
  width: 25%;
  background-color: var(--25-percent);
}

.thirty {
  width: 30%;
  background-color: var(--30-percent);
}

.thirty-five {
  width: 35%;
  background-color: var(--35-percent);
}

.forty {
  width: 40%;
  background-color: var(--40-percent);
}

.forty-five {
  width: 45%;
  background-color: var(--45-percent);
}

.fifty {
  width: 50%;
  background-color: var(--50-percent);
}

.fifty-five {
  width: 55%;
  background-color: var(--55-percent);
}

.sixty {
  width: 60%;
  background-color: var(--60-percent);
}

.sixty-five {
  width: 65%;
  background-color: var(--65-percent);
}

.seventy {
  width: 70%;
  background-color: var(--70-percent);
}

.seventy-five {
  width: 75%;
  background-color: var(--75-percent);
}

.eighty {
  width: 80%;
  background-color: var(--80-percent);
}

.eighty-five {
  width: 85%;
  background-color: var(--85-percent);
}

.ninety {
  width: 90%;
  background-color: var(--90-percent);
}

.ninety-five {
  width: 95%;
  background-color: var(--95-percent);
}

.hundred {
  width: 100%;
  background-color: var(--100-percent);
}

.five,
.ten,
.fifteen,
.twenty,
.twenty-five,
.thirty,
.thirty-five,
.forty {
  color: var(--white);
}

.forty-five,
.fifty,
.fifty-five,
.sixty,
.sixty-five,
.seventy,
.seventy-five,
.eighty,
.eighty-five,
.ninety,
.ninety-five,
.hundred {
  color: var(--black)
}

.tech-progress-text {
  margin-left: 6px;
  width: 100%;
  font-weight: 700;
}

/*--- Brief Section ---*/
#brief {
  outline: var(--second-colour) 3px solid;
  padding: 1rem;
  color: var(--main-colour);
}

#brief>a {
  display: block;
  margin: auto;
  width: 5%;
}

#insta-credit {
  width: 100%;
  transition: 1s ease;
}

#insta-credit:hover {
  transform: scale(0.9);
}

/*--- Quick Jump Section ---*/
#quick-jump {
  outline: var(--main-colour) 3px solid;
  margin-top: 1rem;
  padding: 1rem;
}

#qj-links {
  display: flex;
  justify-content: space-evenly;
  margin-top: 1rem;
}

.qj-item {
  margin: 0 1rem;
  box-sizing: border-box;
  outline: 1px white solid;
  padding: 1rem;
  border-radius: 0.1rem;
  transition: all ease 1s;
}

.qj-item>a {
  color: var(--main-colour);
}

.qj-item:hover {
  border-radius: 1rem;
}

#black-qj {
  background-color: var(--crow);
}

#black-qj>a,
#brown-qj>a,
#purple-qj>a {
  color: var(--soft-peach);
}

#black-qj>a:hover,
#red-qj>a:hover,
#brown-qj>a:hover {
  color: var(--main-colour);
}

#white-qj {
  background-color: var(--soft-peach);
}

#grey-qj {
  background-color: var(--perfect-grey);
}

#red-qj {
  background-color: var(--candy-apple);
}

#green-qj {
  background-color: var(--bottle-green);
}

#blue-qj {
  background-color: var(--maya-blue);
}

#yellow-qj {
  background-color: var(--bumblebee);
}

#orange-qj {
  background-color: var(--royal-orange);
}

#brown-qj {
  background-color: var(--cinnamon);
}

#purple-qj {
  background-color: var(--true-purple);
}

#pink-qj {
  background-color: var(--bubblegum);
}

#pink-qj>a:hover {
  color: var(--soft-peach);
}

#white-qj>a,
#grey-qj>a,
#red-qj>a,
#green-qj>a,
#blue-qj>a,
#yellow-qj>a,
#orange-qj>a,
#purple-qj>a,
#pink-qj>a {
  color: var(--crow);
}

#white-qj>a:hover,
#grey-qj>a:hover,
#green-qj>a:hover,
#blue-qj>a:hover,
#yellow-qj>a:hover,
#orange-qj>a:hover,
#purple-qj>a:hover {
  color: var(--mulberry);
}

/*--- Colour Variables Parent Section ---*/
#colour-variables {
  margin-top: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  outline: var(--second-colour) 3px solid;
}

/*--- Colour Section ---*/
.colour-sect {
  padding: 1rem 0 1rem 1rem;
  border-radius: 1rem;
  background-color: var(--scorpion);
}

.colour-sect:nth-child(n+2) {
  margin-top: 1rem;
}

.colour-item {
  padding: 1rem;
  width: 99%;
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 3px;
  font-weight: 700;
  font-style: italic;
  border-radius: 1rem;
  box-sizing: border-box;
}

/*--- Black Section Styling ---*/
#black.colour-sect {
  background-color: var(--bone);
}

#black .colour-item {
  outline: solid var(--crow) 1px;
  color: var(--bone);
}

/*--- White Section Styling ---*/
#white.colour-sect {
  background-color: var(--raven);
}

#white>summary {
  color: var(--white-on-white)
}

/*--- Grey Section Styling ---*/
#grey.colour-sect {
  background-color: var(--raven);
}

#grey>summary {
  color: var(--grey-goose);
}

/*--- Red Section Styling ---*/
#red>summary {
  color: var(--candy-apple);
}

/*--- Green Section Styling ---*/
#green>summary {
  color: var(--irish-green);
}

/*--- Blue Section Styling ---*/
#blue>summary {
  color: var(--maya-blue);
}

/*--- Yellow Section Styling ---*/
#yellow>summary {
  color: var(--bumblebee);
}

/*--- Brown Section Styling ---*/
#brown.colour-sect {
  background-color: var(--raven);
}

#brown>summary {
  color: var(--peanut);
}

/*--- Orange Section Styling ---*/
#orange>summary {
  color: var(--aesthetic-orange);
}

/*--- Purple Section Styling ---*/
#purple>summary {
  color: var(--imperial-purple);
}

/*--- Pink Section Styling ---*/
#pink>summary {
  color: var(--vanilla-ice);
}

/* ~ ====================================================
~                               Archived Projects
~                                        Section
~ ==================================================== */
#archived-projects {
  outline: solid var(--main-colour);
  margin-top: 1rem;
}

/* ~ ====================================================
~                                        FAQ
~                                     Section
~ ==================================================== */
#faq-section {
  outline: var(--second-colour) 3px solid;
  margin-top: 1rem;
  color: var(--main-colour);
}

.faq-item {
  padding: 1rem;
  padding-bottom: 0;
  border-bottom: 3px var(--gray) solid;
  border-radius: 1rem;
}

.faq-item:last-of-type {
  margin-bottom: 0.5rem;
}

.faq-item:hover>summary {
  text-decoration: underline;
}

/* ~ ====================================================
~                                 Recommended
~                                       Section
~ ==================================================== */
#recommended {
  margin-top: 1rem;
  outline: 3px solid var(--main-colour);
  padding: 0 1rem;
  color: var(--main-colour);
}

.recommended-item {
  outline: var(--second-colour) 3px solid;
  margin: 1rem;
}

.rproject-img-overlay>img {
  transition: all 1s ease;
}

.recommended-item>a>img {
  max-width: 200px;
}

a:hover>figcaption {
  color: var(--main-colour);
}

figcaption {
  text-align: center;
}

/* ~ ====================================================
~                                          Footer
~                                        Section
~ ==================================================== */
#scroller-container {
  position: -webkit-sticky;
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 8px;
  background-color: var(--second-colour);
  z-index: 1000;
}

.scroller-bar {
  height: 100%;
  background: var(--main-colour);
  width: 0vw;
}

#bottom-space {
  height: 20px;
}

footer p {
  color: var(--main-colour);
  font-weight: 600;
  font-style: italic;
  margin: 0 0 0.6rem 0;
}

#web-update {
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
  color: #0d0907;
}

@keyframes glow {
  from {
    text-shadow: 0 0 1px #d18dff, 0 0 3px #d18dff, 0 0 5px #dd2dd4, 0 0 8px #dd2dd4, 0 0 10px #dd2dd4;
  }

  to {
    text-shadow: 0 0 3px #d18dff, 0 0 5px #ff4de1, 0 0 8px #ff4de1, 0 0 10px #ff4de1, 0 0 12px #ff4de1;
  }
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 1px #d18dff, 0 0 3px #d18dff, 0 0 5px #dd2dd4, 0 0 8px #dd2dd4, 0 0 10px #dd2dd4;
  }

  to {
    text-shadow: 0 0 3px #d18dff, 0 0 5px #ff4de1, 0 0 8px #ff4de1, 0 0 10px #ff4de1, 0 0 12px #ff4de1;
  }
}

/* ~ ====================================================
~                               Reusable CSS
~                                     Section
~ ==================================================== */
/*--- Emphasis Styling ---*/
.emp {
  font-style: italic;
  font-weight: 900;
}