* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      outline: none;
      border: none;
      text-decoration: none;

}

body {
      font-family: cambria;
}

.navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.4rem 7%;
      background-color: rgb(164, 56, 56);
      border-bottom: 1px solid rgb(164, 56, 56);
      box-shadow: 0px 5px 3px rgb(194, 192, 192);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
}

.navbar .navbar-logo img {
      width: 4em;
}

.navbar .navbar-logo img:hover {
      color: rgb(226, 208, 43);
      cursor: pointer;
}

.navbar .navbar-nav a {
      color: white;
      font-size: 1.4rem;
      display: inline-block;
      margin: 0 1.5rem;
      
}

.navbar .navbar-nav a:hover {
      color: rgb(226, 208, 43);
}

.navbar .navbar-nav a::after {
      content:'';
      display: block;
      padding-bottom: 0.3rem;
      border-bottom: 0.2rem solid rgb(212, 209, 209);
      transform: scaleX(0);
      transition: 0.2s;
}

.navbar .navbar-nav a:hover::after {
      transform: scaleX(0.5);
}

#hamburger-menu {
      color: white;
      display: none;
}

#hamburger-menu:hover {
      cursor: pointer;
      color:  rgb(226, 208, 43);
}


#pesan {
      color: white;
}

#pesan:hover {
      cursor: pointer;
      color:  rgb(226, 208, 43);
}

#toggle {
      display: none;
}


.halaman-utama {
     margin: 0;
     padding: o;
}

.buku-baru {
      background-color: rgb(243, 229, 213);
      width: 60%;
      height: auto;
      right: 10rem;
      top: 20rem;
      float: right;
      margin-right: 7rem;
      margin-top: 7rem;
      display: flex;
      border-radius: 0.5em;
}

.gambar img {
      width: 25em;
      padding-right: 3rem;
      border-radius: 1em;
      margin-top: 2rem;
      margin-left: 2rem;
}

.kolom {
      padding: 2rem 2rem;
}

.kolom h3 {
      font-size: 1.8rem;

}


.deskripsi  {
      font-size: 1.5rem;

}

.deskripsi a {
      background-color: rgb(164, 56, 56);
      padding: 0.5em 1em;
      color: white;
}

.deskripsi a:hover {
      background-color: gray;
      color: rgb(234, 223, 22);
}


p {
      font-size: 1.4rem;
      line-height: 2.5rem;
}

.tombol-merah {
      background-color: rgb(164, 56, 56);
      padding: 0.5em 1em;
      color: white;
      border-radius: 1em;
}

.tombol-merah:hover {
      background-color: rgb(188, 116, 21);
      color: white;
}

.penerbitan {
      width: 60%;
      height: auto;
      right: 10rem;
      top: 20rem;
      float: right;
      margin-right: 7rem;
      
}

.container {
      margin: 1rem 2rem;
      padding: 2rem;
}

.penerbitan h3 {
      font-size: 1.8rem;
      text-align: center;
}

.percetakan {
      width: 60%;
      height: auto;
      right: 10rem;
      top: 20rem;
      float: right;
      margin-right: 7rem;
      
}

.kotak {
      margin: 1rem 2rem;
      padding: 2rem;
}

.percetakan h3 {
      font-size: 1.8rem;
      text-align: center;
}

.aside {
      width: 27%;
      height: auto;
      margin-left: 7rem;
      padding-top: 9rem;
}

.sidebar1 h4 {
      font-size: 1.4rem;
      padding-left: 2rem;
}

.artikel-baru ul {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 1rem;
}

.artikel-baru ul li  {
      list-style-type: none;
      font-size: 1.4rem;
}

.artikel-baru ul li a {
      color: black;
}

.artikel-baru ul li a:hover {
      color: rgb(188, 116, 21) ;
}

.youtube {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 2rem;
}

.youtube iframe {
      width: 26em;
      height: 20em;
}

.youtube h4 {
      font-size: 1.4rem;
}

