@import url("project.css");
@import url("home.css");
@import url("blog.css");

:root {
	--white: #ffffff;
	--black: #000000;

	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-style: normal;

	--drop_shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));

	--background-colour: #f1f5f8;
	--primary-colour: #a8a8a8;
	--secondary-colour: #ffffff;
	--opposite-colour: var(--black);
	--paragraph_colour: var(--black);
}

html {
	width: 100vw;
	margin: 0px;
	padding: 0px;
}



body {
	background-color: var(--background-colour);
	background-image: url(../assets/other/wall.webp);
	background-repeat: repeat;
	margin: 0px;
	width: 100vw;
	height: 100%;
	padding: 0px;
	position: absolute;
	gap: inherit;
	color: var(--opposite-colour);
	overflow-x: hidden;
}

p {
	color: var(--paragraph_colour);
	text-align: justify;
}

nav {
	width: fit-content;
	height: fit-content;
	top: 3rem;
	left: 50%;
	transform: translateX(-50%);
	position: fixed;
	z-index: 20;
	display: flex;
	background-color: var(--primary-colour);
	border-radius: 20px;
	filter: var(--drop_shadow);
}

.navLink {
	display: block;
	width: 4rem;
	height: 2rem;
	margin: auto;
	padding: 0.5rem;
	color: #231f1f;
	text-decoration-line: none;

	font-size: medium;
	font-weight: 400;
	transition-property: background-color, color;
	transition: 0.3s ease-in-out;

	display: flex;
	justify-content: center;
	align-items: center;
}

nav a.navLink:hover {
	background-color: #514f4f;
	color: #f1f5f8;
}

.navLink:first-child {
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}

.navLink:last-child {
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}

.navLink.active {
	background-color: #524c4c;
	color: #f1f5f8;
}

.verticalBar {
	width: 1px;
	height: 3rem;
	background-color: var(--secondary-colour);
	margin: 0;
	border: var(--secondary-colour);
}

#toggle{
	width: 3rem;
	height: 3rem;
	position: fixed;
	top: 50%;
	left: 0.5rem;
	z-index: 20;
	border-radius: 50px;
	padding: 0;
	margin: 0;
	display: block;
	filter: var(--drop_shadow);
	border: white 5px;
	background-color: white;
	transition: 0.3s ease-in-out;
	transition-property: transform;
	display: flex;
	justify-content: center;
	align-items: center;

	img{
		width: 3rem;
		height: 3rem;
		filter: brightness(0) saturate(100%) invert(77%) sepia(10%) saturate(0%) hue-rotate(165deg) brightness(88%) contrast(80%);
		transition: 0.3s ease-in-out;
		transition-property: rotate;
		object-fit: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
}

.hiddenToggle {
	transform: translate(0,-50%);
}

.exposedToggle{
	transform: translate(5rem,-50%);

	img {
		rotate: 180deg;
	}
}

#contact {
	width: 5rem;
	height: 12rem;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	z-index: 20;
	position: fixed;
	top: 50%;
	left: 0px;
	margin: 0;
	padding: 0;
	background-color: var(--primary-colour);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	filter: var(--drop_shadow);
	overflow: hidden;
	transition: transform 0.3s ease-in-out;
}
.hidden {
	transform: translate(-100%,-50%);
}
.moveOut{
	transform: translate(0,-50%);
	
}

.contactIcon {
	width: 5rem;
	height: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	transition-property: background-color;
	transition: 0.3s ease-in-out;
}

.contactIcon img {
	transition-property: filter;
	transition: 0.3s ease-in-out;
}

.contactIcon:hover {
	background-color: #514f4f;
}

.contactIcon:hover img {
	filter: invert(1);
}

.contactIcon img {
	width: 30px;
	height: 30px;
}

.contactLine {
	width: 100%;
	height: 1px;
	margin: 0;
	border: #f1f5f8;
	background-color: var(--white);
	z-index: 20;
}

code span {
	color: var(--black);
}

.select_wrap {
    border: 1px solid var(--primary-colour);
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 2px ;
    background-color: #f1f5f8;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: 0;
    width: fit-content;
}

.select_wrap label{
    
    font-size: small;
    text-transform: uppercase;
    color: var(--black);
    width: fit-content;
    padding-left: 5px;
    
}

select{
    background-color: transparent;
    width: 8rem;
    border:0px;
    padding: 0px;
	padding-left: 5px;
    cursor: pointer;
    font-weight: 400;
    font-size:small;
}
.unselectable {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
  }

@media (min-width: 768px) {
	#content {
		width: 70%;
	}

	#toggle{
		display: none;
	}

	#contact{
		transform: translate(0, -50%);

	}
}

@media (min-width: 1025px) {
	#content {
		width: 60%;
	}

	#switchThemeBtn {
		bottom: 5rem;
		right: 5rem;
	}
}