@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

:root {
	--card-front: #DCDCDD;
	--light-mode-background: #efebe5;
	--card-reverse: #C5C3C6;
	--dark-mode-background: #46494C;
	--labels: #5FAD41;
	--buttons-light-mode: #E71D36;
	--buttons-dark-mode: #ffd500;
	--white: white;
	--black: #000000;
}

body {
	background-color: var(--dark-mode-background);
	color: var(--light-mode-background);
	font-family: 'Titillium Web', sans-serif;
	margin: 0;
	height: 100vh !important;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;

    grid-template-areas: 
    'header header header'
    'main main main'
    'section section aside'
	'demo demo demo'
    'footer footer footer'
    ;
}

#myName {
	font-weight: 100;
	font-size: 56px;
}

.skillsLinks {
	display: flex;
	justify-content: space-around;
}

.linksDiv {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.image-box {
	display: flex;
	gap: 5px;
	padding: 50px;
}

.image-card {
	flex: 1;
	overflow: hidden;
	cursor: pointer;
	width: 200px;
	height: 300px;
	transition: flex .3s ease-in-out;
}

.image-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter:grayscale(1);
	-webkit-filter: grayscale(1);
	border-radius: 5px;
}

.image-card:hover {
	flex: 3;
}

.image-card:hover img{
	filter: none;
}

.badge {
	display: inline;
	background: linear-gradient(180deg, #4c8a34 20%, #559b3a 40%, #5fad41 60%, #6fb554 80%, #7ebd66 100%);
	color: white;
	font-weight: 700;
	padding: 3px 5px;
	margin-left: 3px;;
	text-align: center;
	border-radius: 25px;
  }

.header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    gap: 5px;
	margin: 15px;
}

span {
	font-weight: 600;
}

h1 {
	background: linear-gradient(180deg, #4c8a34 40%, #559b3a 60%, #5fad41 80%, #6fb554 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.title {
	display: flex;
	gap: 5px;
}

.desire {
	padding-right: 15px;
}

nav {
	display: flex;
	font-size: 1.15rem;
	font-weight: 500;
	align-items: center;
	gap: 5px;
}

.menu {
	padding: 5px;
}

.main {
    grid-area: main;
	display: flex;
	justify-content: space-around;
	gap: 5px;
	margin: 0px 10px;
}

.intro-text {
	max-width: 950px;
	font-size: 1.5rem;
}

.aside {
    grid-area: aside;
	display: flex;
	flex-direction: column;
}

#mySkills {
	align-self: flex-start;
	padding-left: 50px;
}

.section {
    grid-area: section;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	gap: 5px;
	margin-left: 15px;
}

fieldset {
	border-radius: 14px;
}

legend {
	font-weight: 500;
	font-size: 1.75rem;
}

.project-text-box {
	padding: 20px;
	text-align: left;
	font-size: 1.25rem;
	max-width: 500px;
}

iframe {
	border-radius: 14px;
	width: 600px;
}

strong {
	color: var(--labels);
}

.right-text-box {
	padding: 20px;
	text-align: left;
}

.project-details {
	display: flex;
	gap: 5px;
}

.project-cards {
	display: flex;
}

#bk-cd {
	background-color: var(--card-reverse);
	color: var(--black);
	border: 1px solid var(--card-reverse);
}

.proj-cd {
	position: relative;
	left: 0px;
	background-color: var(--dark-mode-background);
	color: var(--white);
	border: 1px solid var(--dark-mode-background);
	border-radius: 5px;
	margin: 5px;
}

.proj-cd:not(:first-child) {
	margin-left: -150px;
}

.proj-cd:hover {
	transform: translateY((-20px));
}

.proj-cd:hover ~.proj-cd {
	left: 150px;
}

.footer {
	grid-area: footer;
	background: var(--dark-mode-background) url(./footer.png) no-repeat center;
	/* background-color: var(--dark-mode-background); */
	/* background-image: url(./footer.png);
	background-repeat: no-repeat;
	background-position: center; */
	background-size: cover;
	margin: 25px 0 0 0;
}

.page2Header {
	background: var(--dark-mode-background) url(./footer.png) no-repeat center;
	/* background-color: var(--dark-mode-background);
	background-image: url(./footer.png);
	background-repeat: no-repeat;
	background-position: center; */
	background-size: cover;	
}

.page2Title {
	display: flex;
	background: radial-gradient(rgba(0, 0, 0, 0), rgba(207, 135, 28, 0.69));
	padding: 15px;
	justify-content: space-between;
}

.extraInfo {
	padding: 15px;
}

.projectSpecific {
	text-align: center;
	font-size: 3.5rem;
}

.projectSpecificBadge {
	font-size: 1.5rem;
	font-weight: 200;
	
}

:any-link {
	text-decoration: none;
	color: var(--black);
}

.footer-text {
	background: linear-gradient(to left, rgba(0, 0, 0, 0) 75%, rgba(255, 255, 255, 1) 100%);
	padding-left: 25px;
	color: var(--black);
}

li::first-letter {
	font-size: 1.5rem;
}

li::marker {
	content: '~ ';
}

#my-photo {
	border-radius: 50%;
	max-width: 200px;
}

