/*=== 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); 
}
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: 'Cherry Swash', 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.3125rem + 0.9375vw, 3.4375rem);
  padding: 0.5em 0;
}
h2, label{
  font-size: 1.875rem;
  font-size: clamp(1.875rem, 1.6875rem + 0.9375vw, 2.8125rem);
  font-weight: 525;
  padding: 0.5em 0;
}
label h2{
  padding-left: 1em;
}
h3, h4{
  padding: 0.5em 0 0.2em 0;
}
h3{
  font-size: 1.5625rem;
  font-size: clamp(1.5625rem, 1.375rem + 0.9375vw, 2.5rem);
}
h4{
  font-size: 1.25rem;
  font-size: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
}
main p, main li, summary, footer li, footer dt, footer dd, footer div p{
  font-size: 1.125rem;
  font-size: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
}
main p{
  padding: 0.5em 0 1.5em 0;
}
/*tasks and work done styling*/
h4 + ul li{
  list-style: inside '☑ ';
}
h3 + ul, h4 + ul{
  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: "- ";
}
/* ========= TOGGLE STYLING ========= */
input{
  display: none;
}
.toggle{
  width: auto;
  line-height: 1; 
}
input + .toggle + section{
  display: none;
}
input:checked + .toggle + section{
  display: inline-block; 
}
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);
  text-decoration-color: var(--txt-color);
	text-decoration-thickness: .125em;
	text-underline-offset: 3px;
}
a:hover, a:focus{
  color: var(--accent-color);
  text-decoration-color: var(--txt-color);
  text-decoration-thickness: .15em;
  text-underline-offset: 6px;
}

/* ========= IMAGES STYLING ========= */
img {
  width: 100%;
  height: auto;
  max-width: 400px;
}
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%);
}

/* ========= 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 {
  padding: 1em 0 0;
}
footer li{
  list-style: inside '~  ';
}
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;
  }
}
@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%;
  }
}