/*CSS Reset*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Open Sans",sans-serif;
}
/*Initialize Values*/
/*Dark Mode*/
:root, :root.dark {
	--overlay:rgba(51,51,51,0.7);
	--text-color:#F2F2F2;
	--green-main : #4CAF50/*rgba(74,154,31,1)*/;
	--green-secondary:rgba(51,81,36,0.6);
	--tools-bg:rgba(255,255,255,0.5);
	--shadow1:rgba(0,0,0,1);
	--shadow2:rgba(255,255,255,1);
	--button:rgba(74,154,31,1);
	--tool-overlay:rgba(0,0,0,0.2);
	--text-overlay:rgba(255,255,255,1);
}
/*Light Mode*/
:root.light {
	--overlay:rgba(248,248,248,0.5);
	--text-color:#333333;
	--green-main : #4CAF50;
	--green-secondary:rgba(74,154,31,0.6);
	--tools-bg:rgba(0,0,0,0.3);
	--shadow1:rgba(255,255,255,1);
	--shadow2:rgba(0,0,0,1);
	--tool-overlay:rgba(255,255,255,0.2);
	--text-overlay:rgba(0,0,0,1);
}
/*Smooth Scroll*/
html {
  scroll-behavior: smooth;
}

/*Setup Background and Text Stylings*/
body{
	background: linear-gradient(0deg,var(--overlay),var(--overlay)),url(./assets/images/background.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	text-shadow: 1px 1px 10px var(--shadow1);
	color: var(--text-color);
}

/*Setup minimum heights per section*/
section{
	min-height:100vh ;
	padding-top: 102px
}

/*Removed Styles for all anchors*/
a,a:link ,a:visited {
	text-decoration: none;
	color:var(--text-color);
}

/*Changed font for all <h1>*/
h1 {
	font-family: "Kanit",sans-serif;
	color: var(--text-color);
}

/*Initialized Other background colors to use*/
.bg-green {
	background:linear-gradient(180deg,var(--green-main),var(--green-secondary));
}
.bg-card {
	background:linear-gradient(180deg,var(--green-main),var(--green-secondary));
	border-radius: 20px;
}
.bg-container {
	background-color: var(--green-secondary);
	border-radius: 20px;
	box-shadow: black;
}
.bg-tools {
	background-color: var(--tools-bg);
	border-radius: 20px;
	border:5px solid var(--green-main);
}
.bg-footer {
	background: linear-gradient(0deg,var(--green-main),rgba(0,0,0,0));
}
/*Navbar Stylings*/
nav {
/*	border-bottom: 2px solid rgba(255,255,255,0.5);*/
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
}
nav img {
	width: 20%;
	box-shadow: black;
}
nav li {
	margin-right: 1rem;
}
.nav-link {
	text-shadow: 1px 1px 5px var(--shadow1),-1px -1px 5px var(--shadow1);
	color:var(--text-color)!important;
	font-weight: bold;
}
.nav-link:hover {
	text-shadow: 1px 1px 10px var(--shadow1);
}

.navbar-brand {
	font-family: "Libre Baskerville",sans-serif;
	font-size: 1.75rem;
	font-weight: bold;
	text-shadow: 1px 1px 5px var(--shadow1);
}
.navbar-brand:hover {
	text-shadow: 1px 1px 10px var(--shadow1);
	color: var(--text-color);	
}

/*Socials Icons*/
.fa-brands {
	font-size: 2rem;
	margin-right: 1rem;
	padding: 1rem 0 1rem 0;
	filter: drop-shadow(0 0 1px var(--shadow2))  ;
}
.fa-facebook {
	color: #316FF6;
	margin-left: 1rem;
}
.fa-x-twitter {
	color: #fff;
}
.fa-linkedin {
	color: #0077B5;
}
.fa-google-plus-g {
	color: #db4a39;
}
.fa-codepen {
	color: #fff;
}
.fa-github {
	color: rgb(64, 120, 192);
}
#landing .fa-brands:hover {
	transform: scale(1.4) translateY(-10px);
	filter:none;
}
#contact .fa-brands:hover {
	transform: scale(1.4) translateY(-10px);
	filter:none;
}

/*Landing Stylings*/
#landing img {
	width:50%;
	border: 5px solid var(--green-main);
}
figcaption {
	text-shadow: 1px 1px 10px var(--shadow1);
	font-style: italic;
	color: var(--text-color) !important;
}

