@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	cursor: crosshair;
}

body {
	transition: 0.3s;
	font-family: 'Roboto', sans-serif;
	font-size: 0.925rem;
	color: #0b0d10;
}

.dark-theme{
	transition: 0.3s;
	background: #0b0d10;
	color: #d2daf4 !important;
}

a {
	text-decoration: none;
}

.container {
	width: 1170px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);  
}

.navbar,
.navbar>.container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

@media (max-width: 768px) {

	.navbar,
	.navbar>.container {
		display: block;
	}
}

.navbar {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	padding: 1rem 1.15rem;
}

.navbar .navbar-header>a {
	font-weight: 500;
	color: #3c4250;
}

.navbar .navbar-menu {
	display: flex;
	align-items: center;
	flex-basis: auto;
	flex-grow: 1;
}

.navbar .navbar-menu .navbar-nav {
	margin-left: auto;
	flex-direction: row;
	display: flex;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.navbar .navbar-menu .navbar-nav>li>a:hover {
	color: #66f;
}

.navbar .navbar-menu .navbar-nav>li.active a {
	color: #66f;
}

.navbar .navbar-menu .navbar-nav li a {
	color: #3c4250;
	padding: 0.25rem 1rem;
	display: block;
}

li a:hover{
	border-bottom: 0.2px solid #66f;
	transition: 0.2s;
}

.navbar .navbar-menu .navbar-nav .navbar-dropdown {
	display: block !important;
}

.navbar {
	position: relative;
}

.navbar .navbar-header>a span {
	color: #66f;
}

img.me {
	float: left;
	padding: 50px;
	top: -50px;
	left: -35px;
	display: block;
	z-index: 999;
	cursor: pointer;
	-webkit-transition-property: all;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease;
}


img.me:hover {
	padding: 50px;
	transform: scale(0.9);
}

h1.main-text {
	float: right;
	padding-right: 70px;
	padding-top: 240px;
}

h1.main-text-about{
	/*float: right;*/
	text-align: center;
	padding-top: 100px;
}

h4.small-text {
	float: right;
	padding-right: 70px;
	padding-top: 40px;
}