:root {
	--background: white;
	--text-primary: rgb(60, 60, 60);
	--text-secondary: rgb(120, 120, 120);
	--accent: rgb(214, 241, 236);
	--links: #a70b0b;
}

[data-theme="dark"] {
	--background: rgb(30, 30, 30);
	--text-primary: white;
	--text-secondary: rgb(200, 200, 200);
	--accent: rgb(42, 63, 58);
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
		sans-serif;
}

.main {
	color: var(--text-primary);
	background-color: var(--background);
	font-size: large;
	font-weight: bold;
	padding: 20px;
	height: calc(100vh - 40px);
	transition: all 0.5s;
}

.switcher {
	color: var(--text-primary);
	background-color: var(--background);
	float: right;
	transition: all 0.5s;
	outline: none;
	border: none;
	font-size: 1.75rem;
	cursor: pointer;
}

.switcher:hover {
	transform: rotate(20deg);
}

.icon {
	color: var(--text-primary);
}

.header {
	padding-bottom: 48px;
}

.mid-section {
	max-width: 600px;
	width: 80%;
	margin: 0 auto;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

.links-section {
	justify-content: space-between;
}

.section {
	display: flex;
}

.section-title {
	flex-grow: 0;
	min-width: 60px;
	padding-right: 32px;
	color: var(--text-secondary);
}

.section-text {
	flex-grow: 1;
}

.styled-link {
	color: var(--links) !important; /*transparent;*/
	text-decoration: none;
	/*background-color: var(--accent);*/
}

/*
.company1:hover {
	transition: 400ms;
	background-color: rgb(60, 126, 184);
}

.company2:hover {
	transition: 400ms;
	background-color: rgb(17, 33, 136);
}

.company3:hover {
	transition: 400ms;
	background-color: rgb(83, 118, 230);
}

.company4:hover {
	transition: 400ms;
	background-color: rgb(43, 156, 109);
}

.company5:hover {
	transition: 400ms;
	background-color: rgb(206, 116, 206);
}
*/