/*=== STYLE RESET ===*/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
	display: block;
}
body{
	line-height: 1;
}
ol, ul{
	list-style: none;
}
blockquote, q{
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
	content: '';
	content: none;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
/*==== END OF STYLE RESET ====*/

/* ===== BOX SIZING ===== */
html{
    box-sizing: border-box;
}
  *, *:before, *:after{
    box-sizing: inherit;
}
/*======================== MY STYLING RULES ========================*/
:root{
  color-scheme: light dark;
  --txt-color: light-dark(#1a1a1a, #fffbe9);
  --txt-accent: light-dark(#4f123e, #fffbe9);
  --accent-color: light-dark(#4f123e, #fcfcfc);
  --base-color1: light-dark(#fff5f1, #4c0f3b);
  --base-color2: light-dark(#f9dcd8, #6c0d10db); 
  --code-highlight: light-dark(#d7d7d7, #000000);
}
body{
  font-family: 'Nunito Sans', Arial, Helvetica, Verdana, sans-serif;
  line-height: 1.5;
  color: var(--txt-color);
  background-color: var(--base-color1);
}
header, main, aside, footer{
  margin: 0 auto;
}
header, footer{
  background-color: var(--base-color2);
}
main{
  padding: 1em;
}

/* ========= HADER STYLING ========= */
header{
  padding: 1em 0 0 1em;
  overflow-x: hidden;
  background-image: url(images/bubble-fade-up-lm.svg);
  background-size: 60px, 120%, contain;
	background-position: center calc(100% + 40px), 44% center,  center 75%;
	background-repeat: repeat-x, repeat, repeat;
	background-blend-mode: normal, hard-light, normal;
}
header p:first-of-type{
  font-size: 2.9375rem;
  font-size: clamp(2.9375rem, 2.7rem + 1.1875vw, 4.125rem);
} 
header p:nth-of-type(2){
  font-size: 1.875rem;
  font-size: clamp(1.875rem, 1.6875rem + 0.9375vw, 2.8125rem);
  padding: 1em 0;
}

/* ========= MAIN STYLING ========= */
h1, h2, h3, h4, h5, h6, header p, label{
  font-family: Forum, Georgia, 'Times New Roman', Times, serif;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--txt-accent);
}
h1{
  font-size: 2.5rem;
  font-size: clamp(2.5rem, 2.3rem + 1vw, 3.5rem);
  padding: 0.5em 0;
}
h2, label{
  font-size: 2rem;
  font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
  font-weight: 525;
  font-weight: bold;
}
h2{
  padding: 0.5em 0 0.2em 0;
}
h3{
  font-size: 1.7rem;
  font-size: clamp(1.7rem, 1.5rem + 1.0000000000000002vw, 2.7rem);
  padding: 0.2em 0;
}
#recursive{
  padding-top: 1em;
}
h4{
  font-size: 1.4rem;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.4rem);
  padding: 0.2em 0 0 0;
}
main p, main li, summary, footer li, footer dt, footer dd, footer div p{
  font-size: 1.15rem;
  font-size: clamp(1.15rem, 1.0499999999999998rem + 0.5vw, 1.65rem);
}
main p{
  padding: 0.5em 0 1.5em 0;
}
/*tasks and work done styling*/
h4 + ul li{
  list-style: inside '☑ ';
}
h3 + ul, h4 + ul, dl{
  padding: 0.5em 0 2em 0;
}
/*text + image styling*/
div{
  padding: 1em 0 0.5em;
}
/*work snippets styling*/
details{
  padding: 0.5em 0 2em;
}
summary:hover{
  cursor: pointer;
}
summary::marker{
  content: "+ ";
}
details[open] summary::marker{
  content: "- ";
}
/*code snippets styling*/
#code{
  font-family: 'Cascadia Code', 'Courier New', Courier, monospace;
  background-color: var(--code-highlight);
  padding: 2px 4px;
}
/* ========= TOGGLE STYLING ========= */
input{
  display: none;
}
.toggle{
  width: auto;
  line-height: 1; 
}
input + .toggle + section{
  display: none;
}
input:checked + .toggle + section{
  display: inline-block; 
}
ul[id="toggle"]{
  padding: 2em 0;
}
label:hover{
  cursor: pointer;
}
label::before{
	content: ' ';
	position: relative;
  float: left;
	top: 12px;
  left: -8px;
	width: 20px;
	height: 20px;
	margin: 0 7px;
	border: 0;
	background: var(--txt-accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0% 0%);
	transform-origin: center;
	transition: transform .2s ease-out;
}
input:checked + label:before{
  transform: rotate(90deg);
}

/* ========= LINK STYLING ========= */
a:link, a:active, a:visited{
  color: var(--txt-color);
  font-weight: 600;
  text-decoration-color: var(--txt-color);
	text-decoration-thickness: .125em;
	text-underline-offset: 3px;
}
a:hover, a:focus{
  text-decoration-color: var(--txt-color);
  text-decoration-thickness: .15em;
  text-underline-offset: 6px;
}

/* ========= IMAGES STYLING ========= */
img{
  width: 100%;
  height: auto;
  max-width: 450px;
}
details img, div img{
  margin: 0.5em 0;
}
/*footer logos size and hover effect*/
#tools img{
  display: inline;
  max-width: 70px;
  filter: opacity(40%);
}
#tools img:hover{
  filter: opacity(100%);
}
/*image zoom-in/out*/
main img{
  cursor: zoom-in;
}
dialog{
  background: var(--base-color1);
  border: solid 2px var(--accent-color);
  transform: scale(1.5);
}
dialog::backdrop{
  backdrop-filter: blur(2px);
}
dialog img {
  width: clamp(80%, auto, 100%);
  max-height: 80vh;
}
dialog button{
  display: block;
  border-radius: 5px;
  border: groove 2px var(--txt-accent);
  cursor: pointer;
  color: var(--txt-color);
  background-color: var(--base-color2);
  padding: 0.5em;
  margin-top: 1em;
}
dialog[open]{
  animation: dialog-fade-in 0.3s ease-in-out;
}
@keyframes dialog-fade-in{
  from {
    opacity: 0;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* ========= FOOTER STYLING ========= */
footer{
  overflow-x: hidden;
  background-image: url(images/bubble-fade-down-lm.svg);
  background-size: 60px, 120%;
	background-repeat: repeat-x, repeat;
	background-position:  center -40px,center;
	background-blend-mode: normal, hard-light, normal;
  padding: 1em;
}
footer p{
  font-size: 1.2em;
  padding: 1em 0 0;
}
#contacts p{
  padding: 0.4em 0 1em;
}
footer dt{
  font-weight: bold;
  padding: 0.5em 0 0;
}
footer #education dd:nth-child(3), footer #education dd:last-of-type{
  font-style: italic;
}
footer li, footer dt{
  white-space: nowrap; /*text stays on one line*/
}
footer dd{
  padding-left: 0.5em;
}
#contacts dl{
  display: inline-block;
}

/*change bubbles for dark mode*/
@media(prefers-color-scheme: dark){
  header{
    background-image: url(images/bubble-fade-up-dm.svg);
  }
  footer{
    background-image: url(images/bubble-fade-down-dm.svg);
  }
}

/* ========= RESPONSIVE ========= */
@media(min-width: 750px){
  header{
    width: 100%;
    padding: 1em 5em;
  }
  header p{
    padding-bottom: 0.5em;
  }
  header p:nth-of-type(2){
    position: absolute;
    top: 0;
    right: 1.5em;
  }
  main div{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "p p p img img";
  }
  main div p{
    grid-area: p;
  }
  main div img{
    grid-area: img;
    padding: 0 0 0 1.5em;
  }
  details img{
    margin: 0 1em;
  }
  iframe{
    width: 560px;
    height: 315px;
  }
}
@media(min-width: 900px){
  main, footer{
    padding: 2em 5em;
  }
  main{
    max-width: 1100px;
  }
  details img{
    width: 40%;
  }
  footer{
   margin: 0 auto;
  }
  footer div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    column-gap: 3em;
  }
  footer div section{
    width: 30%;
  }
}
@media(min-width: 1200px){
  main{
    max-width: 85%;
  }
}