body {
      background-image: url(images/sitearkaplan.jpg);
      background-size: contain;
  }
/*anasayfa*/
  .hizlilink a {
      color: white;
      font-size: 50px;
      margin: 20px;
  }
 #myphoto{
        width:15%;
      }
  .resptable {
      width: 20%;
  }

  .logoimg {
      width: 20%;
      background: rgba(255, 255, 255, 0.8); 
      box-shadow: 1px 10px 15px 25px black;
  }

  .navbar {
      box-shadow: 10px 10px 10px 10px black;
    
  }
  #navpos{
    position: sticky;
    top:0px;
    z-index: 1;
  }
  /*adamasmaca harfler*/
  .harflist button{
    visibility: hidden;
  }
  .harflistact button{
    width: 2.8rem;
    text-align: center;
    border:1px solid black;
    margin: 0.1rem;
    border-radius: 50px;
  }
  #harflabel{
    letter-spacing: 10px;
  }
  .clickfocus{
    background-color: gray;
     opacity: 0.6;
  cursor: not-allowed;
  }
/* İst.marş kimlik kart*/
  .menulink {
      background-color: aliceblue;
      border: 1px solid black;
      border-radius: 10px;
      text-align: center;
      padding: 10px;
  }

  .istkll-bgimage {
      background-image: url(bayrak.jpg);
      background-size: contain;
      background-position: center;
      width: 75%;
  }

  a {
      text-decoration: none;
      color: rgb(161, 4, 4);
      font-size: 18px;

    }
    /*Giriş style*/
       .box {
      background: gray;
      border: 2px solid black;
      text-align: center;
      font-size: 1.5rem;
      padding: 1rem;
      border-radius: 20px;
      width: 30%;
      display: flex;
      transform: translate(115%, 20%);
      box-shadow: 5px 5px 5px black;
    }
  @media screen and (max-width:1000px) {
      .respimg {
          width: 10%;
      }
      #myphoto{
        width:20%;
      }

      .resptable {
          width: 25%;
      }

      .fontscreen {
          font-size: 15px;
      }
       .box {
        width: 40%;
        transform: translate(75%, 20%);
      }
  }

  @media screen and (max-width:700px) {
      .respimg {
          width: 15%;
      }

      .resptable {
          width: 100%;
      }

      .logoimg {
          width: 50%;
      }

      .logo-box {
          position: sticky;
          top: -78px;

      }

      .fontscreen {
          font-size: 10px;
      }
        #myphoto{
        width:40%;
      }
        .box {
        width: 75%;
        transform: translate(15%, 10%);
      }
      .ders-table{
        width: 100%;
        font-size: 9px;
      }
.istkll-bgimage{
    width: 80%;
}

  }

  @media screen and (max-width:360px) {
      .respimg {
          width: 20%;
      }

      .logo-box {
          position: sticky;
          top: -70px;
      }

      .fontscreen {
          font-size: 5px;
      }
        #myphoto{
        width:50%;
      }

  }