@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");
/* DO NOT EDIT THESE IMPORTS
In order to keep our CSS as manageable as possible, we're starting with multiple separate stylesheets. They are all imported into style.css.

    Do not edit reset.css at all.
    You can minimally edit layout.css to match your specific column/row grid rules. Try to keep all basic structural rules here.
    Optionally, you can set colour variables in variables.css.
    Use typography.css stylesheet to set your general text styles.
    Use style.css for all general UI styles, or anything that you want to overwrite from other stylesheets, because it's loaded last. */

/* Use this stylesheet to add your UI details, and to overwrite layout details for specific instances. */
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background-color: var(--white);
}

.icon {
	fill: var(--bg-black);
	mix-blend-mode: hue var(--green);
	margin-top: 10px;
	color: var(--text);
}

.overflow {
	overflow: hidden;
}

/*------------------FOOTER ICONS-----------------------*/
.arrow {
	border-radius: 50%;
	background-color: var(--green);
}
.arrow:hover {
	opacity: 0.6;
}
.arrow:active {
	opacity: 1;
	background-blend-mode: multiply;
}

.light .lighticon {
	display: none;
}
.dark .lighticon {
	display: block;
}

.light .darkicon {
	display: block;
}
.dark .darkicon {
	display: none;
}
/* ------------------Style the header---------------- */
header {
	padding: 30px 0;
}

/* ----------Style the navigation----------- */
nav ul {
	list-style-type: none;
	padding: 0;
}

nav li {
	display: inline;
}
a {
	color: var(--text);
}
.center {
	margin-left: auto;
	margin-right: auto;
}
nav a {
	text-decoration: none;
	display: inline-block;
}

header {
	margin-bottom: 70px;
	margin-right: 130px;
	margin-left: 130px;
}

.logo {
	max-width: 52px;

	/* Limit the size of your logo. Is often a good place to use a fixed width (the "width" property, with a pixel value, not a percentage). */
}
.logoheader {
	width: 52px;
	margin-left: 10px;
}
ul {
	padding-left: 0;
	/* By default, lists have padding-left of 40px to make room for bullet points or numbers. I'm overwriting because I have no bullet points to make room for. */
}

.main-header {
	display: flex;
	/* Display: flex; on parent makes children behave like flex children */
	justify-content: space-between;
	/* Pushes children to fill full horizontal width, and distributes all children evenly horizontally */
	align-items: center;
	/* for vertical alignment of flex children */
}

/* This selector is called a "combinator", and the space means descendant */
.primary-nav li {
	display: inline;
	text-align: center;
	/* Removes the bullet (or number) and puts all <li>s in line with each other */
}

/* This selector below is a "combinator". It selects all <a> tags that are a descendant of any element that has the class "primary-nav". */
.primary-nav a {
	display: inline-block;
	padding: 0.75em;
	/* Very important for building accessible links - large enough tap space */
}
.button {
	background-color: turquoise;
	padding: 20px;
	border-radius: 4px;
	margin-left: 2em;
	align-self: center;
}

.arrows {
	justify-content: space-between;
	padding: 10vw;
	padding-top: 10px;
	padding-bottom: 0;
}

.flex-parent {
	display: flex;
	justify-content: space-between;
	/* This applies to the div that I used to group the menu an button together, and it allows be to use the parent property of "justify-content" on that group, to push right. Note that any element can be both a flex child, and a flex parent. */
}

input {
	height: 44px;
	flex: 1;
	/* Will make this element take up the full space left by the other elements - from logo to menu. */
	margin: 0 40px;
	/* No top and bottom margin, 40px left and right margin */
}
.inline {
	display: inline;
}
/*-------- Project Images-------------*/
/* .project-images:hover {} */

/* ------------------Sections and pages------------------ */
/* Style any specific sections or pages here */

.background-colour {
	background-color: var(--bg-grey);
}
.footer {
	background-color: var(--bg-grey);
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	padding-top: 20px;
	padding: 50px;
}
.footer .row {
	justify-content: center;
}
.justify {
	justify-content: space-between;
}

.bg-colour {
	background-color: var(--bg-grey);
	margin: 0;
	padding-bottom: 350px;
}

