@font-face { font-family: "f2";	src: url("data/cadens-light.ttf");}
@font-face { font-family: "f4";	src: url("data/tilda-sans_light.ttf");}

@keyframes fullscreen-container {
0% {

opacity: 0;
}
100% {

opacity: 1;
}
}

html{display: block;}
body {background-color: black;    overflow-x: clip;    overflow-y: scroll;    max-width: 100%;    height: 100vh;    display: block;}

.body {
display: block;
width: 1200px;
height: fit-content;
background: url("data/decoration.png"), url("data/decoration3.png"), rgba(31, 123, 178, .56);
background-repeat: no-repeat;
background-position: left bottom, right top;
background-size: 25%;

position: relative;
margin: 0 auto;
border-radius: 100px;
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.14);
backdrop-filter: blur(5px);
overflow: clip;
border: 2px dotted rgba(255, 255, 255, 0.11);

}

.background {
/* background-image: url("back.jpg"); */
background-image: url('data/background.jpg');
background-size: cover;
background-position: center;
position: fixed;
display: revert;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
filter: blur(6px);
display: block;
animation: fade 10s infinite;
opacity: 0;
}

.bg1 {  background-image: url('data/background.jpg');  animation-delay: 0s;}
.bg2 {  background-image: url('data/background2.jpg');  animation-delay: 5s;}

.background-overlay {
background-image: url("data/bg.png");
background-repeat: repeat;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity: 25%;
display: block;
}

.background-body {
/* background-image: url("sbg.png"), url("sbg2.png"); */
background-image: url("data/sbg.png"), url("data/sbg2.png"), linear-gradient(10deg, rgba(0,134,255,0) 35%, rgba(255, 255, 255, .5) 100%);
background-repeat: repeat;
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
opacity: 5%;
display: block;
background-size: 20%, 30%;
pointer-events: none;
}

@keyframes fade {
0%, 100% {    opacity: 0;  }
50% {    opacity: 1;  }
/* 25%, 75% {    opacity: 1;  } */
}

.header {
color: rgb(255, 255, 255);
font-size: 50px;
position: relative;
font-family: "f2";
text-shadow: -2px 0px 3px rgba(0, 37, 106, 0.52);
display: block;
border-top: 2px dotted rgba(255, 255, 255, 0.44);
border-bottom: 2px dotted rgba(255, 255, 255, 0.44);
}

.description {
color: rgb(255, 255, 255);
font-size: 25px;
position: relative;
font-family: "f2";
text-shadow: -2px 0px 3px rgba(0, 37, 106, 0.52);
display: block;
background-color: rgba(255, 0, 0, 0.51);
padding: 10px;

}

.header::after {
background: url("data/decoration2.png");
display: block;
width: 100%;
height: 100px;
background-size: 30%;
position: absolute;
content: "";
background-repeat: no-repeat;
margin: 0 auto;
top: 0px;
left: 0px;
background-position: center bottom;
}

.center {  text-align: center;}

#goods-list {  width: 800px;  margin: 0 auto; padding: 10px;}
.goods-item-name, .goods-item-price, .goods-item-art {flex: 1 auto; color: rgb(0, 37, 109); font-family: "f4";}

.goods-item{
display: flex; flex-wrap: wrap;
width: 100%;
background-color: rgba(255, 255, 255, 0.3);
margin: 10px auto;
padding: 10px;
border-radius: 15px;
border: 1px dotted rgba(255, 255, 255, 0.36);
box-shadow: -5px 5px 5px rgba(0, 48, 89, 0.2);
position: relative;
align-items: center;
}

.goods-item-image {
width: 100px;
height: 100px;
object-fit: cover;
margin-right: 10px;
border-radius: 5px;  
cursor: pointer;
}

.goods-item-details {
display: flex;
width: calc(100% - 120px);
position: relative;
left: 0px;
float: left;
flex-wrap: wrap;
}

.goods-item-name {  width: 100%;  padding-bottom: 5px;  text-align: center;  border-bottom: 1px solid rgba(255, 255, 255, 0.13);  margin-bottom: 5px;}
.goods-item-price {  text-align: center;}
.goods-item-price::before {content: 'Price: ';}
.goods-item-price::after {content: '$';}
.goods-item-art::before {content: 'Art: ';}
.goods-item-buy {
cursor: pointer;
float: right;
padding: 8px;
border-radius: 10px;
display: block;
position: relative;
top: 0px;
background-color: rgba(255, 255, 255, .9);
box-shadow: -1px 0px 4px rgb(255, 255, 255), -2px 0px 4px rgb(13, 42, 111);
font-family: "f4";

}

.goods-item-buy:hover {background-color: rgb(231, 245, 255); box-shadow:-2px 0px 4px rgb(132, 168, 255);}



