@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto:300&display=swap');

body {
  background-color: black;
  animation: fadein 0.7s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}


.hide {
  opacity: 0 !important;
}

/* scrollbar */

/* width */
::-webkit-scrollbar {
  width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(100, 100, 100);
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(200, 200, 200);
}

/* Standard syntax */
@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 100;
  }
}

/* general, index and about page */
.parallax-window {
  width: 100%;
  background: transparent;
  min-height: -100%;
  text-align: center;
  display: inline-block;
  border: solid black 1px;
  margin: 2% auto;
}

.parallax-window:hover {
  border: solid white 1px;
  transition-duration: 0.5s;
}

.main {
  color: white;
  font-family: "Roboto", sans-serif;
  text-align: center;
}

.texts {
  margin: 2%;
  padding: 5%;
  background-color: rgba(0, 0, 0, 0.70);
}

.texts:hover {
  background-color: rgba(0, 0, 0, 0.90);
  transition-duration: 0.5s;
}

.texts img {
  margin: 0 auto;
}

h1 {
  font-family: "Open Sans", sans-serif;
  font-size: 500%;
}

a {
  text-decoration: underline;
  color: white;
}

/* for art page */

.imagerow {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.imagecolumn {
  flex: 20%;
  max-width: 25%;
  padding: 0 4px;
}

.imagecolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  border: 1px solid black;
}

.imagecolumn img:hover {
  border: 1px solid white;
  transition-duration: 0.5s;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .imagecolumn {
    flex: 45%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .imagecolumn {
    flex: 100%;
    max-width: 100%;
  }
}