/* CSS for fonts and padding. N.B. Also need google font link in the head of each page to ensure that the correct font is used */

/* Styling for Home page elements */

.card-footer {
  background: transparent;
  border-top: 0px;
}

.top-section {
  padding-top: 75px;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
  background: #97DECE;
  color: rgb(21, 18, 18);
  font-size: 25px;
  
}

.xlarge-font {
  font-size: 3rem;
}

@media only screen and (max-width: 600px) {
  .xlarge-font {
    font-size: 2rem;
  }
}

.text-typing {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  font-size: 30px;
  font-family: 'Montserrat', sans-serif;
  border-radius: 20px;
}

#typing-text {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  animation: type 5s steps(40, end) forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@media (max-width: 767px) {

  .text-typing {
    font-size: 20px;
  }
  
  #typing-text {
    width: auto;
    white-space: nowrap;
    overflow: visible;
    animation: none;
  }
}

/* this is the beginning using type.js*/
#typed {
  font-size: 30px;
}

@media only screen and (max-width: 767px) {
  #typed {
    font-size: 20px;
  }
}
/* this is the end for type.js typing affects*/

.iframe-bottom {  
    position: absolute;    
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

main > .slideshow-container {
  background-color: #f6f6f8;
  border-color: black;
  padding-bottom: 15px;
  display: flex;
}

.fw-normal {
  font-size: 1.8rem;
}

@media only screen and (max-width: 600px) {
  .fw-normal {
    font-size: 1rem;
    
  }
}

/* Used throughout */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #EAFDFC;
}
/* for navbar, move it here just for better adjust colour palette */
.navbar {
  background-color: #62B6B7;
}

.footer {
  background-color: rgb(98, 182, 183, 0.2);
}


h1 {
  font-family: 'Poppins', sans-serif;
}

main > .container {
    padding: 60px 15px 0;
  }

.btn-primary {
  margin: 0.1rem;
  background-color: #6096B4;
  border-color: #6096B4;

};

/* primary button hover, please make sure this two part both exist */
.btn-primary.active:hover{
  color: #A0C3D2;
  background-color: #A0C3D2;
  border-color: #A0C3D2;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    background-color: #A0C3D2 !important;
    border-color: #A0C3D2 !important;
}



/* Styling for icons on pages */
.icon_img {
  max-height: 20rem;
  max-width: 20rem; 
  min-height: 10rem;
  min-width: 10rem;
  align-items: center;
  height: auto;
  padding: 1%;
}

/* Hover effect for Learn cards*/
.learnCard {
  transition: 0.3s;
}
.learnCard:hover {
    transform: scale(1.1);
  }

/* For diff colour card headers */
.HTML {
  background-color: #FDEBED;
}

.CSS {
  background-color: antiquewhite;
}

.JavaScript {
  background-color: #FFCEFE;
}

.Python {
  background-color: #D9ACF5;
}

.Java {
  background-color: #AAE3E2;
}

.Basics {
  background-color: #FFF6BD;
}

  /* For chatbot */
.chatbot {
  width: 10rem;
}

.terminal {
  --color: #A0C3D2;
  --animation: terminal-glow;
  --glow: 0.1;
  --size: 1.5;
  /* --font: 'Poppins', sans-serif; */
}


/*for volunteer*/
#selection_card {    
  box-shadow: none;
  background-color: transparent;
  border-color: transparent;
}

#selection_card_subtitle {
  padding-top: 20px;
  padding-bottom: 15px;
  text-align: justify;
}

#card_group {
  padding-top: 10px;
  padding-bottom: 100px;
}

#result_id_div {    
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

#result_title {
  text-align:center;
  padding-top: 10px;
  padding-bottom: 15px;
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 5rem;
  border-bottom: 5px solid #000;
  display: inline-block;    
}

.card-img-top {
  height: 260px; /* adjust this value as needed */
}
.form-volunteer {
  font-weight: bold;
}


/* for navbar */
.navbar-img {
  height: 22px;
}

/*for contact us*/
#contact_us_container {
  padding-bottom: 50px;
}

#div-contact {
  height:100%; 
  width:100%;
}

#img-contact {
  height:100%; 
  width:100%;
  object-fit:cover;
}

/* Code for dropdowns(?) - is it all needed? */
.dropdown-menu {
    margin: 4rem auto;
  }
  
  .dropdown-item-danger {
    color: var(--bs-red);
  }
  .dropdown-item-danger:hover,
  .dropdown-item-danger:focus {
    color: #fff;
    background-color: var(--bs-red);
  }
  .dropdown-item-danger.active {
    background-color: var(--bs-red);
  }
  
  /* .btn-hover-light {
    background-color: var(--bs-white);
  }
  .btn-hover-light:hover,
  .btn-hover-light:focus {
    color: var(--bs-white);
    background-color: var(--bs-white);
  } */
    
  .form-control-dark {
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .15);
  }
  
  .w-220px {
    width: 220px;
  }
  
  .w-280px {
    width: 280px;
  }
  
  .w-340px {
    width: 340px;
  }
  
  .w-600px {
    width: 600px;
  }