/* GLOBAL PAGE SETTINGS */
* {margin: 0; padding: 0; box-sizing: border-box;}
/* *{border: 0.1dvw solid red;} */
html{font-size: 100%;}
body {font-family: system-ui, apple-system, sans-serif; line-height: 1.5; color:#333;}

/* container general settings */
#container{position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
#container{container-type: inline-size; container-name: parent;}

/* grid settings */
#heading{grid-column:1/7; grid-row:1/2;}
aside{grid-column:1/7; grid-row:2/3;}
.foundation{grid-column: 1/7; grid-row: 3/4}
.markup{grid-column:1/7; grid-row:4/5;}
.styling{grid-column:1/7; grid-row:5/6;}
.changing{grid-column:1/7; grid-row:6/7; }
.php{grid-column: 1/7; grid-row:7/8}
.node{grid-column: 1/7 ; grid-row:8/9}
.python{grid-column: 1/7; grid-row:9/10}
.Java{grid-column: 1/7; grid-row:10/11}
.topics{grid-column:1/7; grid-row:11/12dvw;}
footer{ grid-column:1/7;grid-row:12dvw/13;}

/*** HEADING settings ***/
#heading{display: flex; flex-flow: column nowrap; height: clamp(5rem, 12dvh, 12rem);}
/* #heading{display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; max-width: 100%; height: 15dvh;} */
#heading{--s: 0.5dvw; --c: lightgrey; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,black 40% 70%, #0000 72%; background: radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),  radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c); }

/* navigation section formatting*/
/* navigation section formatting*/
#menu button{position: fixed; width: clamp(2%, 5%, 7%); aspect-ratio: 2/1; height: auto; background:skyblue; opacity:1; color:white; box-shadow:inset 0 0 0 1px black; border:0.2dvw solid white; display: flex; justify-content: center; align-items: center; border-radius: 1dvw; top: 5%;}
#menu button a{font-size: clamp(1rem, 2dvh, 2rem)}
#menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.2dvw solid black; cursor: pointer;}

/* formatting header */
header{ width: 100%; text-align: center; }
header h1{position: relative; display: inline; color: blue; font-size: clamp(2rem, 5dvw, 4rem); animation: infinite linear 10s styling; }
@keyframes styling{
    0%{ color: lightgreen; }
    25%{ color:blue; }
    50%{ color: red;}
    75%{ color: navy; }
    100%{ color: lightgreen;}
}

/* Aside formatting - why this page??*/
h2{display: flex; flex-flow: row nowrap; justify-content:flex-start;  font-size: clamp(1.5rem, 2dvw, 2.5rem); padding: 10dvh 0dvw 2dvh 2dvw; color: crimson; white-space: nowrap; letter-spacing: 2;}
aside{display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  ; padding-bottom: 0dvw;}
aside p{color: darkblue; font-size: clamp(1rem, 1.4dvw, 2rem); float: left; margin-bottom: 0.15dvw; padding-left: 2dvw; padding-right: 2dvw; text-decoration: none; line-height: 1.2;}
aside object{display: flex; border: 0.2dvw inset burlywood; margin-top: 10%; width: clamp(15rem, 50dvw, 60rem); aspect-ratio: 1/1; overflow: hidden;}
aside object img{width: clamp(15rem, 50dvw, 60rem); aspect-ratio: 1/1;}

/* Formatting the different sections*/
:is(.foundation, .markup, .styling, .changing, .php, .node, .python, .Java, .topics) h2{display: flex; overflow: hidden;flex-flow: row nowrap; justify-content:flex-start; font-size: clamp(1.5rem, 5vw, 2.5rem); padding: 1dvh 0dvw 2dvh 2dvw; color: crimson; white-space: nowrap; letter-spacing: 2;}
.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr)); grid-auto-rows: minmax(2dvw, auto); gap: 1.5rem;  padding: 2rem clamp(1rem, 5vw, 3rem);  margin: 0 auto;}
h3{display:inline; text-align: left; color: brown; background-color: lightgrey; width: auto; font-size: clamp(1rem, 1.5dvw, 2rem); margin: 1dvw 4dvw;}
:is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{margin-left: 2dvw; color:blue; font-size: clamp(1rem, 1dvw, 1.25rem);}

/* Formatting the topics section*/
#topics-grid{display: grid;  grid-template-columns: 1fr; gap:0.5dvw; }
#topics-grid div{margin-bottom: 1dvw;}
#topics-grid a {line-height: 2; font-size: clamp(1rem, 1dvw, 1.25rem);color:blue; margin-left: 2dvw;}
#topics-grid div{margin-left: 2dvw;}
.topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{display: grid;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-rows: auto; }
.lijn{margin-left: 1dvw;}

