.page_style{
    background-image: url("Object/Звезды-фон.jpg");
}
.container{
    width: 80%;
    margin-left: 10%;
    display: grid;
    grid-template-rows: fit-content(0) fit-content(0);
    grid-template-columns: 1fr 0.4fr;
    grid-template-areas:
    "header header"
    "navigation navigation"
    "head  head"
    "main  nav"
    "foter foter";
    gap: 15px;
    text-align: center;
}
.head{
    text-align: center;
    grid-area: header;
    width: 100%;
    height: fit-content;
    background-color: aliceblue;
    border: 20px;
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
}
.title{
    float: left;
    padding-top: 4.5%;
    width: 55%;
    height: 85%;
    text-align: left;
}
.title h1{
    padding-left: 20%;
    padding-top: 20px;
}
.title p{
    float: right;
    padding-left: 35%;
    margin: 0 auto;
}
.slocan{
    float: right;
    width:45%;
    height:85%;
    overflow: hidden;
}
.slocan p{
    float: right;
    margin-top: 110px;
    padding-right: 2%;
}
.icon{
    float: left;
    padding-left: 2%;
    overflow: hidden;
}
.top-menu{
    text-align: center;
    margin-top: 1rem;
    grid-area: navigation;
    height: calc(100% - 1rem);
    visibility: visible;
}
.list_link-menu {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: aliceblue;
    border: 5px;
    border-radius: 20px;
    width: 135px;
    height: 20px;
    cursor: pointer;
  }
  .list_link-menu:hover, .list_link-menu:focus {
    background-color: gray;;
  }
  
  .link-menu {
    padding-left: 3%;
    position: relative;
    display: inline-block;
  }
  
  .link_menu-content{
    height: auto;
    width: 135px;
    display: none;
    position: absolute;
    background-color: aliceblue;
    border: 5px;
    border-radius: 20px;
    z-index: 1;
  }
  
  .link_menu-content a {
    text-decoration: none;
    background-color: aliceblue;
    border: 5px;
    border-radius: 20px;
    border-color: aliceblue;
    border-style: dashed;
    padding: 10% 11%;
    display: block;
  }
  .link-menu .list_link-menu a{
    text-decoration: none;
  }
  
  .link-menu a:hover {
    border-color: red;
}
  
  .show {
    display: block;
}

.contents{
    border: 5px;
    border-radius: 20px;
    grid-area: main;
    width: 100%;
    height: fit-content;
    text-align: center;
}
.contents-head{
    grid-area: head;
    text-align: left;
    height: 180px;
    border: 10px;
    border-radius: 20px;
    background-color: aliceblue;
}
.contents-head h1{
    padding-left: 5%;
    padding-top: 20px;
}

.contents-head1 h1{
    padding-left: 5%;
    padding-top: 55px;
}
.contents-head p{
    padding-left: 5%;
}
.contents-cont{
    grid-area: main;
    float: left;
    width: 100%;
    margin-top: 20px;
    border: 10px;
    border-radius: 20px;
    background-color: aliceblue;
}

.contents-cont img, video{
    width: 80%;
    height: 80%;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
}
.contents-cont p{
    padding-left: 5%;
    padding-right: 5%;
    text-align: left;
    text-indent: 18pt;
}
.contents-navication_page-menu{
    width: 100%;
    padding-top: 20px;
    grid-area: nav;
    margin-left: 2%;
}
.navication_page-menu{
    display: flex;
    flex-direction: column;
    border: 10px;
    border-radius: 20px;
    background-color: aliceblue;
    
}
.navication_page-menu a:hover{
    padding: 5px;
    border: 5px;
    border-radius: 20px;
    border-style: dashed;
    border-color: red;
}
.navication_page-link{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    border: 10px;
    border-radius: 20px;
    background-color: aliceblue;
}
.navication_page-link a:hover{
    padding: 5px;
    border: 5px;
    border-radius: 20px;
    border-style: dashed;
    border-color: red;
}
.YouKnew{
    margin-top: 20px;
    border: 10px;
    border-radius: 20px;
    background-color: aliceblue;
}
.YouKnew p{
    padding-left: 10px;
    padding-right: 10px;
}
.navication_mobile{
    display: none;
}
.navication_icon
{
    display: flex;
    flex-direction: row;
    overflow: hidden;
    text-align: center;
    
}
.up_navigation{
    position: fixed; 
  bottom: 10px; 
  right: 10px; 
  z-index: 99;
  border: none; 
  outline: none; 
  background-color:aliceblue;
  color: white; 
  opacity:0.4;
  cursor: pointer;
  padding: 5px; 
  border-radius: 10px; 
}
.up_navigation .stickyup {
    position: fixed;
  }

.text {
    font-size: 20px;
    width: 100%;
    text-align: center;
  }

.prev, .next {
    cursor: pointer;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    background-color: black;
    color: white;
    font-weight: bold;
    font-size: 18px;
    user-select: none;
  }
.foter_container{
    grid-area: foter;
    
}
.line{
    width: auto;
    top: 5px;
    height: 5px;
    background-color: aliceblue;
}
.foter{
    float: left;
    width: 100%;
    margin-top: 20px;
    border: 10px;
    border-radius: 20px;
    background-color: aliceblue;
}

@media (max-width: 1024px) {
    .container {
        grid-template-rows: fit-content(0) fit-content(0) 1fr fit-content(0);
        grid-template-columns: 1fr 0.2fr;
        grid-template-areas:
        "header header"
        "navigation navigation"
        "main nav"
        "foter foter";
    }
    .list_link-menu{
        width: 100px;
    }
    .link_menu-content{
        width: 100px;
        word-wrap: break-word;
    }
    .link-menu{
        padding-left: 0%;
    }
}
@media (max-width: 768px) {
    body{
        margin-top: 0;
    }
    .head{
        display: none;
    }
    .container {
        margin-top: 20px;
        grid-template-rows: repeat(6, fit-content(0));
        grid-template-columns: 100%;
        grid-template-areas:
        "header"
        "navigation"
        "main"
        "foter";
    }
    .contents-cont img{
        width: 80%;
        height: 80%;
    }
    .top-menu{
        margin: 0;
        display: none;
    }
    .contents-navication_page-menu{
        display: none;
    }
    .contents-cont{
        width: 100%;
    }
    .navication_mobile {
    display:block;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    transition: top 0.3s;
  }
  
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  .navication {
    text-align: center;
    border: 10px;
    border-radius: 20px;
    overflow: hidden;
    background-color: aliceblue;
    position: relative;
  }
  
  .navication #myLinks {
    display: none;
    float: left;
    width: 100%;
    height: auto;
    padding: 10px;
  }
  .navication .icon_burger {
    border: 5px;
    border-radius: 10px;
    margin-right: 15px;
    padding: 2px;
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .navication .icon_burger:active {
    filter: invert();
  }
}