.suggestions::-webkit-input-placeholder {color: navy;} /* WebKit, Blink, Edge */

.suggestions:-moz-placeholder {color: navy;}/* Mozilla Firefox 4 to 18 */

.suggestions::-moz-placeholder { color: navy;} /* Mozilla Firefox 19+ */

.suggestions:-ms-input-placeholder { color: navy;}/* Internet Explorer 10-11 */

.card-body a {text-decoration: none !important;}

.suggestions {margin-top:10px;}

.overlay-tools {position: absolute;border-radius: .5rem;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.15);color: #f1f1f1;width: 100%;height: 100%;

transition: .5s ease;color: white;font-size: 20px;padding: 10px;text-align: center;display: flex;justify-content: center;align-items: flex-end;}

.overlay-tools p{color: white;font-size: 18px;}

.container .typescript h3{ font-weight:bold;  color:white;  font-size:25px;}

.desktop {display: block;}

.mobile {display: none;}

.accordion, .accordion-item, .accordion-button, .accordion-header, .accordion-body{

    background-color: transparent!important; color: navy;} /* Set text color */

.accordion-item :focus {outline: 0 !important; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;}

.list { list-style-type: none; margin:15px; font-weight:bold;}

.a_list { text-decoration: none; color:navy; font-weight:bold;}

th {color:navy; font-weight:bold; text-align: left; width:50%;}

td {color:navy;  width:50%;}

a { text-decoration: none; color:navy;}

th a:hover {color: blue;}

td a:hover {color: blue;}

.child {min-height: 100%; display: flex; flex-direction: column; align-items: flex-start; }



@media screen and (max-width: 1255px){ 

.container .typescript h3{color: white;font-size: 22px;}

.overlay-tools p{color: white;font-size: 18px;}

.suggestions {margin-top:10px;}

}

@media screen and (max-width: 1201px){ 

.container .typescript h3{color: white;font-size: 20px;}

.overlay-tools p{ color: white; font-size: 16px;}

}

@media screen and (max-width: 1025px){ 

.container .typescript h3{color: white;font-size: 19px;}

.overlay-tools p{color: white;font-size: 15px;}

}

@media screen and (max-width: 768px){ 

.container .typescript h3{ font-weight:bold; color:white; font-size:14px; }

.overlay-tools p{color: white;font-size: 14px;}

.child {min-height: auto;}

}

@media screen and (max-width: 446px){ 

.container .typescript h3{font-weight:bold; color:white; font-size:15px;margin-top:20px;}

.container .typescript p{font-weight:bold;  font-size:13px; margin-top:20px; }

.overlay-tools p{color: white; font-size: 13px;}  

.suggestions {margin-top: -10px;}

th {font-size:12px;}

td {font-size:12px;}

}



/*TEXT TOGGLE ONLY*/

/* CSS for mobile devices*/

@media only screen and (max-width: 767px) {

.mobile {display: block;}

.desktop {display: none;}

}

/* CSS for tablets and desktops */

@media only screen and (min-width: 768px) {

.mobile {display: none;}

.desktop {display: block;}

}



@media (min-width: 993px) and (max-width: 1301px) {

.col-my-lg {flex: 0 0 50% !important; max-width: 50% !important;}

}

.blog {padding-left: 20px!important;padding-right: 20px;

}

  .col-my-lg {

        display: flex;

    }

    .child {

        min-height: 100%;

        display: flex;

        flex-direction: column;

    }

    .container {

        flex: 1;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

    }

    .col-12 {

        margin-top: auto;

        

    }

    .col-12 button {

        margin-top: -30px;

        margin-bottom: -10px; /* Adjust the margin as desired */

    }

    

.btn .btn-success {

  font-size: 16px;

  background-color: #4267B2!important;

  color: white;

  position: relative;

  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;

}



.btn.btn-success:hover {

  background-color: #DCE3F1!important;

  transform: translateY(-3px);

  color: navy!important;

}



.btn.btn-success a {

  color: white!important;

  text-decoration: none;



}



.btn.btn-success i {

  font-size: 25px;

  color: orange;

}



.btn.btn-success:hover a {

  color: navy!important;

}



.btn.btn-success:hover i {

  animation: spin 2s infinite linear;

  color:#4267B2!important;

}



@keyframes spin {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}





@keyframes moveUpAndDown {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-5px);

  }

  100% {

    transform: translateY(0);

  }

} 



.twitch:hover {animation: moveUpAndDown 0.8s ease-in-out ;}

.twitch {transition: transform 0.8s ease-in-out;}