*{
   box-sizing: border-box;
}


::-webkit-scrollbar {display: none;}

html, body {
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
}

.standard-block-color {
   width: 100%;
   height: 100%;
   max-width: 100vw;
   max-height: 100vh;
   /* background-color: rgb(112, 0, 216); */
   background: linear-gradient(to bottom right, rgb(141, 0, 197), rgb(76, 0, 255));
   /* background-color: rgb(243, 186, 0); */
   flex-shrink: 0;
}
.standard-block-white {
   width: 100%;
   height: 100%;
   max-width: 100vw;
   max-height: 100vh;
   background-color: rgb(227, 227, 227);
   flex-shrink: 0;
}

#initial-page {
   display: grid;
   grid-template: 2fr 10fr / 1fr 8fr 1fr;
   grid-template-areas: 
   "header header header"
   "initial-page-center-area initial-page-center-area initial-page-center-area"
   ;
}

header{
   width: 100%;
   height: 100%;
   grid-area: header;
   display: grid;
   grid-template: 4fr / 1fr 8fr 1fr;
   grid-template-areas:
   "user-icon-link header-nav shopping-cart-icon-link"
   ;
   font-family: Arial, Helvetica, sans-serif;
   padding: 2.25% 1% 2.25%;
}

#header-nav{
   width: 100%;
   height: 100%;
   grid-area: header-nav;
   display: flex;
   color: white;
   font-size: 8.5px;
}

#home-nav{
   display: flex;
   flex-direction: column;
   justify-content: center;
}

#home-nav h4{
   margin-block: 0;
   margin-top: 1%;
   font-family: Arial, Helvetica, sans-serif;
}

.header-icon-link{
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
}

#user-icon-link{
   grid-area: user-icon-link;
   justify-content: start;
}

#shopping-cart-icon-link{
   grid-area: shopping-cart-icon-link;
   justify-content: end;
}

#user-icon{
   margin-left: 30%;
   width: 25px;
}

#shopping-cart-icon{
   margin-right: 30%;
   width: 31px;
}

.header-nav-block, .header-text-link-item{
   margin-block: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   text-decoration: none;
   color: white;
   font-size: 17px;
}

.header-text-link-item:hover{
   background-color: rgba(227, 227, 227, 0.185);
   border-radius: 60px;
}

.header-text-link-item{
   margin-inline: 5px;
   margin-bottom: 1px;
}

#short-white-logo{
   width: 35px;
}

#initial-page-center-area{
   width: 100%;
   height: 100%;
   grid-area: initial-page-center-area;
   display: flex;
   justify-content: center;
   align-items:end;
   padding-top: 5%;
   position: relative;
}

#main-logo-box-home-page{
   width: 100%;
   height: 100%;
   z-index: 2;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: end;
   padding-bottom: 60vh;
}

#main-logo-home-page{
   width: 25%;
}

#backgroung-home-image{
   width: 100%;
   z-index: 1;
   position: absolute;
}

#login-page{
   display: grid;
   grid-template: 1fr / 8fr 10fr;
   grid-template-areas: 
   "login-form-area login-image-area"
   ;
}

#login-form-area{
width: 100%;
height: 100%;
grid-area: login-form-area;
}

#login-image-area{
width: 100%;
height: 100%;
grid-area: login-image-area;
display: flex;
align-items: end;
}

#login-image{
   width: 100%;
   }