@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    font-family: 'Playfair Display', serif;
    display: grid;
    background-color: whitesmoke;
    background-image: black 100%;
    align-content: center;
}
section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
    width: 75vw;
    margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 12px
}
.image{
    background-color: #16161c;
    display: flex;
    border-radius: 12px 0 0 12px;
}
.image img{
  height:60vh;
  margin:50px auto
}
.content{
    background-color: #343434;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border-radius: 0  12px 12px 0;
    color: #fff;
}
.content h2{
    text-transform: uppercase;
    font-size: 36px;
    letter-spacing: 6px;
    opacity: 0.9;
}

.content span{
    height: 0.5px;
    width: 80px;
    background: #777;
    margin: 30px 0;
}
.content p{
    padding-bottom: 15px;
    font-weight: 300;
    opacity: 0.9;
    width: 60%;
    text-align: center;
    margin: 015 auto;
    line-height: 1.7;
    color:#ffffff
}
.links{
    margin: 15px 0;
}

.vertical-line{
    height: 30px;
    width: 3px;
    background: #C850C0;
    margin: 0 auto;
}
.icons{
    display: flex;
    padding: 15px 0;
}
.icons li{
    display: block;
    padding: 5px;
    margin: 5px;
}
.icons li i{
    font-size: 26px;
    opacity: 0.8;
}
.icons li i:hover{
    color: #C850C0;
    cursor: pointer;
}

.nav-pills .nav-link.active {
  background-color: #7289da;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown-menu > li > a:hover {
  background-color: #ffbb29;
}

.navbar-nav > li > .dropdown-menu {
  background-color: #252526;
}

.navbar-nav > li > .dropdown-menu a{   color: whitesmoke;  }

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/*****************/
.credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }

  .credit a{
    text-decoration: none;
    color:#000;
    font-weight: bold;
  }

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  section {
      grid-template-columns: 1fr;
      width: 90vw;
  }

  .image {
      border-radius: 12px 12px 0 0;
      margin: 0;
      margin-bottom: -50px;

  }

  .image img {
      height: auto;
      width: 100%;
  }

  .content {
      border-radius: 0 0 12px 12px;
    }

  .content h2 {
      font-size: 24px;
      letter-spacing: 3px;
  }

  .content p {
      width: 80%;
  }
}