/** SETTINGS FOR OTHER DEVICES AND OTHER SIZES**/

/*max-width: 107rem = 1,712px */
/* @media only screen and (96rem <= width <= 107rem){
    #heading{height: 10dvh;}
    #menu button{height: 5dvh; max-width: 8dvw;}
    #menu button a {font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);} */
    /* #heading header h1{font-size: calc(var(--fs-3)*1.5); margin-top: 2%;}
    aside div p{font-size: calc(var(--fs-1)*1)}
    aside object{margin-top: 6dvh; width: 40dvw; height: 35dvh;}
    aside object img{width: 40dvw; height: 35dvh;}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2dvw, auto);}
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*1)}
    #topics-grid a {font-size: calc(var(--fs-1)*1);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr 1fr 1fr; }
} */

/*max-width: 96rem = 1,528px */
/* @media only screen and (85rem <= width <= 96rem){
    #menu button{height: 6dvh; max-width: 10dvw;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);margin-top: 2%;}
    aside div p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    aside object{margin-top: 15dvh;}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2dvw, auto);}
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*1)}
    #topics-grid a {font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr 1fr 1fr; }
}

@container parent (85rem <= width <= 96rem){
    #heading{width: 95rem; height: 9rem; margin-inline: 0dvw;}
    aside{width: 95rem; height: 35rem; margin-inline: 2dvw;}
    .foundation{width: 95rem; height: 15rem; margin-inline: 2dvw;}
    .markup{width: 95rem; height: 195rem; margin-inline: 2dvw;}
    .styling{width: 95rem; height: 102rem; margin-inline: 2dvw;}
    .changing{width: 95rem; height: 235rem; margin-inline: 2dvw;}
    .php{width: 95rem; height: 27rem; margin-inline: 2dvw;}
    .node{width: 95rem; height: 15rem; margin-inline: 2dvw;}
    .python{width: 95rem; height: 17rem; margin-inline: 2dvw;}
    .Java{width: 95rem; height: 19rem; margin-inline: 2dvw;}
    .topics{width: 95rem; height: 160rem; margin-inline: 2dvw;}
} */

/* max-width: 85rem = 1,360px */
/* @media screen and (75rem <= width <= 85rem) {
    #menu button{height: 4dvh; max-width: 10dvw;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*2), 5rem);margin-top: 2%;}
    aside div P{font-size: calc(var(--fs-1)*1);}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2dvw, auto); }
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*0.9)}
    #topics-grid a {font-size: calc(var(--fs-1)*1);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr 1fr; }
}

@container parent (75rem <= width <= 85rem){
    #heading{width: 85rem; height: 9rem; margin-inline: 0dvw;}
    aside{width: 85rem; height: 40rem; margin-inline: 2dvw;}
    .foundation{width: 85rem; height: 12rem; margin-inline: 2dvw;}
    .markup{width: 85rem; height: 175rem; margin-inline: 2dvw;}
    .styling{width: 85rem; height: 92rem; margin-inline: 2dvw;}
    .changing{width: 85rem; height: 210rem; margin-inline: 2dvw;}
    .php{width: 85rem; height: 25rem; margin-inline: 2dvw;}
    .node{width: 85rem; height: 13rem; margin-inline: 2dvw;}
    .python{width: 85rem; height: 15rem; margin-inline: 2dvw;}
    .Java{width: 85rem; height: 15rem; margin-inline: 2dvw;}
    .topics{width: 85rem; height: 200rem; margin-inline: 2dvw;}

} */

