/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rowdies:wght@300;400;700&family=Ubuntu:ital,wght@0,500;0,700;1,400&display=swap');
:root{
    --black-color: rgb(51, 51, 51);
    --white-color: #fff;
    --nav-background: #1a1a1a;
    --nav-background-sub: #8e8e8e;
    --page-1: rgba(13, 18, 40, 0.803); 
    --purple: rgb(234, 51, 219);
    --orange: rgb(255, 108, 29);
    --yellow: yellow;
}
/*--nav-background: #1c1d26;
    --nav-background-sub: #2c2b45;*/
.nav-header {
    font-size: 1.2rem;
    text-align: center;
    color: var(--white-color);
    font-family: "poppins";
}
.main-header {
    font-size: 1.2rem;
    text-align: center;
    color: var(--white-color);
    margin: 0px;
    font-weight: lighter;
    font-family: "poppins";
}
.main-header-1{
    font-size: 3rem;
    text-align: center;
    color: var(--orange);
    font-family: "poppins";
    margin-top: 0px;
}
.main-header-4 {
	letter-spacing: 1rem;
    font-size: 5rem;
    margin-top: 0px;
	color: var(--white-color);
	font-family: "Share Tech", sans-serif;
}
.main-header-2{
    font-size: 1.5rem;
    text-align: center;
    color: var(--white-color);
    opacity: .6;
    margin-top: -40px;
    font-family: "poppins";
}
.main-header-3{
    font-size: 1.5rem;
	letter-spacing: .2rem;
	margin: 10px;
    color: var(--white-color);
    font-family: "poppins";
	font-weight: bold;
}
.main-body {
    font-size: 1.0rem;
    text-align: center;
	font-style: italic;
    color: var(--white-color);
    font-family: "poppins";
}
.main-body-1 {
    font-size: 1.0rem;
    text-align: center;
	font-style: italic;
    color: var(--black-color);
    font-family: "poppins";
}
.main-body-2 {
    font-size: 1.2rem;
    text-align: center;
    color: var(--white-color);
    font-family: "poppins";
}
.main-body-3 {
    font-size: 1.2rem;
    text-align: center;
    color: var(--white-color);
    font-family: "poppins";
}
.main-body-4 {
    font-size: 2.2rem;
    text-align: center;
    color: var(--white-color);
    font-family: "ShareTech", sans-serif;
}
.main-body-b {
	font-size: 1.0rem;
    text-align: center;
	font-style: italic;
    color: var(--black-color);
    font-family: "poppins";
}
.main-body-w {
	font-size: 1.0rem;
    text-align: center;
	font-style: italic;
    color: var(--white-color);
    font-family: "poppins";
}
.main-body-2-b {
	font-size: 1.2rem;
    text-align: center;
    color: var(--black-color);
    font-family: "poppins";
	font-style: italic;
}
.main-body-2-w {
	font-size: 1.2rem;
    text-align: center;
    color: var(--white-color);
    font-family: "poppins";
	font-style: italic;
}
/*backgrounds*/
@keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
#about-me {
    background:
	linear-gradient(
		rgb(7, 0, 7),
		transparent
	),
	linear-gradient(
		-45deg,
		rgb(0, 0, 0),
		transparent
	),
	linear-gradient(
		45deg,
		rgb(7, 0, 7),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#website-1 {
    background:
	linear-gradient(
		rgb(255, 255, 255),
		transparent
	),
	linear-gradient(
		-45deg,
		rgba(211, 177, 177, 0.55),
		transparent
	),
	linear-gradient(
		45deg,
		rgba(183, 206, 184, 0.649),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#education {
    background:
	linear-gradient(
		rgb(7, 0, 7),
		transparent
	),
	linear-gradient(
		-45deg,
		rgb(0, 0, 0),
		transparent
	),
	linear-gradient(
		45deg,
		rgb(7, 0, 7),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#sneaker-spot {
    background:
	linear-gradient(
		rgb(27, 27, 27),
		transparent
	),
	linear-gradient(
		-45deg,
		rgb(1, 11, 15),
		transparent
	),
	linear-gradient(
		45deg,
		rgba(255, 250, 236, 0.135),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#web-exercises {
    background:
	linear-gradient(
		rgb(229, 229, 229),
		transparent
	),
	linear-gradient(
		-45deg,
		rgba(129, 56, 121, 0.55),
		transparent
	),
	linear-gradient(
		45deg,
		rgb(177, 177, 177),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#photography {
    background:
	linear-gradient(
		rgb(229, 229, 229),
		transparent
	),
	linear-gradient(
		-45deg,
		rgba(56, 129, 77, 0.55),
		transparent
	),
	linear-gradient(
		45deg,
		rgb(177, 177, 177),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#artwork {
    background:
	linear-gradient(
		rgb(229, 229, 229),
		transparent
	),
	linear-gradient(
		-45deg,
		rgba(129, 56, 56, 0.55),
		transparent
	),
	linear-gradient(
		45deg,
		rgb(177, 177, 177),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#video-editing {
    background:
	linear-gradient(
		rgb(229, 229, 229),
		transparent
	),
	linear-gradient(
		-45deg,
		rgba(56, 125, 129, 0.55),
		transparent
	),
	linear-gradient(
		45deg,
		rgb(177, 177, 177),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}

#contacts {
    background:
	linear-gradient(
		rgb(7, 0, 7),
		transparent
	),
	linear-gradient(
		-45deg,
		rgb(0, 0, 0),
		transparent
	),
	linear-gradient(
		45deg,
		rgb(7, 0, 7),
		transparent
	);
background-blend-mode: multiply;
animation: gradient-animation 60s ease infinite;
background-size: 180% 180%;
}