:root {
    --warning-text-color: #C6C626;
    --error-text-color: #C63636;
    --green-card-text-color: #26C626;

    --icon-control-infos-size: 24px;
}

#header {z-index: 10;}
#main {display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; height: 90vh; width: 100%;}
#tech-page {width: 98%;  height: 98%; position: absolute; border: 3px solid var(--main-border-color); z-index: 1;}

.tech-info {width: 100%;  height: 100%;  display: none; padding-right: 40px; justify-content: end; align-items: start; margin-top: 6%;}
.vissible {display: flex; animation: modal-show 2s forwards;}
.tech-info-wrap {width: 520px; min-width: 300px; max-height: 700px; background: var(--main-sub-color); border: 1px solid var(--main-border-color); border-radius: 6px; display: flex; flex-direction: column;}
.control {height: 24px; display: flex; justify-content: end; align-items: center; gap: 8px; background: var(--main-sub2-color); padding: 4px; margin-bottom: 6px;}
.show-info, .close-info {fill: var(--sub-text-color); transition: fill 0.3s ease;}
.show-info > svg, .close-info > svg {width: var(--icon-control-infos-size); height: var(--icon-control-infos-size);}
.show-info {justify-content: center; align-items: center; display: flex;}
.close-info {justify-content: center; align-items: center; display: flex;}
.show-info:hover {fill: #8eAe2e;}
.close-info:hover {fill: #Ae2e2e;}

.text-block::-webkit-scrollbar {width: 3px;}
.text-block::-webkit-scrollbar-track {background: transparent;}
.text-block::-webkit-scrollbar-thumb {background-color: var(--main-sub2-color);} 

.tech-info .text-block {display: flex; max-height: 0; overflow-y: scroll; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; padding: 0 10px 0 10px;}
.tech-info .open {max-height: 720px; opacity: 0.9;}

.tech-info .text-infos {display: flex; flex-direction: column; width: 100%; text-align: justify;}
.tech-info .text-infos > .image > img {width: 60%; height: auto}
.tech-info .text-infos > .image {display: flex; flex-direction: column; align-items: center; width: 100%; height: auto;}
.tech-info .text-infos > .warning {color: var(--warning-text-color);}
.tech-info .text-infos > .error {color: var(--error-text-color);}
.tech-info .text-infos > .green-card {color: var(--green-card-text-color);}
.tech-info .text-infos > h2, .tech-info .text-infos > h3 {text-decoration: underline; display: flex; justify-content: center;}

.canvas-tech-text {font-family: "Tektur"; font-size: 16px; dominant-baseline: middle; text-anchor: middle; user-select: none;}


/* Тестовый вариант через HTML элементы, так как рисовать грифику, честно, пизданёшься. */
#tech-page-html {width: 98%;  height: 98%; position: absolute; background: var(--main-main-color); z-index: 1; overflow-x: scroll;}
#tech-page-html::-webkit-scrollbar {width: 3px;}
#tech-page-html::-webkit-scrollbar-track {background: transparent;}
#tech-page-html::-webkit-scrollbar-thumb {background-color: var(--main-sub2-color);}

#tech-page-html * {outline: 1px solid green;}