* {
    box-sizing: border-box;
}

:root {
    --appBaseSize: 1rem;
    font-size: var(--appBaseSize);
}

.cursorPointer {
    cursor: pointer;
}

myButton {
    padding: calc(var(--appBaseSize) / 2);
    border: 2px solid darkred;
    cursor: pointer;
    font-size: calc(var(--appBaseSize) * 1.5);
    color: purple;
    background-color: cyan;
}

/* flexContainer1 */
.flexContainer1 {
    display: flex;
    margin-top: calc(var(--appBaseSize) * 3);
    background: pink;
}

.flexContainer1Items {
    padding: var(--appBaseSize);
    font-weight: bold;
    border-right: 1px solid black;
}

.flexContainer1Items:last-of-type {
    border: none;
    background: yellow;
}

/* flexContainer2 */
.flexContainer2 {
    display: flex;
    justify-content: space-evenly;
    margin-top: calc(var(--appBaseSize) * 3);
    background: cyan;
    border: 2px dashed red;
}

.flexContainer2Items {
    width: 20%;
    background: orange;
    padding: var(--appBaseSize);
    font-weight: bold;
    border-right: 1px solid black;
}

.flexContainer2Items:last-of-type {
    border: none;
    background: yellow;
}

/* flexContainer3 */
.flexContainer3 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: calc(var(--appBaseSize) * 3);
    background: lightGreen;
    border: 2px dashed red;
}

.flexContainer3Items {
    width: 20%;
    background: red;
    color: white;
    padding: var(--appBaseSize);
    font-weight: bold;
    border-right: 1px solid black;
}

.flexContainer3Items:nth-child(1) {
    height: initial;
}

.flexContainer3Items:nth-child(2) {
    height: calc(var(--appBaseSize) * 2);
}

.flexContainer3Items:nth-child(3) {
    height: calc(var(--appBaseSize) * 3);
}

.flexContainer3Items:last-of-type {
    border: none;
    background: yellow;
    color: black;
}

/* flexContainer4 */
.flexContainer4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: calc(var(--appBaseSize) * 3);
    background: lightGreen;
    border: 2px dashed red;
}

.flexContainer4Items {
    width: 20%;
    background: red;
    color: white;
    padding: var(--appBaseSize);
    font-weight: bold;
    border-bottom: 1px solid black;
}

.flexContainer4Items:nth-child(1) {
    height: initial;
    background: orange;
}

.flexContainer4Items:nth-child(2) {
    height: calc(var(--appBaseSize) * 2);
    background: lightyellow;
    color: black;
}

.flexContainer4Items:nth-child(3) {
    height: calc(var(--appBaseSize) * 3);
    background: blue;
    align-self: flex-end;
    color: white;
    border-bottom: 2px solid red;
}

.flexContainer4Items:last-of-type {
    border: none;
    background: yellow;
    color: black;
}

/* flexContainer5 */
.flexContainer5 {
    display: flex;
    justify-content: space-evenly;
    margin-top: calc(var(--appBaseSize) * 3);
    background: cyan;
    border: 2px dashed red;
}

.flexContainer5Items {
    width: 20%;
    background: orange;
    padding: var(--appBaseSize);
    font-weight: bold;
    border-right: 1px solid black;
}

.flexContainer5Items:nth-child(1) {
    flex-grow: 1;
}

.flexContainer5Items:nth-child(2) {
    flex-basis: 50%;
    flex-grow: 2;
}

.flexContainer5Items:last-of-type {
    border: none;
    background: yellow;
}

/* flexContainer6 */
.flexContainer6 {
    display: flex;
    justify-content: space-evenly;
    margin-top: calc(var(--appBaseSize) * 3);
    background: yellow;
    border: 2px dashed red;
}

.flexContainer6Items {
    flex-grow: 1;
    flex-basis: 0;
    background: violet;
    padding: var(--appBaseSize);
    font-weight: bold;
    border-right: 1px solid black;
}

.flexContainer6Items:last-of-type {
    border: none;
    background: purple;
    color: white;
}

/* flexContainer7 */
.flexContainer7 {
    display: flex;
    justify-content: space-evenly;
    margin-top: calc(var(--appBaseSize) * 3);
    background: violet;
    border: 3px dotted black;
}

