@font-face {
  font-family: "Cobaissi Font";
  src: url("../fonts/COBAISSI.ttf") format('truetype');
}

@font-face {
  font-family: Steppe;
  src: url("../fonts/Steppe.ttf") format('truetype');
}


* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: 10px 10px 8px -8px rgba(80, 80, 80, 0.4) inset;
  background-color: #f9f9f9;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(180deg, #999, #ccc);
}

html, body {
  height: 100%;
}

.wrapper {
  height: 100%;
  margin: 0 auto;
}

.page {
  min-height: 100%;
  padding-bottom: 100px;
  box-sizing: border-box;
}

.footer {
  height: 70px;
  margin-top: -70px;
  box-sizing: border-box;
}

.header {
  height: 80px;
  width: 100%;
}

.logo {
  text-align: center;
  font-family: Steppe;
  position: relative;
  top: 10px;
}

.logo a {text-decoration: none;  color: black;}

.menu {
  font-family: Steppe;
  position: relative;
  text-align: center;
  top: 13px;
}

.menu_bar {list-style: none;}

.navigation {
  padding: 6px 80px;
  display: inline;
}

.navigation a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s;
  cursor: pointer;
  color: #555;
}

.navigation a:hover {
  background-size: 100% 2px;
}

.row_image {
  margin: 0 auto;
  width: 80%;
  height: auto;
  overflow: hidden;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.row_image img {
  width: 100%;
}

.row_image div, a {
  padding: 3px;
  page-break-inside: avoid;
}

.btn {
  padding: 5px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 0.6em;
  cursor: pointer;
  border-color: #777;
  
  box-shadow: 0 0 40px 40px #777 inset, 0 0 0 0 #777;
  transition: all 300ms ease-in-out;
}
.btn:hover {
  box-shadow: 0 0 10px 7px #777 inset, 0 0 10px 4px #777;
  color: #444;
}

.footer a{color: rgba(0, 0, 0, 0.75);  text-decoration: none;  font-family: "Cobaissi Font";}

.image {transition: all 300ms;}
.image:hover {opacity: 0.7;}

@media (max-width: 500px) {
  .navigation {padding: 6px 7%;}
  .row_image {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
}

@media (max-width: 250px) {
  .header {height: 120px;}
  .navigation {padding: 6px 1%;}
}