/* max-width: 75rem = 1,200px */
/* @media screen and (65rem <= width <= 75rem) and (orientation: landscape){
    #menu button{height:4dvh; max-width: 12dvw;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 3rem);margin-top: 2%;}
    aside div P{font-size: calc(var(--fs-1)*0.9);}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2dvw, auto); }
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*0.9)}
    #topics-grid a {font-size: calc(var(--fs-1)*0.9);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr 1fr; }
}
@container parent (65rem <= width <= 75rem){
    #heading{width: 75rem; height: 9rem; margin-inline: 0dvw;}
    aside{width: 75rem; height: 37rem; margin-inline: 2dvw;}
    .foundation{width: 75rem; height: 12rem; margin-inline: 2dvw;}
    .markup{width: 75rem; height: 155rem; margin-inline: 2dvw;}
    .styling{width: 75rem; height: 82rem; margin-inline: 2dvw;}
    .changing{width: 75rem; height: 187rem; margin-inline: 2dvw;}
    .php{width: 75rem; height: 23rem; margin-inline: 2dvw;}
    .node{width: 75rem; height: 13rem; margin-inline: 2dvw;}
    .python{width: 75rem; height: 17rem; margin-inline: 2dvw;}
    .Java{width: 75rem; height: 17rem; margin-inline: 2dvw;}
    .topics{width: 75rem; height: 190rem; margin-inline: 2dvw;}
} */


 /* max-width : 65rem  = 1,040px */
 /* @media screen and (55rem <= width <= 65rem) and (aspect-ratio: 4/3) {
    #container{height: fit-content;}
    #menu button{height: 4dvh; max-width: 15dvw;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*2), 3rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.25), 3rem);margin-top: 2%;}
    aside div P{font-size: calc(var(--fs-1)*0.8);}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2dvw, auto); }
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*0.8)}
    #topics-grid a {font-size: calc(var(--fs-1)*0.8);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr 1fr; }
    h2{ font-size: calc(var(--fs-1)*1.7); }
    :is(.foundation, .markup, .styling, .changing, .php, .node, .python, .Java, .topics) h2{font-size: calc(var(--fs-2)*0.7); }
    h3{ font-size: calc(var(--fs-1)*1.2); }
}

@container parent (55rem <= width <= 65rem){
    #heading{width: 95rem; height: 8rem; margin-inline: 0dvw;}
    aside{width: 65rem; height: 35rem; margin-inline: 2dvw;}
    .foundation{width: 65rem; height: 11rem; margin-inline: 2dvw;}
    .markup{width: 65rem; height: 133rem; margin-inline: 2dvw;}
    .styling{width: 65rem; height: 70rem; margin-inline: 2dvw;}
    .changing{width: 65rem; height: 160rem; margin-inline: 2dvw;}
    .php{width: 65rem; height: 20rem; margin-inline: 2dvw;}
    .node{width: 65rem; height: 10rem; margin-inline: 2dvw;}
    .python{width: 65rem; height: 13rem; margin-inline: 2dvw;}
    .Java{width: 65rem; height: 13rem; margin-inline: 2dvw;}
    .topics{width: 65rem; height: 160rem; margin-inline: 2dvw;}
} */

/* max-width: 55rem =  880px */
 /* @media screen and (45rem <= width <= 55rem){
    #container{height: fit-content;}
    #menu button{height: 4dvh; max-width: 17dvw; margin-top: -2dvh;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem);margin-top: 2%;}
    aside div p{font-size: calc(var(--fs-1)*0.7);}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(2dvw, auto); height: fit-content}
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*0.7)}
    #topics-grid a {font-size: calc(var(--fs-1)*0.7);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr 1fr; }
    h2{ font-size: calc(var(--fs-1)*1.7); }
    :is(.foundation, .markup, .styling, .changing, .php, .node, .python, .Java, .topics) h2{font-size: calc(var(--fs-2)*0.7); }
    h3{ font-size: calc(var(--fs-1)*1.1); }
 }

@container parent (45rem <= width <= 55rem){
    #heading{width: 55rem; height: 7rem; margin-inline: 0dvw;}
    aside{width: 55rem; height: 35rem; margin-inline: 2dvw;}
    .foundation{width: 55rem; height: 12rem; margin-inline: 2dvw;}
    .markup{width: 55rem; height: 165rem; margin-inline: 2dvw;}
    .styling{width: 55rem; height: 85rem; margin-inline: 2dvw;}
    .changing{width: 55rem; height: 195rem; margin-inline: 2dvw;}
    .php{width: 55rem; height: 20rem; margin-inline: 2dvw;}
    .node{width: 55rem; height: 12rem; margin-inline: 2dvw;}
    .python{width: 55rem; height: 14rem; margin-inline: 2dvw;}
    .Java{width: 55rem; height: 14rem; margin-inline: 2dvw;}
    .topics{width: 55rem; height: 140rem; margin-inline: 2dvw;}

} */

/* max-width: 45rem =  720px */
 /* @media screen and (35rem <= width <= 45rem){
    #menu button{height: 4dvh; max-width: 17dvw; margin-top: -2dvh;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem);}
    #heading header h1{font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem);margin-top: 2%;}
    aside div p{font-size: calc(var(--fs-1)*0.7);}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(2dvw, auto); }
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*0.7)}
    #topics-grid a {font-size: calc(var(--fs-1)*0.7);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr 1fr; }
    h2{ font-size: calc(var(--fs-1)*1.7); }
    :is(.foundation, .markup, .styling, .changing, .php, .node, .python, .Java, .topics) h2{font-size: calc(var(--fs-2)*0.7); }
    h3{ font-size: calc(var(--fs-1)*1.1); }
 }

@container parent (35rem <= width <= 45rem){
    #heading{width: 45rem; height: 7rem; margin-inline: 0dvw;}
    aside{width: 45rem; height: 37rem; margin-inline: 2dvw;}
    .foundation{width: 45rem; height: 9rem; margin-inline: 2dvw;}
    .markup{width: 45rem; height: 95rem; margin-inline: 2dvw;}
    .styling{width: 45rem; height: 52rem; margin-inline: 2dvw;}
    .changing{width: 45rem; height: 113rem; margin-inline: 2dvw;}
    .php{width: 45rem; height: 15rem; margin-inline: 2dvw;}
    .node{width: 45rem; height: 10rem; margin-inline: 2dvw;}
    .python{width: 45rem; height: 11rem; margin-inline: 2dvw;}
    .Java{width: 45rem; height: 11rem; margin-inline: 2dvw;}
    .topics{width: 45rem; height: 130rem; margin-inline: 2dvw;}
} */

