/*---------------------- STYLES ---------------------------*/
/*---- Стиль для главной страницы ----*/
    .bodystyle {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: hidden;
        background-image: var(--grad-sky-background);
        background-repeat: repeat-x;
        margin: 0;
        /*далее шрифт*/
        font-family: "Itim", system-ui;
        font-weight: 400;
        font-style: normal;
    }
    #superiorcontainer {
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        /*background-image: url("style-images/grass-fog.png");
        background-repeat: no-repeat;
        background-position: bottom;*/
    }
    .fog {
        width: 100%;
        position:fixed;
        bottom: 0;    
        }    
    #maincontainer {
        width: 1102px;
        height: auto; 
        border-color: black; 
        border-width: thin;
        background-color: rgb(128, 195, 193, 0);
        display: block;
        margin: auto;
    }
    #middleparentcontainer {
        display: flex;
        flex-direction: row;
        gap: 40px;
    }
    #leftcontainer {
        width: 300px;
        height: 510px;
        background-color: var(--dark-violet-clr);
        border-radius: var(--rounded-corners);
        /*border: thin solid white;*/    
    }
    #right-container {
        max-width: 760px;
        height: 708px;
        overflow: auto;
        background-color: var(--dark-violet-clr);
        border-radius: var(--rounded-corners);
        /*border: thin solid white;*/
    }
    header {
        width: auto;
        height: 70px;
        background-color: rgba(43, 31, 64, 0);/*invisible*/
        border: thin solid white;
    }
    footer {
        width: auto;
        height: 73px;
        color: var(--sirenevyj-clr);
        border: thin solid white;
        background-color: rgba(43, 31, 64, 0);/*invisible*/        
    }
    #rightcontent {
        width: auto;
        display: flex;
        padding: 50px; 
        row-gap: 20px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #welcomeblock-wrapper {
        width: 450px;
        margin: 0;
        padding: 0;
        /*border-radius: var(--rounded-corners);*/
    }
    #welcometext {
        width: auto;
        background-color: var(--dusty-violet-clr);
        color: var(--sirenevyj-clr);
        padding: 30px;
        font-size: 1rem;
        /*border-radius: var(--rounded-corners);*/
    }
    #cont-social-wrapper {
        width: 176px;
        background-color: var(--dusty-violet-clr);
        color: var(--sirenevyj-clr);
        padding-left: 25px;
        padding-top: 30px;
        margin: 0;
        box-sizing: border-box;
        font-size: medium;
        font-weight: 700;
        line-height: 230%;
        /*border-radius: var(--rounded-corners);*/         
    }
    #site-log-wrapper {
        width: 272px;
    }
    #site-log {
        width: auto;
        background-color: var(--dusty-violet-clr);
        color: var(--sirenevyj-clr);
        padding: 30px;
        font-size: 1rem;
        /*border-radius: var(--rounded-corners);*/
    }
    #aside-wrapper {
        width: 355px;
    }
    #aside {
        width: auto;
        background-color: var(--dusty-violet-clr);
        color: var(--sirenevyj-clr); 
        padding: 30px;
        font-size: 1rem;
        /*border-radius: var(--rounded-corners);*/
    }
    .menu {
        list-style-type: none;
        line-height: 1.57;
        padding: 0;
        display: block;
        margin-left: 16px;
        margin-right: 16px;
    }
    .menu-items:nth-child(1) {margin-left: 59%;}
    .menu-items:nth-child(2) {margin-left: 60%;}
    .menu-items:nth-child(3) {margin-left: 77%;}
    .menu-items:nth-child(4) {margin-left: 59%;}
    .menu-items:nth-child(5) {margin-left: 45%;}
    .menu-items:nth-child(6) {margin-left: 25%;}
    .menu-items:nth-child(7) {margin-left: 12%;}
    .menu-items:nth-child(8) {margin-left: 4%;}
    .menu-items:nth-child(9) {margin-left: 1%;}
    .menu-items:nth-child(10) {margin-left: 0%;}

    .menu-links {
        color: var(--light-yellow-clr);
        font-size: 17pt;
        text-decoration: none;
    }
    .menu-links:hover {
        filter: drop-shadow(1px 1px 15px var(--light-yellow-clr));
        color: white;
        cursor: crosshair;
        border-style: dotted;
        border-width: 0 3px 0 3px;
        border-color: rgb(200, 162, 241, 3)
    }
    .menulinks:active {
        filter: drop-shadow(1px 1px 15px var(--light-yellow-clr));
        color: white;
        cursor: crosshair;
        border-style: dotted;
        border-width: 0 3px 0 3px;
        border-color: rgb(200, 162, 241, 3);
        position: relative; top: 2px; left: 2px;
    }
    
    .imgpr-header {
        position: relative;
        z-index: 1;
        top: 44px;
        left: 461px;
    }
    .peri {
        position: relative;
        bottom: 444px;
        left: 187px;
        }
    .front-flowers {
        position: relative;
        bottom: 780px;
        right: 240px;
    }
    #insert-flowers {
        float: right;
        display: none;
    }
    .contact-links {
        color: var(--sirenevyj-clr);
        background-color:rgb(42, 31, 63);
        padding-left: 4px;
        padding-right: 4px;
        text-decoration: none;
    }
    .contact-links:hover{
        background-color: rgb(42, 31, 63, 0);/*invisible*/
    }
    a.contact-links:active{
        color: var(--frosty-biruza-clr);
    }
    .contact-links:visited{
        color: var(--sirenevyj-clr);
        text-decoration: none;
    }
