#cookiePopUp {
  background-color: rgb(119, 119, 119);
}

.textMint {
  color: #BFFDE8;
}

.textPurple {
  color: #D0A5D9;
}

.textGreen {
  color: #89D6BC;
}

.textYellow {
  color: #D6BB74;
}

.textBrown {
  color: #8A7A51;
}

.textWhite {
  color: #ffffff;
}

@font-face {
  font-family: "simplifica";
  src: url("./media/fonts/logofont.ttf");
  }

#navigation {
    border: 0 none;
    margin: 0;
}

.content {
  margin: 2em 10em;
}

.navbar-brand {
    padding: 0;
}

.logo {
    margin: 0;
}

.smico {
  width: 40px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  margin: 1px;
  /* border-radius: 5%; */
}
.dcname {
  font-family: sans-serif;
}

/* Primary colours */
.coltext {
  color: rgb(190, 252, 232) !important;
}

.colbg {
  background-image: linear-gradient(to bottom right, rgb(42, 42, 51), rgb(74, 74, 80));
  /* background-color: rgb(42, 42, 51) !important; */
}

.navbar-dark .navbar-toggler {
  color: rgb(190, 252, 232) !important;
  background-color: rgb(42, 42, 51) !important;
  border-color: rgb(42, 42, 51) !important;
}

.navbar-toggler:focus, .navbar-toggler:hover {
  text-decoration: none;
  border-color: rgb(190, 252, 232) !important;
}

.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
  color: rgb(190, 252, 232) !important;
}

.logofont {
  font-family: 'simplifica', Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 38px;
  }

.customfont {
  font-family: 'simplifica', Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
}

.center {
  margin: 0 auto;
  align-content: center;
}

.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 100% !important;
  max-width: 200px !important; */
}
.picturePadding {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 0px;
}
.textCenter {
  text-align: center;
}
.textPadding {
  padding-left: 10%;
  padding-right: 10%;
}
.centerLeft {
  text-align: left;
}

.left {
  text-align: left;
}

.socialLinks {
  list-style: none;
}

.footer {
  /* position: fixed; */
  left: 0;
  bottom: 1px;
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 8px;
  height: 30px;
  text-align: center;
}

.transparentBG {
  background-color: transparent !important;
}

/* Link Styling */
a {
  color: #D6BB74;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #D6BB74;
  text-decoration: underline;
}

.btn-primary, .btn-primary:active, .btn-primary:visited {
  background-color: transparent;
  border-color: rgb(190, 252, 232) !important;
  color: rgb(190, 252, 232) !important;
  width: 90%;
  max-width: 500px;
  text-align: center;
  margin: 0 auto;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
  background-color: transparent;
  border-color: #89D6BC !important;
  color: #89D6BC !important;
}
.btn-primary.focus, .btn-primary:focus {
  background-color: transparent;
  border-color: #89D6BC !important;
  color: #89D6BC !important;
  box-shadow: 0 0 0 0 #89D6BC !important;
}
.btn-primary:hover {
  background-color: rgb(190, 252, 232);
  border-color: rgb(190, 252, 232) !important;
  color: black !important;
  box-shadow: 0 0 0 1px #89D6BC !important;
}
/* Special Button Styling */
.btn-secondary, .btn-secondary:active, .btn-secondary:visited {
  background-color: black;
  border-color: rgb(255, 255, 0) !important;
  color: rgb(0, 0, 0) !important;
  width: 90%;
  max-width: 500px;
  text-align: center;
  margin: 0 auto;
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
  background-color: transparent;
  border-color: rgb(255, 255, 0) !important;
  color: #89D6BC !important;
}
.btn-secondary.focus, .btn-secondary:focus {
  background-color: transparent;
  border-color: rgb(255, 255, 0) !important;
  /* color: #89D6BC !important; */
  /* box-shadow: 0 0 0 0 #89D6BC !important; */
}
.btn-secondary:hover {
  background-color: rgb(0, 0, 0) !important;
  border-color: #5000ff !important;
  color: black !important;
}
/* Special Button Styling End */


.instructionList {
  width: 500px;
}
.navbar-dark .navbar-toggler {
  color: #D0A5D9 !important;
  /* border-color: #D0A5D9 !important; */
}
.wrapText {
  word-wrap: normal !important;
}
.width{
  width: 100%;
}

@media (max-width: 575px) {
  body {
    background-color: rgb(255, 255, 255);
  }
  .container {
    background-color: rgb(255, 255, 255);
    flex-direction: column;
  }
  .item {
    width: 100%;
  }
  .textbox {
    padding-top: 0%;
  }
  .centerLeft {
    width: 100%;
    text-align: left;
  }
  /* .centerimg {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 50%;
  } */
  .instructionList {
    padding-left: 0%;
    padding-right: 0%;
  }
}
/* Small devices */
@media (min-width: 576px) {
  body {
    background-color: rgb(163, 233, 167);
    color: black;
  }
  .container {
    background-color: rgb(163, 233, 167);
    flex-direction: column;
  }
  .item {
    width: 100%;
  }
  .textbox {
    padding-top: 0%;
  }
  .instructionList {
    padding-left: 10%;
    padding-right: 10%;
  }
}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  body {
    background-color: rgb(163, 233, 167);
  }
  .container {
    background-color: rgb(163, 233, 167);
    flex-direction: row;
  }
  .item {
    width: 100%;
  }
  .instructionList {
    padding-left: 20%;
    padding-right: 20%;
  }
}



/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body {
    background-color: rgb(163, 159, 214);
  }
  .container {
    background-color: rgb(163, 159, 214);
    flex-direction: row;
  }
  .item {
    width: 50%;
  }
  .instructionList {
    padding-left: 30%;
    padding-right: 30%;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  body {
    background-color: rgb(203, 159, 214);
  }
  .container {
    background-color: rgb(203, 159, 214);
    flex-direction: row;
  }
  .item {
    width: 50%;
  }
  .instructionList {
    padding-left: 35%;
    padding-right: 35%;
  }
}

*, ::after, ::before {
  box-sizing: unset;
}



/* Social media icons */
/* Style all font awesome icons */
.fa {
  padding: 20px;
  font-size: 30px;
  width: 40px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 5px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}
.dcLink {
  margin-bottom: 15px;
  font-weight: bold;
}