body {
	background-color: black;
	color: white;
}
body.day {
	background-color: white;
	color: black;
}

.complete-container {
	/* border: 5px solid yellow; */
	width: 98vw;
	height: 97vh;
}
.header-container {
	position: relative;
	/* border: 5px solid green; */
	width: 100%;
	height: 200px;
}
.btn-theme {
	width: 200px;

	height: 200px;
	position: absolute;
	right: 0%;
	top: -10%;
	font-size: 120px;
	background-color: transparent;
	display: flex;
	justify-content: center;
	border: none;
	align-items: center;
}

.day {
	background-color: white;
	color: rgb(168, 6, 6);
}
.logo {
	/* border: 5px solid red; */
	width: 200px;
	height: 190px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 90px;
}
.navigation-container {
	width: 70%;
	max-width: 1500px;
	display: flex;
	height: 150px;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* border: 5px solid blue; */
}
.header-table {
	width: 100%;
}
.header-row {
	font-size: clamp(1px, 2vw, 30px);
	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	padding: 2vw;
	cursor: pointer;

	/* border: 5px solid green; */
}

.header-row:visted {
	text-decoration: none;
}
.header-row:hover {
	color: rgb(3, 180, 230);
	text-decoration: underline;
}
hr {
	position: absolute;
	border: none;

	height: 5px;
	background: rgb(248, 248, 248);
	width: 100%;
}
.day hr {
	position: absolute;
	border: none;

	height: 5px;
	background: rgb(8, 8, 8);
	width: 100%;
}
.complete-home-dis {
	border: 5px solid white;
	width: 100%;
	height: 80%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}
.day .complete-home-dis {
	border: 5px solid rgb(3, 3, 3);
	width: 100%;
	height: 80%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}
.home-container {
	position: relative;
	/* border: 5px solid purple; */
	width: 45%;
	height: 80%;
	display: flex;
	margin-left: 5%;
	justify-content: center;
	align-items: center;
}
.home-sub {
	/* border: 5px solid blue; */
	text-align: center;
	width: 100%;
	height: 70%;
}

.skills {
	/* border: 5px solid green; */
	width: 40%;
	height: 10%;
	font-size: clamp(5px, 1vw, 30px);
	margin: 0 auto;
	margin-bottom: -40px;
}
.skills-cell {
	border-right: 2px solid white;
}
.skills-cell:last-child {
	border-right: none;
}
h1 {
	font-size: clamp(5px, 7vw, 110px);
	margin: 20px;
}
h3 {
	font-size: clamp(5px, 2vw, 22px);
	margin: 0 auto;
	/* background-color: red; */
	width: 70%;
	line-height: 30px;

	height: 20%;
	text-align: start;
}

.desc-small-btn {
	/* border: 5px solid green; */
	width: 100%;
	height: 15%;
	display: flex;
	justify-content: center;
	align-items: center;
}
button {
	border-radius: 40px;
	width: 20%;
	height: 80%;
	font-size: clamp(2px, 2vw, 15px);
	font-family: "Courier New", Courier, monospace;
}
#cube-container {
	width: 30%;
	height: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* border: 5px solid red; */
}

.complete-service {
	display: none;
	width: 99%;
	height: 80%;
	/* border: 5px solid white; */
}
.service-sub {
	display: flex;
	/* border: 5px solid green; */
	width: 80%;
	margin: 0 auto;
	height: 90%;
}
.service-left {
	/* border: 5px solid rgb(250, 248, 248); */
	width: 50%;
	height: 100%;
	margin-left: 0%;
}

.service-header {
	/* border: 5px solid blue; */
	width: 40%;
	position: relative;
	height: 15%;
	display: flex;
	padding: 0;
	justify-content: center;
	align-items: center;
	font-size: clamp(2px, 5vw, 105px);
	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.sh-design {
	background-color: red;
	width: 40%;
	left: 5%;
	top: 5%;
}
.sh-build {
	background-color: yellow;
	color: black;
	left: 45%;
	top: 0%;
}
.sh-and {
	top: -3%;
	left: 20%;
	background-color: orange;
	width: 25%;
}
.sh-manage {
	background-color: aqua;
	color: black;
	top: -7%;
	left: 45%;
}
.sh-user {
	top: -10%;
	left: 20%;
	background-color: rgb(2, 168, 2);
	width: 25%;
}
.sh-friendly {
	background-color: pink;
	color: black;
	top: -15%;
	left: 45%;
}
.sh-websites {
	background-color: blue;
	width: 50%;

	top: -15%;
	left: 20%;
}
.service-right {
	border: 5px solid white;
	width: 50%;
	height: 100%;
}
.day .service-right {
	border: 5px solid rgb(9, 9, 9);
	width: 50%;
	height: 100%;
}
.service-right-header {
	width: 100%;
	height: 20%;
	/* border: 5px solid green; */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2px, 5vw, 105px);
	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	text-decoration: underline;
}
.service-i-do {
	/* border: 5px solid yellow; */
	width: 80%;
	margin: 0 auto;
	font-size: clamp(2px, 3vw, 60px);
	height: 70%;
}
.serice-point {
	margin: 30px;
}
.complete-about-me {
	display: none;
	width: 99%;
	height: 80%;
	/* border: 5px solid white; */
}
.about-me-sub {
	/* border: 5px solid green; */
	margin-left: 5%;
	margin-top: -0.2%;
	width: 40%;
	height: 90%;
}
.about-me-header {
	border: 5px solid rgb(248, 248, 248);
	margin: 0 auto;
	width: 100%;
	height: 20%;
	margin-top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2px, 5vw, 90px);
}
.about-me-text {
	text-indent: 2em;

	padding: 20px;
	/* border: 5px solid blue; */
	display: flex;
	font-size: clamp(2px, 5vw, 35px);
	justify-self: center;
	width: 80%;
	height: 60%;
	text-align: start;
}
.complete-portfilo {
	display: none;
	width: 99%;
	height: 80%;
	/* border: 5px solid white; */
}
.portfilo-sub {
	/* border: 5px solid green; */
	margin: 0 auto;
	width: 80%;
	height: 95%;
}
.portfilo-header {
	/* border: 5px solid rgb(0, 247, 222); */
	margin: 0 auto;
	width: 100%;
	height: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2px, 7vw, 120px);
}
/* ////////////////////////// */
.portfilo-table {
	display: table;
	table-layout: fixed;
	margin: 0 auto;
	width: 95%;
	height: 10%;
	text-align: center;
}
.portfilo-row-cell {
	border: 5px solid white;

	font-size: clamp(2px, 3vw, 50px);
}
.day .portfilo-row-cell {
	border: 5px solid rgb(7, 7, 7);

	font-size: clamp(2px, 3vw, 50px);
}
.pic-1 {
	width: 95%;
}
.pic-2 {
	width: 95%;
}
.pic-3 {
	width: 95%;
}

/* //////////////////////// */
.complete-contact {
	display: none;
	width: 99%;
	height: 80%;
	/* border: 5px solid white; */
}
.contact-sub {
	border: 5px solid rgb(255, 255, 255);
	margin: 0 auto;

	width: 50%;
	height: 55%;
}

.contact-header {
	/* border: 5px solid rgb(128, 0, 0); */
	margin: 0 auto;
	width: 100%;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2px, 7vw, 120px);
}
.contact-email {
	/* border: 5px solid rgb(0, 94, 128); */
	margin: 0 auto;
	width: 100%;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2px, 3vw, 60px);
}
.contact-phone {
	/* border: 5px solid rgb(0, 94, 128); */
	margin: 0 auto;
	width: 100%;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2px, 3vw, 60px);
}