/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



 body {
  margin: 0;
    padding: 0;
                background-image: url(sky.jpg);
position: relative;
min-height: 100vh;
    background-attachment: scroll;
    
    background-position:  center top;
    background-size: cover; 
    

    background-repeat:  no-repeat;
    
 
    background-color: #000000;
            }
            h1{
              color: #978fc8;
              font-family: pristina;
               position: absolute;  
         
                z-index:5;
                margin-top:295px;
                font-weight: normal;
                font-size: 4em;
                text-shadow: 5px 7px 9px rgba(0,0,0,0.85);
              }
            
            
  baslik{
      display: flex;
      z-index:1;
      width: 100%;
      justify-content: center;
      top: 0;
      left: 0;
      position: relative;

  }

            #sarkan {
              position: relative;
  display: block;
  margin: auto;
                padding: 0px;
                z-index: 5;
                width:auto;
                  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
                
            }
    #yaprak {
      position: absolute;    
      z-index:6;
      width: 100%;
      justify-content: center;
      top: 0;
      left: 0;  
      filter: drop-shadow(225 0 0.15rem rgba(0,0,0,0.3));
    }
    
    #nav-flex{
      display:flex;
      flex-direction:row;
      justify-content: center;
      
      }
      .box{
        display:flex;
        background-color: #202914;
      background-image: url("linen.png");
      background-blend-mode: multiply;
      position: relative;
      z-index:2;
box-shadow: 0px -5px 11px -1px #FDF3D1, rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    margin-left: 20px;
    margin-right:20px;
    margin-top:0px;
        } 
        .chain{
          display:flex;
          justify-content: center;
          align-items: center;
           background-image: none;
           border: 20px solid transparent;
           border-image: url("chain.png") 95;
          margin-right: 500px;
          margin-left: 500px;
          height:30px;
          
           border-image-repeat: repeat; 
          }
    
    #nav-flex ul{
      list-style:none;
      line-height: 1.2;
      font-size: 2em;
      color: #978fc8;
      display: flex;          /* Activates Flexbox layout */
  flex-direction: row;    /* Aligns items side-by-side (default) */
  gap: 15px;  
      padding-inline-start:20px;
      padding-inline-end:20px;
      margin-block-start: 10px;
    margin-block-end:10px;
      
      }
    #nav-flex ul li>a{
      padding:10px;
      }
    
    
    .flex-box{
                justify-content: space-between;
                display: flex;
                min-height: 100vh;
                z-index:1;
                position:relative;
            }
            .green-box {
                flex-grow: 1;
                margin: 0 auto;
                min-height: 100vh;
                background-color: rgba(0, 0, 0, 1);
                background-image: url('https://static.tumblr.com/j0s4ipc/dmVtfopqy/kutu.png');
                background-repeat: repeat;
                background-size: auto 40vh;
                visibility: 0;
                opacity: 0;
                padding: 20px;
                z-index: 5;
                
            }

        .wikplayer-assets {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            left: -9999px;
            top: -9999px;
            opacity: 0;
            pointer-events: none;
        }
          .yildiz {
            position: absolute;
            top: 0px;
            left:0px;
            bottom: 0;
            width: 100%;
            min-height: 100vh;
            z-index : 1;
            background-image: url(yildizlar.png);
            background-size: 100%;
            background-repeat: repeat;
            animation: glow 1s ease-in-out infinite alternate;
          }


@keyframes glow {
  from {
    filter: drop-shadow(0 0 0.1rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.15rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.2rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.3rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.4rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.45rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.5rem rgba(252, 242, 202,0.2));
  }
  to {
    filter: drop-shadow(0 0 0.2rem rgba(252, 242, 202,0.3)) 
            drop-shadow(0 0 0.3rem rgba(252, 242, 202,0.3)) 
            drop-shadow(0 0 0.4rem rgba(252, 242, 202,0.3)) 
            drop-shadow(0 0 0.5rem rgba(252, 242, 202,0.3)) 
            drop-shadow(0 0 0.6rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.7rem rgba(252, 242, 202,0.2)) 
            drop-shadow(0 0 0.8rem rgba(252, 242, 202,0.2));
  }
}