* {
    box-sizing: border-box;
}

@font-face {
    font-family: "font-awsome";
    src: url(font-a/fonts/fontawesome-webfont.ttf) format("truetype");
}

a {
    cursor: pointer;
    text-decoration: none;
    color: rgba(185, 0, 255, 1);
}

a:visited {
    color: rgba(185, 0, 255, 1);
}

a:hover {
    transition-duration: 1000ms;
    text-shadow: 0 0 15px rgba(0, 255, 0, 1);
    color: rgba(185, 0, 255, 1);
}

a#author-href {
    color: rgba(0, 255, 0, 1);
}

a#author-href:visited {
    color: rgba(0, 255, 0, 1);
}
 
a#author-href:hover {
    text-shadow: rgba(255, 255, 255, 1);
    color:  rgba(0, 255, 0, 1);
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;   
    padding-left: 15px;
    padding-right: 15px;
/*    border: 1px solid red; */
}

.text-align-right {
    text-align: right;
}

@media (orientation: portrait) {

    body {
        background: rgba(40, 40, 40, 1);
        color: rgba(0, 255, 0, 1);
        /* font: 18px/normal 'RobotoMono'; */
        font-family: "Roboto Mono", monospace;
        font-size: 11px;
        font-weight: 200;
        font-style: normal;
        padding-top: 0px;
        margin-top: 0px;
    }

    .menu-bar {
        font-size: xx-large;
        border: solid lime 1px;
        text-align: center;
    }

    .logo-label {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 0px;
        margin-top: 10px;
        padding-left: 20px;
    }

    .logo-label:active {
    /*    transform: scale(1.16, 1.16); */
        text-shadow: 0 0 15px rgba(0, 255, 0, 1);
    }

    .descript-label {
        font-size: 10px;
        font-weight: 200;
        padding-left: 20px;
    }

    .header-table {
        display: grid;
        grid-template-columns: repeat(12, 8.33%);
        /* border: solid 1px blue; */
    }

    .span-2-row {
        grid-row: span 2;
    }

    .span-3-row {
        grid-row: span 3;
      /* border: solid 1px red; */
        height: 90px;
    }

    .span-2-cols {
        grid-column: span 2;
       /* border: solid 1px red; */
    }

    .span-3-cols {
        grid-column: span 3;
       /* border: solid 1px red; */
    }
    
    .span-4-cols {
        grid-column: span 4;
       /* border: solid 1px red; */
    }
    
    .span-6-cols {
        grid-column: span 6;
       /* border: solid 1px red; */
    }
    
    .span-8-cols {
        grid-column: span 8;
       /* border: solid 1px red; */
    }

    .span-9-cols {
        grid-column: span 9;
       /* border: solid 1px red; */
    }

    .span-10-cols {
        grid-column: span 10;
       /* border: solid 1px red; */
    }

    .allign-right {
        text-align: right;
        padding-right: 20px;
    }

    .logo-img {
        height: 25%;
    }

    .brand-logo {
        font-family: "font-awsome", monospace;
        font-size: 11px;
        font-style: normal;
        cursor: pointer;
        text-align: center;
        padding: 3px 5px 3px 5px;
        border-radius: 0 0 4px 4px;
        border-top: none;
        border-bottom: 4px solid rgba(0, 255, 0, 1);
        border-left: 1px solid rgba(0, 255, 0, 1);
        border-right: 1px solid rgba(0, 255, 0, 1);
    }

    .brand-logo:active {
        background-image: linear-gradient(rgba(185, 0, 255, 1), rgb(26, 26, 26));
        box-shadow: 0 0 10px rgba(0, 255, 0, 1);
        z-index: 11;
    }
    
    .boosty_logo { 
        padding-left: 8px;
        padding-right: 8px;
    }
    
}

