:root {
  --dark-blue : #252758;
  --blue : #4788C7;
  --tosca: #57C5B3;
  --light-blue : #12c2e9;
}

body{
  background-color: #57C5B3 !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
}

.bg-tosca, .jumbotron, .jumbotron-fluid{
  background-color: #57C5B3 !important;
}

.card{
  border-radius: 1rem !important;
  background-color: #ffffff4b !important;
  border: none !important;
}

.card-body {
  padding: 0 !important;
}


.text-dark {
  color: #252758 !important;
}

a {
  text-decoration: none !important;
  background-color: transparent;
}

body.light a:hover {
  color: #fff !important;
}


/* Cursor */
.txt-type > .txt {
  border-right: 0.2rem solid #252758;
}

@media(min-width: 1200px) {
  h1 {
    font-size: 5rem;
  }
}

@media(max-width: 800px) {
  .container {
    padding: 0 1rem;
  }

  h1 {
    font-size: 3rem;
  }
}

@media(max-width: 500px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* Dark Mode */

body.dark {
	background-color: #000 !important;
}

body.dark .bg-tosca, .jumbotron, .jumbotron-fluid{
  background-color: #000 !important;
}

body.dark .text-dark {
  background: #12c2e9;
  background: -webkit-linear-gradient(to left, #f64f59, #c471ed, #12c2e9) !important;
  background: linear-gradient(to left, #f64f59, #c471ed, #12c2e9) !important;
  
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.dark .card{
  border-radius: 1rem !important;
  background-color: rgba(184, 118, 238, 0.250) !important;
  border: none !important;
  box-shadow: #c471ed81 0px 0px 15px, #c471ed81 0px 0px 3px 1px !important;
}


body.dark .txt-type > .txt {
  border-right: 0.2rem solid rgb(218, 77, 101);
}

body.dark #theme-toggle span:nth-child(1) {
	display: none;
	color: #252758!important;
	font-size: 14px!important
}

body.dark #theme-toggle span:nth-child(2) {
  background: #12c2e9;
  background: -webkit-linear-gradient(to left, #f64f59, #c471ed, #12c2e9) !important;
  background: linear-gradient(to left, #f64f59, #c471ed, #12c2e9) !important;
  
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
	display: block;
	font-size: 14px!important
}

body.dark #theme-toggle:before {
	background-color: #12c2e9;
}

body.dark hr{
  box-shadow: #c471ed81 0px 0px 15px, #c471ed81 0px 0px 3px 1px;
}

body.dark #theme-toggle {
  background-color: #000 !important;
  border: 2px solid #12c2e9;
  box-shadow: #12c2e9 0px 0px px;
}

body.dark a:hover{
  background: linear-gradient(to right,rgb(250, 80, 80), rgb(224, 152, 104), rgb(240, 194, 110), rgb(236, 236, 112), rgb(111, 226, 111),  rgb(111, 111, 231), rgb(212, 116, 196), rgb(179, 72, 179) );
  background-size: 200% 200%;
  animation: rainbow 2s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip:text;
  color:rgba(0,0,0,1);
  transition: color .2s ease-in-out;
}

body.dark a:hover{
  color:rgba(0,0,0,0);
}

@keyframes rainbow { 
  0%{background-position:left}
  50%{background-position:right}
  100%{background-position:left}
}

body.light #theme-toggle:before {
	background-color: #252758;
}

body.light .nav-heading {
	color: #252758 !important
}

body.light .nav-link {
	color: #252758 !important
}

body.light h6 {
	color: #252758 !important
}

body.light a {
	color: #252758 !important
}

body.light .text-light{
  color: #34699a !important;
}

body.light #theme-toggle {
	padding: 8px 40px 8px 15px
}

body.light #theme-toggle:before {
	left: calc(100% - 4px - 26px)
}

body.light #theme-toggle span:nth-child(1) {
	display: block;
	color: #252758!important;
	font-size: 14px!important
}

body.light #theme-toggle span:nth-child(2) {
	display: none;
	color: #252758!important;
	font-size: 14px!important
}

#theme-toggle {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	border-radius: 50px;
	padding: 8px 15px 8px 40px;
	position: relative;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	cursor: pointer
}

body.light #theme-toggle {
  background-color: #57C5B3 !important;
  border: 2px solid #252758;
}

#theme-toggle:focus,
#theme-toggle:active,
#theme-toggle:hover {
	outline: none
}

#theme-toggle:before {
	position: absolute;
	content: "";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #cecece;
	left: calc(0px + 6px);
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out
}