/* button text colour is determined by link colour */
.btn {
	background-color: #ffd5005b;
	border-radius: 15px;
	border: 1px solid var(--buttons-dark-mode);
	font-weight: 500;
	font-size: 1.15rem;
	padding: 8px 10px;
}

.links {
	max-height: 25px;
}

.btn:hover {
	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.35);
}

hr {
	width: 3px;
	background-color: transparent;
	border-width: 0px 2px 0px 0px;
	border-color: var(--buttons-dark-mode);
}



/* toggle button from W3 Schools */
.toggle-theme {
	align-self: center;
}
/* The switch - the box around the slider */
.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;
    -webkit-transition: .4s;
    transition: .4s;
	background-color: var(--white);
}
.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    -webkit-transition: .4s;
    transition: .4s;
	background-color: var(--black);
}
input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
input:checked + .slider {
    background-color: var(--dark-mode-background);
}
input:focus + .slider {
    box-shadow: 0 0 1px var(--dark-mode-background);
}
/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
#themeButton, .submit {
    background: linear-gradient(270deg, var(--white) 40%, var(--dark-mode-background) 100%);
    border-color: var(--card-reverse);
    /* color: var(--main-text-color, white); */
}

.flip-image {
	border-radius: 80px 80px 0px 0px;
	max-width: 250px;
}

/* FLIP CARD */
/* W3 schools: flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 250px;
    height: 360px;
	border-radius: 80px 80px 80px 12px;
	border: 1px solid var(--buttons-dark-mode);
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
	align-self: center;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
	border-radius: 80px 80px 80px 12px;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  /* Position the front and back side, border box added to stop the flip creating a larger card on the reverse side */
  .flip-card-front, .flip-card-back {
    position: absolute;
	box-sizing:border-box;
	border-radius: 80px 80px 80px 12px;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  /* Style the front side*/
  .flip-card-front {
    background-color: var(--card-reverse);
    color: var(--dark-mode-background);
  }
  /* Style the back side */
  .flip-card-back {
    background-color: var(--card-reverse);
    color: black;
    transform: rotateY(180deg);
  }

  
  /* button animations */
  @keyframes btn-animation {
	0% {
		background: linear-gradient(225deg, rgba(0, 0, 0, 0) 10%, white 15%, rgba(0, 0, 0, 0) 20%);
		border-width: 1px;
	}
	25% {
		background: linear-gradient(225deg, rgba(0, 0, 0, 0) 30%, white 35%, rgba(0, 0, 0, 0) 40%);
		border-width:1px;
	}
	50% {
		background: linear-gradient(225deg, rgba(0, 0, 0, 0) 50%, white 55%, rgba(0, 0, 0, 0) 60%);
		border-width:1px;
	}
	75% {
		background: linear-gradient(225deg, rgba(0, 0, 0, 0) 70%, white 75%, rgba(0, 0, 0, 0) 80%);
		border-width:1px;
	}
	100% {
		background: linear-gradient(225deg, rgba(0, 0, 0, 0) 90%, white 95%, rgba(0, 0, 0, 0) 100%);
		border-width:1px;
	}
}

.btn-animation {
	animation-name: btn-animation;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
}

/* TODO */
/* skills needs to be sent to end between 1260 & 400px to maintain screen display */
@media screen and (max-width: 1281px){
	.container {
		grid-template-areas: 
		/* placeholder references */
		'header header header'
		'main main main'
		'section section section'
		'demo demo demo'
		'footer footer footer'
		'aside aside aside';
	}

	#mySkills {
		padding-left: 10px;
	}

	li::first-letter {
		font-size: 1rem;
	}

	.section {
		margin-left: 0px;
	}

	.footer-text {
		background: linear-gradient(to left, rgba(0, 0, 0, 0) 3%, rgba(255, 255, 255, 1) 100%);
	}
}

@media screen and (max-width: 900px){
	.container {
		grid-template-areas: 
		/* placeholder references */
		'header header header'
		'main main main'
		'section section section'
		'footer footer footer'
		'aside aside aside';
	}

	html {
		font-size: 14px;
	}

	.header {
		margin: 3px;
		flex-direction: column;
	}

	.toggle-theme {
		padding-left: 3px;
	}

	nav {
		justify-content: center;
	}

	#myName {
		text-align: center;
		font-size: 42px;
		margin: 0px 0px 15px 0px;
	}

	#brand {
		order: 1; 
	}

	.myIntro {
		padding-left: 10px;
		margin: 0px;
	}

	.intro-text {
		order: 1;
	}

	.intro-image {
		order: 2;
	}

	#my-photo {
		max-width: 40px;
	}

	.main {
		flex-direction: column;
		align-items: center;
	}

	.project-text-box {
		padding: 5px;
		text-align: left;
		order: 2;
	}

	.flip-card {
		order: 1;
		height: 325px;
	}

	.project-details {
		flex-direction: column;
	}

	.section {
		grid-area: section;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 5px;
	}

	.btn {
		padding: 10px 5px 8px 5px;
		font-size: 0.85rem;
	}

	.toggle-theme {
		padding-left: 40px;
	}

	.desire {
		padding-right: 40px;
	}

	iframe {
		border-radius: 14px;
		width: 250px; 
	}

}