@media (orientation: landscape) {

    body {
        background: rgba(40, 40, 40, 1);
        color: rgba(0, 255, 0, 1);
        /* font: 18px/normal 'RobotoMono'; */
        font-family: "Roboto Mono", monospace;
        font-size: 18px;
        font-weight: 400;
        font-style: normal;
        padding-top: 0px;
        margin-top: 0px;
    }

    
    .load_screen {
        transition-duration: 1000ms;
        padding: 0%;
        margin: 0%;
        position: fixed;          /* Фиксируется относительно окна браузера */
        top: 0;                  /* Прижимаем к верхнему краю */
        left: 0;                /* Прижимаем к левому краю */
        width: 100%;            /* Ширина — 100% экрана */
        height: 100%;           /* Высота — 100% экрана */
        background-color: rgba(40, 40, 40, 1); /* Полупрозрачный чёрный фон */
        z-index: 9999;        /* Высокий z‑index, чтобы быть сверху всего */
        display: grid;
        justify-content: center;
        align-items: center;
        visibility: visible;
    }

    .load_screen_top_left {
        width: 0%;
        border-bottom: 8px rgba(0, 255, 0, 1) dotted;
    }

    .load_screen_top_right {
        width: 99%;
        border-bottom: 8px rgb(36, 50, 36) dotted;
    }


    .load_screen_bottom_left {
        width: 0%;
        border-top: 8px rgba(0, 255, 0, 1) dotted;
    }
    
    .load_screen_bottom_right {
        width: 99%;
        border-top: 8px rgb(36, 50, 36) dotted;
    }

    .load_screen_status {
        width: 100%;
        text-align: center;
    /*    border: 1px yellow solid;  */
        font-size: larger;
        padding: 8px;
        color: rgba(0, 255, 0, 1);
    }


    .bottom-top-padding {
        padding-bottom: 4rch;
        padding-top: 4rch;
    }

    .logo-label {
        padding-left: 1em;
        cursor: pointer;
        font-size: xx-large;
        font-weight: 800;
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .logo-label:hover {
        transition-duration: 1000ms;
    /*    transform: scale(1.16, 1.16); */
        text-shadow: 0 0 15px rgba(0, 255, 0, 1);
    }

    .descript-label {
        padding: 0px;
        margin: 0px;
        font-size: large;
        font-weight: 400;
        text-align: center;
    }

    .menu_on {
        text-align: center;
        padding-bottom: 15px;
        background-image: linear-gradient(rgba(185, 0, 255, 1), rgb(26, 26, 26));
        transform: scale(1.16, 1.16);
        border-radius: 15px 15px 0 0;
        border-top: 2px solid rgba(0, 255, 0, 1);
        border-left: 2px solid rgba(0, 255, 0, 1);
        border-right: 2px solid rgba(0, 255, 0, 1);
        border-bottom: 16px solid rgba(26, 26, 26, 1);
        z-index: 10;
    }

    .menu {
        cursor: pointer;
        text-align: center;
        background-image: linear-gradient(rgba(40, 40, 40, 1), rgb(26, 26, 26));
        padding-bottom: 15px;
        border-radius: 15px 15px 0 0;
        border-top: 2px solid rgba(0, 255, 0, 1);
        border-left: 2px solid rgba(0, 255, 0, 1);
        border-right: 2px solid rgba(0, 255, 0, 1);
        border-bottom: 16px solid rgba(26, 26, 26, 1);
        z-index: 8;

    }

    .menu:hover {
        background-image: linear-gradient(rgba(185, 0, 255, 1), rgb(26, 26, 26));
    /*  text-shadow: 0 0 20px rgba(0, 255, 0, 1); */
        box-shadow:  inset 0 -4px 20px rgba(0, 255, 0, 1);
        border-bottom: 16px solid rgba(9, 181, 9, 1);
    /*  transform: scale(1.16, 1.16); */ 
        transition-duration: 1000ms;
        z-index: 10;
    }

    .brand-logo {
        font-family: "font-awsome", monospace;
        font-size: 24px;
        font-style: normal;
        cursor: pointer;
        text-align: center;
        padding: 10px;
        border-radius: 0 0 15px 15px;
        border-top: none;
        border-bottom: 4px solid rgba(0, 255, 0, 1);
        border-left: 1px solid rgba(0, 255, 0, 1);
        border-right: 1px solid rgba(0, 255, 0, 1);
    }

    .brand-logo:hover {
        background-image: linear-gradient(rgba(185, 0, 255, 1), rgb(26, 26, 26));
        transition-duration: 1000ms;
        box-shadow: 0 0 20px rgba(0, 255, 0, 1);
        z-index: 11;
    }

    .boosty_logo {
        padding-left: 15px; 
        padding-right: 15px;
    }

    .content { 
        background-color: rgb(26, 26, 26);
        border-left: 4px solid rgba(0, 255, 0, 1);
        border-right: 4px solid rgba(0, 255, 0, 1);
        border-top: 4px solid rgba(0, 255, 0, 1);
        border-radius: 15px 15px 0 0;
        padding-bottom: 10px;
        z-index: 11;
    }

    .blog-card {
        margin-top: 10px;
        border: 2px solid rgba(0, 255, 0, 1);
        border-radius: 15px;
        padding: 25px;
    }
    
    .blog-title {
        font-size: larger;
    }

    .blog-date {
        font-size: x-small;
    }

    .blog-content {
        font-size: medium;
        margin: 10px;
    }

    .blog-image {
        margin: 15px;
    }

    .blog-a {
        text-decoration: none;
    }

    .lib-card {
        margin-top: 10px;
        border: 2px solid rgba(0, 255, 0, 1);
        border-radius: 15px;
        cursor: pointer;
    }

    .lib-card:hover {
        border: 2px solid rgba(0, 255, 0, 1);
        border-radius: 15px;
        box-shadow:  inset 0 0 30px rgba(185, 0, 255, 1);    
        transition-duration: 1000ms;
    }

    .lib-card-img {
        padding: 4px;
    }

    .lib-card-img-logo {
        height: 12rch;
        align-self: center;
    }

    .lib-card-title {
        padding-top: 1rch;
        font-weight: 700;
        font-size: larger;
    }

    .lib-card-caption {
        padding: 4px;
    }

    .lib-paragraph-card {
        margin: 4px;
        border: 2px solid rgba(0, 255, 0, 1);
        border-radius: 15px;
    }

    .lib-paragraph-title {
        padding-top: 1rch;
        font-weight: 700;
        font-size: larger;
    }

    .lib-paragrph-pre-content {
        padding: 4px;
    }

    .proj-card {
        margin-top: 10px;
        border: 2px solid rgba(0, 255, 0, 1);
        border-radius: 15px;
    }

    .map-card {
        margin-top: 10px;
        border: 2px solid rgba(0, 255, 0, 1);
        border-radius: 15px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .scroll_out_button {
        cursor: pointer;
        padding: 4px;
        margin: 4px;

        border-radius: 15px;     
    }

    .lib-paragrph-content {
        padding: 4px;
        height: 0px;
        overflow-y: hidden;
    }

    .scroll_off_button {
        cursor: pointer;
        padding: 4px;
        margin: 4px;

        border-radius: 15px;  
    }
    

    .footer {
        background-image: linear-gradient(rgb(40, 40, 40), rgba(185, 0, 255, 1));
        border-left: 4px solid rgba(0, 255, 0, 1);
        border-right: 4px solid rgba(0, 255, 0, 1);
        border-bottom: 4px solid rgba(0, 255, 0, 1);
        border-radius: 0 0 15px 15px;
        z-index: 3;
    }


    .bottom-menu {
        visibility: visible;
        margin-top: 20px;
    }

    .bottom-menu-elem {
        padding: 0px 20px 0px 20px;
        cursor: pointer;
        text-align: center;
        border-radius: 15px;
    /* border: 1px solid green; */
    }

    .bottom-menu-elem:hover {
        transition-duration: 1000ms;
    /* background-image: radial-gradient(
            rgba(0, 255, 0, 1) 60%, 
            rgba(0, 255, 0, 0) 80%,
            rgba(0, 255, 0, 0) 90%
        ); */
        text-shadow: 0 0 15px rgba(0, 255, 0, 1);
        transform: scale(1.16, 1.16);
    /* color: rgba(40, 40, 40, 1); */
        font-weight: 700;

    }

    .site-author {
        margin-top: 15px;
        padding-bottom: 25px;
        padding-top: 10px;
        text-align: center;
        border-top: 8px rgb(40, 40, 40) dotted;
    }

    .site-author-label {
        vertical-align: text-top;
        padding-top: 5px;
    }

    .basment-hr {
        background: rgb(40, 40, 40);
        height: 5px;
        
        border: none;
    }

    .height-0px-in-landscape {
        height: 0px;
    }
}



.placeholder {
    border: none;
   /* border: 1px solid red; */   
}