.flexContainer7Items {
    width: 50%;
    background: yellow;
    padding: var(--appBaseSize);
    font-weight: bold;
    border-right: 1px solid red;
}

.flexContainer7Items:nth-child(1) {
    flex-shrink: 2;
}

.flexContainer7Items:nth-child(2) {
    background: green;
    color: yellow;
}

.flexContainer7Items:last-of-type {
    border: none;
    background: purple;
    color: white;
}

/* gridContainer1 */
.gridContainer1 {
    display: grid;
    grid-template-columns: calc(var(--appBaseSize) * 12) calc(var(--appBaseSize) * 20);
    grid-auto-rows: minmax(calc(var(--appBaseSize) * 4), auto);
    /* grid-row-gap: calc(var(--appBaseSize) * 1);
    grid-column-gap: calc(var(--appBaseSize) * 1); */
    grid-gap: calc(var(--appBaseSize) * 1);
    grid-template-areas:
        "h1 h2"
        "c1 c2"
        "f f";
}

.gridItem1-h1 {
    background: yellow;
    grid-area: h1;
}

.gridItem1-h2 {
    background: cyan;
    grid-area: h2;
}

.gridItem1-c1 {
    background: green;
    grid-area: c1;
}

.gridItem1-c2 {
    background: orange;
    grid-area: c2;
}

.gridItem1-f {
    background: red;
    color: white;
    grid-area: f;
}

.container {
    position: relative;
    width: 380px;
}

.image {
    display: block;
    width: 380px;
    height: auto;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 176px;
    width: 380px;
    opacity: 0;
    transition: 0.5s ease;
    background-color: #008cba;
}

.container:hover .overlay {
    opacity: 0.9;
}