.twitter {
      padding-left: 2rem;
      padding-right: 2rem;
      padding-top: 2rem;

}

.twitter .twitter-timeline a {
      width: 26em;
      height: 20em;
}

.twitter h4 {
      font-size: 1.4rem;
}

.iklan {
      padding: 2em 2em;
      width: 25em;
      height: 20em;
      background-color: rgb(238, 234, 234);
      margin-top: 2rem;
      margin-left: 2rem;
      margin-bottom: 2rem;
}

.iklan h4 {
      font-size: 1.4rem;
      text-align: center;
}


.clear {
      clear: both;
}

.galeri {
      margin-top: 2rem;
}

.galeri p {
      text-align: center;
      padding-top: 1rem;
}

.galeri h3 {
      font-size: 1.8rem;
      text-align: center;
      color: rgb(164, 56, 56);
}

.galeri h3:hover {
      color: rgb(188, 116, 21);
}

.fotocover {
      display: flex ;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 7%;
}

.fotocover img {
      width: 17rem;
      height: auto;
      border-radius: 0.5rem;
}

.fotocover img:hover {
      scale: 1.3rem;
}


.fotocover p {
      font-size: 1.2rem;
      line-height: 1.5rem;
}

#contact {
      background-color: rgb(164, 56, 56);
      margin: 0;
      padding: 0;
      width: 100%;
      height: auto;
}

.kolom-footer {
      display: flex ;
      align-items: center;
      justify-content: space-between;
      padding: 2rem 7%;
}

.tandabaca p {
      color: white;
}

.tentang-tandabaca h4 {
      color: white;
      font-size: 1.4rem;
}

.tentang-tandabaca ul {
      list-style-type: none;
}

.tentang-tandabaca ul li a {
      font-size: 1.3rem;
      color: white;
}

.tentang-tandabaca ul li a:hover {
      color:  rgb(234, 220, 114);
}

.kontak h4 {
      color: white;
      font-size: 1.4rem;
      padding-top: 2.3rem;
}

.kontak p {
      color: white;
}

.copyright {
      background-color: white;
      font-size: 0.5rem;
      text-align: center;
}





@media screen and (max-width:1920px) {
      html {
            font-size: 100%;
      }
}

@media screen and (max-width:1366px) {
      html {
            font-size: 75%;
      }
}

@media screen and (max-width:768px) {
      html {
            font-size: 62.5%;
      }

      #hamburger-menu {
            display: inline-block;
      }

      #pesan {
            display: none;
      }

      .navbar .navbar-nav  {
            position: absolute;
            top: 100%;
            right: -100%;
            background-color: rgb(164, 56, 56);
            width: 20rem;
            height: 100vh;
            display: block;
            transition: 0.3s;
            
      }

      .navbar .navbar-nav.active {
            right: 0;

      }

      .navbar .navbar-nav a {
            display: block;
            margin: 1.1rem;
            padding: 0.5rem;
            font-size: 1.5rem;
            border-bottom: 0.1rem solid grey;
            
      }

      .navbar .navbar-nav a::after {
            display: none;
      }

      .navbar .navbar-nav a:hover {
            background-color: gray;
           
      }

      .buku-baru {
            display: block;
            width: 62.5%;
      }

      .penerbitan .container {
            margin-left: -2rem;
      }

      .percetakan .kotak {
            margin-left: -2rem;
      }

      .fotocover {
            width: 50%;
            display: grid;
            grid-template-columns: 20rem 50%;
            justify-content: center;
            align-items: center;
            margin-left: 15em;
      }

      .fotocover p {
            text-align: center;
      }



      .aside {
            display: none;
            overflow: hidden;
            width: 62.5%;
      }

      .kolom-footer {
            display: block;
            text-align: center;
      }

      .tentang-tandabaca {
            padding-top: 1.5rem;
      }

     

}


@media screen and (max-width:460px) {
      html {
            font-size: 55%;
      }


      .fotocover {
            
            display: block;
            justify-content: center;
            align-items: center;
            margin-left: 10em;
      }


      
}