@font-face {
  font-family: Pretendard;
  src: url(../fonts/PretendardVariable.ttf);
}

@font-face {
  font-family: "HallymGothic-Regular";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2204@1.0/HallymGothic-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

html {
  font-family: "HallymGothic-Regular";
}

body {
  font-family: "HallymGothic-Regular";
  color: white;
}

h2 {
  margin-bottom: 50px;
}

h2,h3,h4,h5 {
  color: black;
}

.artist-collapse {
  margin-top: 30px;
  font-family: "HallymGothic-Regular";
  color: black;
}

.artist-collapse-nomargin {
  margin-top: 0px;
  font-family: "HallymGothic-Regular";
  color: black;
}

footer {
  background-color: black;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.btn {
  color:  black;
  font-size: 80px;
}

.btn:focus {
  outline: none;
  box-shadow: none;
}

.btn:hover {
  -webkit-text-stroke: 2px black;
  color:  white;
}

.about {
  margin: 50px 0;
  font-family: "HallymGothic-Regular";
  color: black;
  font-size: 20px;
}

.about-text {
  display: flex;
  align-items: center;
}

.bg-img {
  width: 100%;
  height: 1080px;
  object-fit: cover;
  object-position: 0 60%;
}

.map-img {
  width: 100%;
  height: 1080px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

.carousel-inner .carousel-item .about-img {
  width: 100%;
  height: 800px;
  object-fit: contain;
}

.carousel-inner .carousel-item .exhibition-img {
  width: 100%;
  height: 1080px;
  object-fit: contain;
}

.carousel-inner .carousel-item .soundhold-img {
  width: 100%;
  height: 1080px;
  object-fit: contain;
}

.carousel-inner .carousel-item .landscape-img {
    width: 100%;
    height: 800px;
    object-fit:contain;
}

.carousel-indicators li {
  background-color: black !important;
  /*more custom style*/
}

.carousel-indicators .active {
  background-color: white !important;
}

.carousel-caption {
  background: rgba(0, 0, 0, 0.35);
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
 }
 
 .carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
 }

.bottom-center {
  position: absolute;
  left: 50%;
  bottom: -80px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
}

.content-margin {
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
  min-height: 80vh;
}

.small-content-margin {
  margin-top: 50px;
  margin-bottom: 500px;
}

#map{
  margin: 50px auto;
  width: 800px;
  height:700px;
}

.no-padding {
  padding: 0;
}

.text-margin {
  margin-top: 50px;
}

.vertically-centered {
  margin-top: auto;
  margin-bottom: auto;
}

.navbar-brand-padding {
  padding-bottom: 14px;
}

.navbar-custom-bg {
  background-color: black;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255,1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 255, 255);
}
.navbar-nav li a {
  color: white;
}

.insta {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg)
    brightness(102%) contrast(102%);
}

#logo:hover {
  filter: drop-shadow(0px 0px 10px white);
}

.navbar-nav li a:hover {
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffffff,
      0 0 40px #ffffff, 0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px #ffffff;
  }

  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ffffff, 0 0 40px #ffffff,
      0 0 50px #ffffff, 0 0 60px #ffffff, 0 0 70px #ffffff, 0 0 80px #ffffff;
  }
}

.row-white-bg {
  background-color: white;
}

.dark-bg {
  background-color: black;
}

@media screen and (max-width: 768px) {
  .vertically-centered {
    padding-top: 50px;
  }
  .bg-img {
    width: 100%;
    height: 680px;
    object-fit: cover;
    object-position: 50% 0%;
  }
  .map-img {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: 55% 0%;
  }

  .h2 {
    margin-bottom: 0px;
  }
  
  .artist-title{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .content-margin{
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .content-margin {
  padding: 0px;
  margin-top: 50px;
  }

  .carousel-inner .carousel-item .exhibition-img {
    width: 100%;
    height: 400px;
    object-fit: contain;
  }

  .carousel-inner .carousel-item .soundhold-img {
    width: 100%;
    height: 400px;
    object-fit: contain;
  }

  .carousel-inner .carousel-item .about-img {
    width: 100%;
    height: 680px;
    object-fit: cover;
  }

  #map{
    margin: 20px 0px 0px 0px;
    width: auto;
    height: 650px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .carousel-inner .carousel-item .soundhold-img, .carousel-inner .carousel-item .about-img {
    width: 100%;
    height: 600px;
    object-fit: contain;
  }
  
}

@media screen and (min-width: 1024px) and (max-width: 1920px){
  .carousel-inner .carousel-item .exhibition-img {
    width: 100%;
    height: 600px;
    object-fit: contain;
  }

  .carousel-inner .carousel-item .soundhold-img {
    width: 100%;
    height: 600px;
    object-fit: contain;
  }
}

@media screen and (min-width:575px) and (max-width:1400px){
  #map{
    margin: 20px auto;
    width: 600px;
    height: 500px;
  }
}

@media screen and (max-width: 375px) {
  .about-text {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }
  .about-img {
    width: 260px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}