/* general */
h1 {
  margin-top: 10px;
  font-family: 'Satisfy', cursive;
  color:hsl(350, 100%, 61%);
}

a {
  color:hsl(0, 100%, 68%);
  text-decoration: none;
}

a:hover {
  color: #ec96a4;
}

p {
  font-weight: 600;
}

.darkcol {
  background-color: hsl(4, 23%, 20%);
  font-weight: 600;
 
}
.whitecol {
  background-color: hsl(4, 23%, 90%);
  font-weight: 600;
}

i {
  padding-right: 5px;
  font-size: 20px;
}

.anchor {
  scroll-margin-top: 80px;
}

/*  navbar */
.navbar {
  background-color:hsl(4, 23%, 20%);
  border-color: hsl(350, 100%, 68%) !important;
  box-shadow: 0 8px 6px -6px;
}

.navbar-brand {
  font-family: 'Satisfy', cursive;
  color: hsl(350, 100%, 68%) !important;
  font-size: 2rem;
  margin-left: 20px;
}
.nav-link:hover {
  color: #ec96a4 !important;
  text-decoration: none;
}
.nav-link {
  color: white !important;
}


/* front page */
.page-holder {
  background-size: cover !important;
    background-image: url('pictures/background.jpg');
    background-attachment:fixed ;
    background-position: center;
     background-repeat: no-repeat;
  }
    
  #main {background:rgba(236, 150, 164, 0.4); }


  /*  Features section */
.secondrow li{padding-left: 10px;}


/*  screenshots */
.card-text {
  text-align: center;
  color: aliceblue;
 }

.card {
  background-color:rgba(236, 150, 164, 0.6);
  padding: 0px;
  }

.carousel-icon {
  color: hsl(350, 100%, 68%);
  font-size: 3em;
}

#screenshots {padding-top: 100px;}

#screenshots .title {
  background-color: rgba(236, 150, 164, 0.6);
  color:white;
  padding:10px;
}

.modal-content {
  text-align: center;
  background-color:rgba(236, 150, 164, 0.6);
  color: white;
}

.modal-header, .modal-footer {border-style: none;}



/*  download section */
.accordionLogo{margin-right: 10px;}

.accordion-button {font-weight: 600 !important;}



/*  footer */
.footer {
  background-color:hsl(4, 23%, 20%);
  border-color: hsl(350, 100%, 68%) !important;
  padding: 20px; 
  font-weight: 600; 
}
.ending {
  font-size: 0.8em;
}

/* responsiveness */
@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
    }
    .navbar-brand{

    font-size: calc(1.1rem + 0.9vw);
  }
  h2,
  .h2 {
    font-size: calc(1.0rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}