/*---- STYLES FOR HOME PAGE "IMG-PR" ----*/
 .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;
        z-index: 1;
    }
    #leftcontainer {
        width: 300px;
        height: 510px;
        background-color: var(--dark-violet-clr);
        border-radius: var(--rounded-corners);
        z-index: 0;
        /*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(--pink-dawn-clr);
        padding-left: 13px;
        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(--warm-yellow-clr);
        font-size: 17pt;
        text-decoration: none;
    }
    .menu-links:hover {
        filter: drop-shadow(1px 1px 15px var(--warm-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(--warm-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: 10;
        top: 44px;
        left: 461px;
    }
    .folded-header {
        display: none;
    }
    .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(--pink-dawn-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(--pink-dawn-clr);
        text-decoration: none;
    }
/*---------------- RESPONSIVENESS for Home Page ---------------------------*/
/*---------------- For Tablets, iPads, etc. -------------------------------*/
@media screen and (max-width: 853px) {
    header {height: 75px;}
    #middleparentcontainer {flex-direction: column; gap: 20px;}
    #leftcontainer {width: 750px; height: 210px;}
    .imgpr-header {position: relative; z-index: 2; top: 0; left: 0}
    #right-container {max-width: 750px; height: auto;}
    #rightcontent {flex-direction: column;}
    #welcomeblock-wrapper {width: auto;}
    #cont-social-wrapper {width: auto; padding-left: 25px; padding-top: 8px;}
    #site-log-wrapper {width: auto;}
    #aside-wrapper {width: auto;}
    #insert-flowers {display: block; height: inherit;}
/*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: 15px 5px;
    }
    
    .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%;}
}
/*---------------- For Mobile devices -------------------------------*/
@media screen and (max-width: 540px){
    .folded-header {display: block;}
    .imgpr-header {display: none;}
    header {height: 142px;}
    #leftcontainer {width: 355px; height: 285px;}
    #right-container {max-width: 355px; height: auto;}
    #rightcontent {padding: 25px;}
    .menu-links {font-size: 17pt;}
    .menu {line-height: 1; gap: 30px 5px;}
    #middleparentcontainer {flex-direction: column; gap: 20px;}
    #welcomeblock-wrapper {width: auto;}
    #cont-social-wrapper {width: auto; text-align: center; padding: 0}
    #insert-flowers {display: block; margin-top: -12px; margin-left: 10px; float: none}
}