/* max-width: 35rem =  560px */
/* @media screen and (25rem <= width <= 35rem){
    #menu button{height: 4dvh; max-width: 8rem;margin-top: -2dvh;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem);}
    #heading header h1{font-size: clamp(0.5rem, calc(var(--fs-1)*1.5), 2rem);margin-top: 2%;}
    aside div p{font-size: calc(var(--fs-1)*0.7);}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(2dvw, auto); }
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*0.7)}
    #topics-grid a {font-size: calc(var(--fs-1)*0.7);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr; }
    h2{ font-size: calc(var(--fs-1)*1.2); }
    :is(.foundation, .markup, .styling, .changing, .php, .node, .python, .Java, .topics) h2{font-size: calc(var(--fs-1)*1.2); }
    h3{ font-size: calc(var(--fs-1)*1); }
 }

@container parent (25rem <= width <= 35rem){
    #heading{width: 35rem; height: 6rem; margin-inline: 0dvw;}
    aside{width: 50rem; height: 33rem; margin-inline: 2dvw;}
    aside object{display: none;}
    .foundation{width: 35rem; height: 15rem; margin-inline: 2dvw;}
    .markup{width: 35rem; height: 260rem; margin-inline: 2dvw;}
    .styling{width: 35rem; height: 130rem; margin-inline: 2dvw;}
    .changing{width: 35rem; height: 305rem; margin-inline: 2dvw;}
    .php{width: 35rem; height: 27rem; margin-inline: 2dvw;}
    .node{width: 35rem; height: 12rem; margin-inline: 2dvw;}
    .python{width: 35rem; height: 18rem; margin-inline: 2dvw;}
    .Java{width: 35rem; height: 18rem; margin-inline: 2dvw;}
    .topics{width: 35rem; height: 140rem; margin-inline: 2dvw;}
} */

/* max-width: 25rem =  400px */
 /* @media screen and (20rem <= width <= 25rem){
    #menu button{height: 6dvh; max-width: 8rem;}
    #menu button a{font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem);}
    #heading header h1{font-size: clamp(0.5rem, calc(var(--fs-1)*1.5), 2rem);margin-top: 2%;}
    aside div p{font-size: calc(var(--fs-1)*0.7);}
    .tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php-ex{display: grid; grid-template-columns: 1fr; grid-auto-rows: minmax(2dvw, auto); }
    :is(.tutorials, .attributes, .tags, .properties, .libraries, .methods, .techniques, .php, .python) a{font-size: calc(var(--fs-1)*0.7)}
    #topics-grid a {font-size: calc(var(--fs-1)*0.7);}
    .topics1, .topics2, .topics3, .topics4, .topics5, .topics6, .topics7, .topics8, .topics9, .topics10, .topics11, .topics12{ grid-template-columns: 1fr; }
    h2{ font-size: calc(var(--fs-1)*1.2); }
    :is(.foundation, .markup, .styling, .changing, .php, .node, .python, .Java, .topics) h2{font-size: calc(var(--fs-1)*1.2); }
    h3{ font-size: calc(var(--fs-1)*1); }
 }

@container parent (20rem <= width <= 25rem){
    #heading{width: 25rem; height: 6rem; margin-inline: 0dvw;}
    aside{width: 45rem; height: 32rem; margin-inline: 2dvw; margin-top:-1dvh;}
    aside object{display: none;}
    .foundation{width: 35rem; height: 15rem; margin-inline: 2dvw;}
    .markup{width: 35rem; height: 256rem; margin-inline: 2dvw;}
    .styling{width: 35rem; height: 127rem; margin-inline: 2dvw;}
    .changing{width: 35rem; height: 305rem; margin-inline: 2dvw;}
    .php{width: 35rem; height: 27rem; margin-inline: 2dvw;}
    .node{width: 35rem; height: 12rem; margin-inline: 2dvw;}
    .python{width: 35rem; height: 18rem; margin-inline: 2dvw;}
    .Java{width: 35rem; height: 18rem; margin-inline: 2dvw;}
    .topics{width: 35rem; height: 140rem; margin-inline: 2dvw;}
} */