* {
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
}
html{
	height:100%;
}
main{
	flex:1;
}
 body {
     height:100%;
	 display: flex;
     flex-direction: column;
     font-family: "Arial", sans-serif;
     background-color: #f9f9f9;
     line-height: 1.6;
     direction: rtl;
}
 header {
     background-color: #ffcc99;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     position: relative;
}
 .logo {
     position: absolute;
     right: 20px;
     height: 70px;
     width: auto;
}
 .title-box {
     text-align: center;
}
 .title-box h1 {
     font-size: 2em;
     color: #cc5200;
}
 .title-box p {
     font-size: 1em;
     color: #333;
}
 nav {
     background-color: #ffb366;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     padding: 10px;
}
 nav a {
     color: white;
     text-decoration: none;
     font-weight: bold;
}
 nav a:hover {
     text-decoration: underline;
}
 footer {
     background-color: #ffb366;
     color: white;
     text-align: center;
     padding: 60px;
     font-size: 1em;
     position:relative;
}
 footer p {
     max-width: 90%;
     margin: auto;
     line-height: 1.6;
}

 @media screen and (max-width: 600px) {
     header {
         flex-direction: column;
         align-items: center;
    }
     .logo {
         position: static;
         margin-bottom: 10px;
         width: 40%;
         height: auto;
    }
    .title-box {
         text-align: center;
    }
     .title-box h1 {
         font-size: 150%;
    }
    nav {
         flex-direction: column;
         gap: 10px;
         text-align: center;
    }
     footer {
         padding: 40px 10px;
    }
}
 @media screen and (max-width: 400px) {
     footer {
         font-size:100%;
    }
}
 @media screen and (max-width: 200px) {
     footer {
         font-size:70%;
    }
}
 @media screen and (max-width: 150px) {
     footer {
         font-size:50%;
    }
}
.stories-gallery{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:20px;
 margin:30px 0;
}
.story-card{
 width:250px;
 padding:15px;
 border:1px solid #ddd;
 border-radius:15px;
 background:#fff;
 text-align:center;
}
.story-card img{
 width:100%;
 height:160px;
 object-fit:cover;
 border-radius:10px;
}
.add-story{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:10px;
 margin-bottom:60px;
}
.add-story input,.add-story textarea{
 width:80%;
 max-width:400px;
 padding:10px;
 border-radius:10px;
 border:1px solid #ccc;
}
.add-story button{
 background:#e65c00;
 color:#fff;
 border:none;
 padding:8px 20px;
 border-radius:10px;
 cursor:pointer;
}
.preview{
 width:140px;
 height:140px;
 object-fit:cover;
 border-radius:10px;
 margin:10px 0;
}
#msg{color:#e65c00;font-weight:bold}
.stories-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:0;
}
@media screen and (max-width:900px){
  .stories-gallery{
    grid-template-columns:repeat(2,1fr);
  }
}
@media screen and (max-width:600px){
  .stories-gallery{
    grid-template-columns:1fr;
  }
}
.story-card{
  width:100%;
  margin:0;
  height:420px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.story-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}
.story-card p{
  flex-grow:1;
}
.add-story{
  width:90%;
  max-width:520px;
  margin:40px auto 60px;
  background:#fff0e6;
  border:1px solid #ffb366;
  border-radius:15px;
  padding:25px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.add-story input,
.add-story textarea,
.add-story button{
  width:100%;
  margin-bottom:12px;
}
.add-story input,
.add-story textarea{
  padding:10px;
  border:1px solid #ccc;
  border-radius:10px;
  font-size:1em;
}
.add-story input[type=file]{
  padding:6px;
  background:#fff;
}
.add-story button{
  background:#e65c00;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px;
  cursor:pointer;
}
.add-story button:hover{
  background:#cc5200;
}
#msg{
  display:block;
  text-align:center;
  margin-top:8px;
  color:#00a859;
  font-weight:bold;
}
.story-card p{
  word-wrap:break-word;
  overflow:hidden;
}

@media screen and (max-width:600px){
  .story-card{
    height:auto;
  }
}
@media screen and (max-width: 100px){
	.story-card{
		padding:0px;
	}
	.add-story input,.add-story textarea{
		width:200%;
		padding:0px;
		font-size:10%;
	}
	.add-story button{
		width:100%;
		font-size:20%;
	}
}