/*---------------- RESPONSIVENESS for Home Page ---------------------------*/
@media screen and (max-width: 850px) {
    #middleparentcontainer {flex-direction: column; gap: 20px;}
    #leftcontainer {width: 695px; height: 210px; margin-top: 25px;}
    .imgpr-header {position: static;}
    #right-container {max-width: 695px; height: auto;}
    #rightcontent {flex-direction: column;}
    #welcomeblock-wrapper {width: auto;}
    #cont-social-wrapper {width: auto;}
    #site-log-wrapper {width: auto;}
    #aside-wrapper {width: auto;}
    #insert-flowers {display: block;}
/*Links in the menu are changing from wavy flow (PC) to the table (on mobile mode)*/    
    .menu {display: flex; justify-content: space-between; flex-flow: wrap; gap: 10px;}
    
    .menu-items {flex-basis: 25%; text-align: center;}
    .menu-items:nth-child(1) {margin-left: 0%;}
    .menu-items:nth-child(2) {margin-left: 0%;}
    .menu-items:nth-child(3) {margin-left: 0%;}
    .menu-items:nth-child(4) {margin-left: 0%;}
    .menu-items:nth-child(5) {margin-left: 0%;}
    .menu-items:nth-child(6) {margin-left: 0%;}
    .menu-items:nth-child(7) {margin-left: 0%;}
    .menu-items:nth-child(8) {margin-left: 0%;}
    .menu-items:nth-child(9) {margin-left: 0%;}
    .menu-items:nth-child(10) {margin-left: 0%;}
}
/*Далее идут основные текстовые стили для других страниц*/
    .Gallery-title {
        font: 700 2em 'Itim', cursive;
        color: var(--sirenevyj-clr);
        margin-block-start: 0;
        margin-block-end: 0;
        margin-top: -0.25em;
        margin-bottom: 23px;
    }
    .Contents-title {
        font-family: "Itim", system-ui;
        font-weight: 400;
        font-size: 2.5em;
        color: var(--sirenevyj-clr);
        margin-block-start: 0;
        margin-block-end: 0;
        margin-top: -0.25em;
        margin-bottom: 23px;
}
    .Name-project-caption {
        font-family: "Itim", system-ui;
        color: var(--light-yellow-clr);
        font-weight: 400;
        font-size: 1.3em;
        margin-block-start: 0;
        margin-block-end: 0;
        background-color: var(--midnight-sky-clr);
        padding: 3px;
        /*border: 1px solid grey;*/
    }
    .year-project {
        font-family: "Itim", system-ui;
        color: var(--sirenevyj-clr);
        font-size: 1.4em;
        margin-block-start: 0;
        margin-block-end: 0;
        border: 1px solid grey;
    }
    .regular-text {
        font-family: "Itim", system-ui;
        font-size: 1.3em;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-top: -0.25em;
        border: 1px solid grey;
    }