.footer {
padding-top: 10px;
padding-bottom: 10px;
/* background-color: rgba(130, 191, 228, 0.56); */
bottom: 0px;
position: relative;
/* border-radius: 20px; */
display: block;
width: 1200px;
margin: 0 auto;
color: white;
}
.footer a {
  color: rgb(142, 173, 230) !important;
}
.footer .pg {color: rgb(220, 248, 255); }

textarea, input, button {
border-radius: 10px;
padding: 4px;
background-color: rgba(255, 255, 255, 0.43);
border: 1px solid rgba(0, 39, 72, 0.47);
overflow: hidden;
color: rgb(0, 37, 109);
outline: none;
max-width: 100%;
}
textarea:focus, input:focus, button:focus{box-shadow: 0px 0px 10px rgba(0, 83, 115, 0.56);}

form {
background-color: rgba(255, 255, 255, 0.3);
margin: 10px auto;
padding: 10px;
border-radius: 15px;
border: 1px dotted rgba(255, 255, 255, 0.36);
box-shadow: -5px 5px 5px rgba(0, 48, 89, 0.2);
position: relative;
left: 12px;
font-family: "f4";
color: rgb(0, 37, 109);
width: 800px;
display: block;
}

#u-form {
display: flex;
flex-wrap: wrap;
}

.block, .block2 {
display: block;
margin: 0 auto;
flex: 1 0 auto;
}

form hr {  background-color: rgba(255, 255, 255, 0.13);  border: unset;  height: 1px;}

#final-price {  float: right;}

#submit, .g-recaptcha, #clear-summary {
cursor: pointer;
padding: 8px;
border-radius: 10px;
display: block;
position: relative;
top: 0px;
background-color: rgba(255, 255, 255, .9);
box-shadow: -1px 0px 4px rgb(255, 255, 255), -2px 0px 4px rgb(13, 42, 111);
font-family: "f4";

}
#submit:hover, .g-recaptcha:hover, #clear-summary:hover {background-color: rgb(231, 245, 255); box-shadow:-2px 0px 4px rgb(132, 168, 255);}
#clear-summary {  float: left;}
.g-recaptcha {  float: right;}
#space{padding: 8px;}

.inline {  display: flow-root; height: fit-content;}
.inline > * {  float: right;  margin: 0; }

.send-message
{
font-family: "f4";
padding: 10px;
font-size: 30px;
color: #fff!important;
display: block;
width: fit-content;
margin: 0 auto;
border-radius: 20px;
text-shadow: -2px 0px 3px rgba(0, 37, 106, 0.52);
position: relative;
}

#fullscreen-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
z-index: 1000;
animation: fullscreen-container 0.5s ease-in-out forwards; 
}

#fullscreen-container img {
max-width: 90%;
max-height: 90%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);border-radius: 10px;
}

#fullscreen-container .close-btn {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
color: white;
cursor: pointer;
background: none;
border: none;
}

#container-ads, .f-ads {  display: block;  position: relative; max-width: 1200px;}
.f-ads span {  color: rgb(255, 255, 255) !important;}
/*-------------------------------------------------------------------------------------------------mobile*/
@media screen and (orientation: portrait) 
{
body{
height: 100%; 
width: 100vw;
min-width: 100vw;
max-width: 100vw;
display: block;
}
.f-ads {  display: block;  width: 1200px;  margin: 0 auto;}

.body{height: fit-content; border: 8px dotted rgba(255, 255, 255, 0.11); backdrop-filter: unset!important;width: stretch !important;}
.background-overlay {background-size: 8px;  image-rendering: pixelated;}

.background-body {background-size: 40%, 60%;opacity: 10%;}
.header {font-size: 80px; border-top: 8px dotted rgba(255, 255, 255, 0.44);  border-bottom: 8px dotted rgba(255, 255, 255, 0.44);}
.description {  font-size: 50px;}

#goods-list {  width: 90%;  font-size: 40px;}
.goods-item {background-color: rgba(255, 255, 255, 0.6);}
.goods-item-buy {width: 210px; text-align: center;}
.footer .pg {font-size: 40px;}

.inline {  display: flex;}
form{width: 90%; font-size: 40px; background-color: rgba(255, 255, 255, 0.6);}
textarea, input, button {font-size: 40px; width: 100%; }
p {  margin: 0 auto;}
.send-message{font-size: 60px;border-radius: 40px;padding: 20px;}

#fullscreen-container .close-btn {
position: absolute;
top: 0px;
right: 20px;
font-size: 150px;
color: rgb(255, 255, 255);
cursor: pointer;
background: none;
border: none;
width: 150px;
height: 150px;
z-index: 1000;
text-align: center;
line-height: 150px;
}
#fullscreen-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
justify-content: normal;
align-items: anchor-center;
z-index: 1000;
}

#fullscreen-container img {
max-width: 100%;
max-height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
width: 100%;
top: 0px;
margin: 0 auto;
padding-top: 0px;
position: relative;
display: block;
object-fit: contain;
height: fit-content;
border-radius: 0px;
}
}