.text_links {
    color: white;
    font-size: 26px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

/* gridContainer2 */
.gridContainer2 {
    display: grid;
    grid-template-columns: repeat(1, minmax(calc(var(--appBaseSize) * 6), auto));
    grid-auto-rows: minmax(calc(var(--appBaseSize) * 1), auto);
    grid-gap: calc(var(--appBaseSize) * 1);
    grid-template-areas: "maincontent" "myartworks" "myphotos" "footer";
}

/* first row */
.gridItem2-tool1 {
    background: red;
    color: white;
    grid-area: tool1;
}

.gridItem2-header {
    background: cyan;
    color: black;
    grid-area: header;
}

.gridItem2-tool2 {
    background: darkred;
    color: white;
    grid-area: tool2;
}

/* second row */
.gridItem2-content1 {
    background: green;
    color: yellow;
    grid-area: content1;
}

.gridItem2-content2 {
    background: lightgreen;
    color: black;
    grid-area: content2;
}

/* third row */
.gridItem2-maincontent {
    color: black;
    grid-area: maincontent;
}

/* fourth row */
.gridItem2-footer {
    color: black;
    grid-area: footer;
}

/* flexContainerGrid2 */
.flexContainerGrid2 {
    display: flex;
    justify-content: center;
    align-content: center;
}

.flexContainerGrid2Items {
    font-weight: bold;
}

/* gridContainer3 */
.gridContainer3 {
    display: grid;
    grid-template-columns: repeat(6, minmax(calc(var(--appBaseSize) * 6), auto));
    grid-auto-rows: minmax(calc(var(--appBaseSize) * 4), auto);
    grid-gap: calc(var(--appBaseSize) * 1);
}

/* first row */
.gridItem3-tool1 {
    grid-column-start: 1;
    grid-column-end: 2;
    background: red;
    color: white;
}

.gridItem3-header {
    grid-column-start: 2;
    grid-column-end: 6;
    background: cyan;
    color: black;
}

.gridItem3-tool2 {
    grid-column-start: 6;
    grid-column-end: 7;
    background: darkred;
    color: white;
}

/* second row */
.gridItem3-content1 {
    grid-column-start: 1;
    grid-column-end: 4;
    background: green;
    color: yellow;
}

.gridItem3-content2 {
    grid-column-start: 4;
    grid-column-end: 7;
    background: lightgreen;
    color: black;
}

/* thir row */
.gridItem3-content3 {
    grid-column: span 6;
    background: pink;
    color: black;
    height: 100%;
}

/* foruth row */
.gridItem3-footer {
    grid-column: 1 / -1;
    background: orange;
    color: black;
}

/* flexContainerGrid3 */
.flexContainerGrid3 {
    display: flex;
    justify-content: space-evenly;
    height: 100%;
    align-items: center;
    background: cyan;
    gap: 2rem;
}

[data-notification-count] {
    position: relative;
}
[data-notification-count]::before {
    content: attr(data-notification-count);
    position: absolute;
    top: -0.75em;
    right: -0.75em;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.flexContainerGrid3Items {
    width: 20%;
    font-weight: bold;
    background: yellow;
}

.flexContainerGrid3::before {
    content: "Content 3 before";
    color: green;
    background: orange;
}

.flexContainerGrid3::after {
    content: "Content 3 after";
    color: red;
    background: lightblue;
}

/* gridContainerCalculator */
.gridContainerCalculator {
    display: grid;
    background: black;
    font-weight: bold;
    font-size: calc(var(--appBaseSize) * 2);
    padding: var(--appBaseSize);
    width: 100%;
    grid-template-columns: repeat(4, calc(var(--appBaseSize) * 4));
    grid-auto-rows: calc(var(--appBaseSize) * 4);
    grid-gap: calc(var(--appBaseSize) * 0.5);
    justify-content: center;
}

/* gridContainerCalculatorResult */
.gridContainerCalculatorResult {
    display: flex;
    grid-column: span 4;
    padding: calc(var(--appBaseSize) * 0.5);
    background: lightyellow;
    color: red;
    font-weight: normal;
    justify-content: flex-end;
    align-items: center;
}

/* gridContainerCalculatorItem */
.gridContainerCalculatorItem {
    display: flex;
    background: darkgray;
    color: black;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

/* gridContainerCalculator2 */
.gridContainerCalculator2 {
    display: grid;
    background: lightgreen;
    font-weight: bold;
    font-size: calc(var(--appBaseSize) * 2);
    padding: var(--appBaseSize);
    width: 100%;
    grid-template-columns: repeat(4, calc(var(--appBaseSize) * 4));
    grid-auto-rows: calc(var(--appBaseSize) * 4);
    grid-gap: calc(var(--appBaseSize) * 0.5);
    justify-content: center;
}

/* gridContainerCalculatorResult2 */
.gridContainerCalculatorResult2 {
    display: flex;
    grid-column: span 4;
    padding: calc(var(--appBaseSize) * 0.5);
    background: lightyellow;
    color: red;
    font-weight: normal;
    justify-content: flex-end;
    align-items: center;
    border: 2px solid black;
}

/* gridContainerCalculatorItem2 */
.gridContainerCalculatorItem2 {
    display: flex;
    background: darkgray;
    color: black;
    border-radius: 50%;
    font-weight: bold;
    font-size: calc(var(--appBaseSize) * 1.5);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid black;
}

.gridContainerCalculatorItem2:hover {
    background: yellow;
    color: blue;
}

.mainContainer {
    padding: calc(var(--appBaseSize) * 1);
    height: calc(var(--appBaseSize) * 50);
}

.dataContainerParent {
    height: 100%;
    background: lightcoral;
    padding: 0;
    margin-top: calc(var(--appBaseSize) * 1);
}

.dataContainer {
    background: lightgreen;
    padding: calc(var(--appBaseSize) * 0.5);
    height: 100%;
    overflow-y: scroll;
    width: 100%;
}

.dataItem {
    display: flex;
    width: fit-content;
    margin-bottom: calc(var(--appBaseSize) * 0.5);
    padding: calc(var(--appBaseSize) * 0.5);
    border: 2px solid black;
    justify-items: flex-start;
    height: calc(var(--appBaseSize) * 3);
    align-items: center;
    background: cyan;
}

.dataItem-yellow {
    background: yellow;
}

.dataItem-green {
    background: green;
    color: white;
}

input-knob {
    width: 90px;
    padding: 5px;
}

input-knob::part(rotator) {
    background: lightblue;
    border: 2px dashed blue;
    border-radius: 100%;
    width: 75px;
    height: 75px;
}

.mark {
    display: inline-block;
    width: 100%;
    text-align: center;
    font: bold 100% monospace;
    color: blue;
}