.project-bg-colour {
	background-color: var(--bg-grey);
	margin: 0;
	padding-bottom: 160px;
}
.headerbg {
	background-color: var(--bg-grey);
	margin: 0;
	padding-bottom: 50px;
}
header {
	margin: 0;
}

/*----------Slider Button---------*/

.theme-btn {
	width: 3em;

	height: 3em;

	padding: 0.5em;

	border-radius: 50%;

	cursor: pointer;

	border: none;

	background-color: transparent;
}

/* .theme-btn img {
	height: 100%;

	width: 100%;

	object-fit: cover;
} */
.theme-btn.light {
	display: none;
}

.dark .theme-btn.dark {
	display: none;
}

.dark .theme-btn.light {
	display: block;
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

/* 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-color: var(--bg-grey);
	stroke: var(--w-text);
	stroke-width: 5em;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}
.slider {
	stroke: white;
}

.slider::before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	stroke: var(--text);
	stroke-width: 5rem;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

input:checked + .slider {
	background-color: var(--bg-grey);
	stroke: var(--w-text);
	stroke-width: 5em;
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--green);
}

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

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

.move {
	margin-left: 20px;
}

a h2 {
	text-decoration: none;
}

a h2 :hover a h2 :focus {
	text-decoration: none;
}

a h2 :active {
	text-decoration: none;
}

.content {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: var(--green);

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
	transition: 0.6s;
}

.content:hover {
	opacity: 0.6;
}
.content h3 {
	color: black;
	margin-bottom: 30px;
	font-size: 55px;
}
.project-image {
	position: relative;
	width: 100%;
}
.content > * {
	transform: translateY(25px);
	transition: transform 0.6s;
}
.content:hover > * {
	transform: translateY(0px);
}
/*-------------SLIDER--------------------*/
.togglle-container {
	position: relative;
	width: 60px;
	height: 30px;
	margin-right: 10px;
}

.togglle-checkbox {
	opacity: 0;
	width: 0;
	height: 0;
}

.togglle-label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--ring);
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.togglle-label::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	width: 22px;
	height: 22px;
	background-color: white;
	border-radius: 50%;
	transition: transform 0.3s, background-color 0.3s;
}

.togglle-checkbox:checked + .togglle-label {
	background-color: var(--ring);
}

.togglle-checkbox:checked + .togglle-label::before {
	transform: translateX(30px);
	background-color: #ffffff;
}
.smaller-img {
	max-width: 70%;
}
/*-------home page ring animation----------------*/

.biggest-ring {
	width: 400px;
	height: 400px;
	position: relative;
	border-radius: 50%;
	border: var(--ring) 20px solid;
	animation: rings-anim 5s infinite;
	margin: auto;
	margin-left: 23vw;
	object-fit: cover;
}
.medium-ring {
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	position: absolute;
	border-radius: 50%;
	border: var(--ring) 20px solid;
	animation: rings-anim 4s infinite;
}
.small-ring {
	top: 30%;
	left: 30%;
	width: 40%;
	height: 40%;
	position: absolute;
	border-radius: 50%;
	border: var(--ring) 20px solid;
	animation: rings-anim 3s infinite;
}

.opacity-rings {
	animation-name: rings-anim;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes rings-anim {
	from {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.absolute {
	position: absolute;
}

/* //////////////----Responsive layout - Media queries--------//////////// */

/* You can edit the rules inside of these media queries, but you can also edit the breakpoints to work for your own content and design. */
@media (max-width: 395px) {
	/* anything you only want applied at mobile sizes can go here */
	.bg-colour {
		padding-bottom: 460px;
	}
	li a {
		font-size: 14px;
	}
	primary-nav a {
		padding: 0.25em;
	}
}
@media (max-width: 600px) {
	/* anything you only want applied at mobile sizes can go here */
}

@media (min-width: 768px) {
	/* anything you want to kick in at small tablet and above can go here */
	.logo {
		max-width: 105px;
	}
	.logoheader {
		width: 105px;
	}
}

@media (min-width: 1080px) {
	/* anything you want to kick in at large tablet and above can go here */
}

@media (min-width: 1300px) {
	/* anything you want to kick in at desktop and above can go here */
}