/*About Me Stylings*/
#intro {
	text-align: justify;
}

#about-me .emoji {
	font-size: 3rem;
}
@media (min-width: 768px) {
  #about-me-container {
		background-color: var(--green-secondary);
		border-radius: 20px;
		box-shadow: black;
		border:5px solid var(--green-main);
	}
}

/*Projects Stylings*/
.card,.card-body,.card.footer{
	height: 100%;
}
.card-header{
	font-family: "Kanit",sans-serif;
	font-size: 1.2em;
}
.card:hover{
	transform: scale(1.05);
	transition: ease-in-out 0.33s;
	z-index:100;
}
.card-img{
	width: 100%;
	min-height: 100% !important;
}
.card-body{
	margin:0;
	padding: 0;
	position: relative;
}
.card-image-overlay{
	position: absolute;
	height: 100%;
	top:0;
	background: rgba(0,0,0,0.5);
	display: grid;
	place-items: center;
	text-align: justify;
	color:white;
	opacity: 0;
}
.card-image-overlay:hover{
	transition: ease-in-out 0.33s;
	opacity: 1;
}
.card-image-overlay .card-text{
	padding: 1rem;
}
/*Contact Stylings*/
#contact iframe {
	width: 100%;	 
	height: 90%; 
	border:5px solid var(--green-main);
	border-radius: 20px;
}
#forms {
	border:5px solid var(--green-main)
}
textarea {
	resize: none;
}
input,textarea {
		background-color: transparent;
    border: none;
    margin: 8px 0;
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 8px;
    width: 100px;
    outline: none;
    box-shadow: 1px 1px 4px black, -1px -1px 4px white;
    color: var(--text-color);
    font-family: "Kanit",sans-serif;
}
::placeholder {
	color: var(--text-color);
}
.modal-body, #modalsubmitlabel{
	text-shadow:none;
}

/*Tools Stylings*/
.tool-section{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.image-div{
	position: relative;
}
#tools img {
	width:150px;
	border-radius: 50%;
}
#tools .overlay{
	background: var(--tool-overlay);
	position:absolute;
	top: 0;
	width:150px;
	height: 150px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	opacity:0;
	font-size: 1.5rem;
	font-family: "Kanit",sans-serif;
	cursor: default;
	color:var(--text-overlay);
}
#tools .overlay:hover, #tools .overlay:active{
	opacity:1;
	transition: ease-in-out 0.33s;
}

/*Footer Stylings*/
footer span {
	margin-right: 1rem;
}

/*Button Styles*/
.btn-card {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d4af37 ;
  --bs-btn-border-color: #f2c83f;
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg:#f7d460  ;
  --bs-btn-hover-border-color: #a6892b;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #d4af37;
  --bs-btn-active-border-color: #d4af37;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: 1px 3px 3px black;
}
/*Switch*/
.fa-solid	{
	font-size: 20px;
	text-shadow: none;
	font-weight: lighter;
}
.fa-solid:hover{
	animation: spin 2s;
}
@keyframes spin {
	100% {transform: rotate(360deg);}
  }
.fa-sun {
	position: absolute;
	top:5px;
	right:6.5px;
	color:white;
}
.fa-sun:hover{
	-webkit-text-stroke: 0.75px #d8860b;
	transition: ease-in-out 0.33s;
}
.fa-moon {
	position: absolute;
	left: 6.5px;
	top: 5px;
	color:white;

}
.fa-moon:hover{
	-webkit-text-stroke: 0.75px #3a3a3a;
	transition: ease-in-out 0.33s;
}
.switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 30px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: white;
}
input:checked + .slider.round:before {
	background: linear-gradient(180deg,#ffcc89,#d8860b);
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(37px);
  -ms-transform: translateX(37px);
  transform: translateX(37px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 36px;

}

.slider.round:before {
  border-radius: 50%;
  background: linear-gradient(180deg,#777,#3a3a3a);
}
input[type="checkbox"]:checked {
    /* styles here */
}

/*FUTURE PLANS
-rework color scheme
-rework navbar
-play with backgrounds
-play with animations
-possibly use SwiperJS to rework projects section
*/

.text-link:hover{
	text-decoration: underline;
}