@font-face {
  font-family: 'RobotoFlex-Regular';
  src: url('Fonts/RobotoFlex-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --clr-purple: #402080;
  --clr-purple-light: #8040ff;
  --clr-html: #e34c26;
  --clr-css: #563d7c;
  --clr-csharp: #178600;
  --clr-js: #f1e05a;
  --clr-python:#3572a5;
  --clr-dotnet: #522fd3;
  --clr-go: #00add8;
  --clr-sql: #e38c00;
  --clr-cpp: #f34b7d;
  --clr-svelte: #ff3e00;
  --clr-wordpress: #2c97c3;
  --clr-java: #b07219;
  --clr-unity: #222c36;
  --clr-txt: #fff;
  --clr-drk: #ddd;
  --clr-gry: #666;
}

html, body{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: RobotoFlex-Regular, sans-serif;
  width: 100vw;
    max-width: 100%;
  min-height: 100lvh;
  user-select: none;
    background-image: url("/Assets/circuit.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: soft-light;
  /*background-image:
    radial-gradient(at 9% 89%, hsla(240, 70%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 72% 6%, hsla(0, 70%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 24% 19%, hsla(120, 70%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 65% 6%, hsla(270, 70%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 20% 98%, hsla(270, 50%, 40%, 1) 0px, transparent 50%),
    radial-gradient(at 44% 9%, hsla(240, 50%, 40%, 1) 0px, transparent 50%),
    radial-gradient(at 10% 9%, hsla(0, 50%, 40%, 1) 0px, transparent 50%),
    radial-gradient(at 90% 90%, hsla(270, 100%, 90%, 1) 0px, transparent 50%);*/
  background-color: #181818;
  color: var(--clr-txt);
  fill: var(--clr-txt);
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem;
}

a{
  text-decoration: none;
  color: inherit;
}

nav{
  display: flex;
  flex-wrap: wrap;
}

nav > div{
  flex-grow: 1;
}

nav .logo{
  padding-right: 1rem;
  font-size: 2rem;
  min-width: fit-content;
  display: flex;
  align-items: center;
  font-weight: bolder;
}

main{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap-reverse;
  padding: 2rem 0;
}

section, aside{
  flex-grow: 1;
  display: flex;
}

section{
  width: 60%;
  align-items: end;
}

aside{
  width: 40%;
  align-items: center;
  justify-content: center;
}

footer > div{
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(2rem);
  opacity: 0.3;
}

footer > div > svg{
  height: 1rem;
  width: 1rem;
  margin: 0 0.5rem;
}

img{
  width: auto;
    max-height: calc(2*13rem);
  height: 100%;
  display: block;
    border-radius: 0.7rem;
}

h1{
  font-size: 2rem;
}

ul{
  list-style: none;
}

p.descr{
  line-height: 1.25rem;
  text-align: justify;
}

p.descr a{
  color: var(--clr-purple-light);
  fill: var(--clr-purple-light);
  transition: 250ms ease-in-out;
}

p.descr a:hover,
p.descr a:focus-within{
  text-decoration: underline;
}

nav .logo{
  width: fit-content;
}

.flex{
  display: flex;
}

.flex-wrap{
  flex-wrap: wrap;
}

.v-center{
  align-items: center;
}

.h-center{
  justify-content: center;
}

.min-wfit{
  min-width: fit-content;
}

.wfit {
  width: fit-content;
}

.w100{
  width: 100%;
}

.img-wrapper{
  height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  max-width: 18rem;
  padding: 1rem 0;
}

.img-wrapper:not(.slim){
  aspect-ratio: 1/1;
  width: 100%;
}

.img-wrapper.slim {
  width: 50%;
  aspect-ratio: 1/2;
}

.side-img-wrapper > svg{
  width: 30%;
  height: auto;
  aspect-ratio: 1/1;
}

.nav ul{
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  gap: 0.15rem;
}

.nav ul > a{
  flex-grow: 1;
  width: fit-content;
  min-width: fit-content;
  max-width: fit-content;
  padding: 0 0.15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 0 solid #130720;
  border-radius: 0.5rem;
  transition: 200ms ease-in-out;
}

.nav ul > a:hover,
.nav ul > a:focus-within{
  background-color: var(--clr-purple);
}

.nav ul li{
  padding: 0.45rem 0.3rem;
  font-size: 1rem;
  width: fit-content;
  max-width: fit-content;
  display: flex;
  align-items: center;
}

.nav ul li > svg{
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}

.container{
  max-width: 64vw;
  width: 64vw;
  padding: 3rem;
  background: rgba(80, 80, 80, 0.4);
  border-radius: 1rem;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(11.6px);
  -webkit-backdrop-filter: blur(11.6px);
}

.credit{
  display: flex;
  justify-content: end;
  font-size: 0.75rem;
  opacity: 0.5;
}

.tags{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25rem;
  margin: 0;
  margin-top: 2rem;
  gap: 0.5rem;
}

.tags.tags-grow > li{
  flex-grow: 1;
}

.tags > li{
  min-width: fit-content;
  text-align: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  outline-style: solid;
  outline-width: 0.125rem;
  opacity: 0;
  transition: 250ms ease-in-out;
}

.tags.tags-show > li{
  opacity: 1;
}

.gry{
  color: var(--clr-gry);
  fill: var(--clr-gry);
}

.python {
  fill: var(--clr-python);
  outline-color: var(--clr-python);
}

.python:hover,
.python:focus-within {
  background-color: var(--clr-python);
}

.html{
  fill: var(--clr-html);
  outline-color: var(--clr-html);
}

.html:hover,
.html:focus-within{
  background-color: var(--clr-html);
}

.css {
  fill: var(--clr-css);
  outline-color: var(--clr-css);
}

.css:hover,
.css:focus-within {
  background-color: var(--clr-css);
}

.csharp {
  fill: var(--clr-csharp);
  outline-color: var(--clr-csharp);
}

.csharp:hover,
.csharp:focus-within {
  background-color: var(--clr-csharp);
}

.dotnet {
  fill: var(--clr-dotnet);
  outline-color: var(--clr-dotnet);
}

.dotnet:hover,
.dotnet:focus-within {
  background-color: var(--clr-dotnet);
}

.js {
  fill: var(--clr-js);
  outline-color: var(--clr-js);
}

.js:hover,
.js:focus-within {
  background-color: var(--clr-js);
}

.go{
  fill: var(--clr-go);
  outline-color: var(--clr-go);
}

.go:hover,
.go:focus-within{
  background-color: var(--clr-go);
}

.sql {
  fill: var(--clr-sql);
  outline-color: var(--clr-sql);
}

.sql:hover,
.sql:focus-within {
  background-color: var(--clr-sql);
}

.cpp {
  fill: var(--clr-cpp);
  outline-color: var(--clr-cpp);
}

.cpp:hover,
.cpp:focus-within {
  background-color: var(--clr-cpp);
}

.svelte {
  fill: var(--clr-svelte);
  outline-color: var(--clr-svelte);
}

.svelte:hover,
.svelte:focus-within {
  background-color: var(--clr-svelte);
}

.wordpress {
  fill: var(--clr-wordpress);
  outline-color: var(--clr-wordpress);
}

.wordpress:hover,
.wordpress:focus-within {
  background-color: var(--clr-wordpress);
}

.java {
  fill: var(--clr-java);
  outline-color: var(--clr-java);
}

.java:hover,
.java:focus-within {
  background-color: var(--clr-java);
}

.unity {
  fill: var(--clr-unity);
  outline-color: var(--clr-unity);
}

.unity:hover,
.unity:focus-within {
  background-color: var(--clr-unity);
}

.scale-hover{
  transition: 250ms ease-in-out;
}

.scale-hover:hover,
.scale-hover:focus-within{
  transform: scale(1.1);
}

.timeline{
  width: 0.8rem;
  border-radius: 0.4rem;
  background-color: var(--clr-txt);
  margin: 0 0.6rem;
}

.timeline-details{
  width: calc(100% - 2rem);
}

.timeline-details > ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-details > ul > li{
  display: flex;
  align-items: start;
  border-radius: 0.5rem;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  box-sizing: border-box;
  transition: 250ms ease-in-out;
}

.timeline-details > ul > li:hover{
  border-left: 0.2rem solid var(--clr-purple);
  border-right: 0.2rem solid var(--clr-purple);
}

.timeline-details > ul > li:hover .circle,
.timeline-details > ul > li:focus-within .circle, 
.timeline-details > ul > li:hover .circle-small,
.timeline-details > ul > li :focus-within .circle-small {
  background-color: var(--clr-purple);
}

.circle{
  width: 2.5rem;
  min-height: 2.5rem;
  max-width: 2.5rem;
  max-height: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  cursor: pointer;
  background-color: var(--clr-drk);
  border-radius: 1.5rem;
  border: 5px solid var(--clr-txt);
  box-sizing: border-box;
  align-self: flex-start;
  transform: translate(-2.375rem, 1rem);
  transition: background-color 250ms ease-in-out;
}

.circle-small {
  width: 1.8rem;
  min-height: 1.2rem;
  max-width: 1.8rem;
  max-height: 1.2rem;
  height: 1.2rem;
  min-width: 1.8rem;
  cursor: pointer;
  background-color: var(--clr-drk);
  border-radius: 0.9rem;
  border: 5px solid var(--clr-txt);
  box-sizing: border-box;
  transform: translate(-2.05rem, 1rem);
  align-self: flex-start;
  margin-right: 0.7rem;
  transition: background-color 250ms ease-in-out;
}

.timeline-element{
  width: calc(100% - 2.5rem);
  transform: translateX(-1rem);
}

details{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

details h2, details h3{
  transition: 200ms ease-in-out;
}

details[open] h2,
details[open] h3{
  color: var(--clr-purple-light);
  font-size: 1.25rem;
  transition: 200ms;
}

details[open] .tags > li, 
details[open] .side-img-wrapper{
  animation: fadein 350ms ease forwards;
}

details summary{
  cursor: pointer;
  list-style: none;
}

a > svg, span > svg{
  width: 1rem;
  height: 1rem;
  aspect-ratio: 1/1;
  padding: 0 0.25rem;
  vertical-align: middle;
}

.txt-mono{
  font-family: monospace !important;
}

.txt-center{
  text-align: center;
}

.credits{
  font-size: 0.7rem;
  color: black;
}

.padd-left-05{
  padding-left: 0.5rem;
}

.content-half-container{
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  width: 100%;
}

.content-half-container:not(.force-wrap) > div {
  width: 50%;
  min-width: 12rem;
  flex-grow: 1;
}

.content-half-container.force-wrap > div{
  width: 100%;
  min-width: 100%;
  flex-grow: 1;
}

.side-img-wrapper{
  height: auto;
  width: 90%;
  max-width: 32rem;
    display: flex;
    justify-content: center;
  overflow: hidden;
  transition: opacity 250ms ease;
}

.force-wrap{
  min-width: 100% !important;
}

.spacer{
  height: 8rem;
}

@media (width < 1113px){
  nav .logo{
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 2.5rem;
    width: 100%;
    animation: fadein 350ms ease-in-out forwards;
  }

  .nav ul{
    justify-content: center;
  }
}

@media (width < 625px){
  .img-wrapper{
    animation: fadein 350ms ease-in-out forwards;
  }

  body{
    padding: 1rem;
  }
}

@media (width < 480px){
  h2{
    font-size: 1.2rem;
  }

  h3{
    font-size: 1rem;
  }
  
  .container{
    padding: 3rem 1rem;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
}

.ani-fadein{
  opacity: 0;
  animation: fadein 350ms ease-in-out forwards;
}

.ani-delay-1{
  animation-delay: 150ms !important;
}

.ani-delay-1-5{
  animation-delay: 225ms !important;
}

.ani-delay-2{
  animation-delay: 300ms !important;
}

.ani-delay-2-5{
  animation-delay: 375ms !important;
}

.ani-delay-3{
  animation-delay: 450ms !important;
}

.ani-delay-3-5{
  animation-delay: 525ms !important;
}

.ani-delay-4{
  animation-delay: 600ms !important;
}

.ani-delay-4-5{
  animation-delay: 675ms !important;
}

.ani-delay-5{
  animation-delay: 750ms !important;
}

@keyframes fadein {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}