/* SMOOTH SCROLL TRANSITION */
html {
  scroll-behavior: smooth;
  cursor: url("dsgn266-images/funky-8.png"), auto !important;
}

/* gradient background */
body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  background-attachment: fixed;
  transition: background 1s ease;
  color: #ffffff;
  font-family: "Montserrat",sans-serif;
}

p {
  color: #ffffff;
  font-family: "Montserrat",sans-serif;
  font-size: 25px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*top bar*/
.top-bar {
  display: block;
  font-size: 20px;
  position: fixed;
  padding-top: 20px;
  z-index: 100;
;}

.table {
    display: table;
    width: 100vw;
}
.tr {
    display:table-row;
}
.d1 {
    display:table-cell;
    width:25%;
    padding-left: 30px;
}
.d2 {
    display:table-cell;
    text-align:center;
    width:50%;
}
.d3 {
    display:table-cell;
    text-align:right;
    width:25%;
    padding-right: 30px;
}

/*bottom bar*/
.bottom-bar {
  width: 100vw;
  text-align: center;
  font-size: 20px;
  position: fixed;
  bottom: 20px;
  z-index: 100;
}

/*landing*/
.landing {
  margin: auto;
  display: block;
  justify-content: center;
}

/* hover blur */
h1 {
  text-align: center;
  color: #ffffff;
  font-size: 60px;
  letter-spacing: 10px;
  filter: blur(0px);
  transition: 1s all;
}

h1:hover{
    filter: blur(12px);
}

.premise {
  padding: 0px 100px;
  text-align: center;
}

h5 {
  font-family: "Montserrat",sans-serif;
  color: #ffffff;
  font-size: 50px;
    filter: blur(0px);
  transition: 1s all;
}

h5:hover{
    filter: blur(12px);
}

.artists {
  padding: 0px 120px;
  text-align: center;
}

.artists p {
  font-size: 20px;
}

/*gallery hover*/
.caption {
  text-align: center;
  display: none;
  color: #ffffff;
  position: fixed;
}

.caption h3 {
  font-family: "Montserrat",sans-serif;
  font-size: 100px;
  line-height: 110px;
  color: #ffffff;
}

.caption h4 {
  font-family: "Montserrat",sans-serif;
  font-size: 50px;
  line-height: 50px;
  color: #ffffff;
}

a:hover + .caption {
  display: block;
  transition: 1s all;
}

a:hover {
  cursor: url("dsgn266-images/funky-8.png"), auto !important; 
}

img {
  filter: blur(0px);
  transition: 1s all;
}

img:hover {
  filter: blur(100px);
}

/*floating animation*/
.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% { transform: translate(0, 0px); }
  50% { transform: translate(0, 15px); }
  100% { transform: translate(0, -0px); }
}

/*fade in animation*/
.fade-in {
  animation-name: fade;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

@keyframes fade {
  0% { opacity: 0%; }
  100% { opacity: 100%; }
}

/*snap scroll*/
.scroll-container,
.scroll-area {
  /*max-width: 100vw;*/
  height: 100vh;
  font-size: 60px;
}

.scroll-container {
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}