body {
    background: #090909;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-family: 'Calibri', sans-serif;
}
header, .personal-branding, .modal-content, .project-item-image, .project-item-image:hover, .personal-addition img, aside, footer {
	border-top-left-radius: 0.8rem;
	border-bottom-right-radius: 0.8rem;
}
a {
    color: white;
}
a:visited {
	color: white;
}
a:hover {
	color: #00ffff;
}
a:active {
	color: #e9e9e9;
}
header a, footer a, .project-item-card a, .project-gallery a, .learn-more-anchor {
    text-decoration: none;
}
.grid {
    display: grid;
    gap: 1rem;
    grid-template-rows: min-content auto min-content;
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
    "header aside"
    "main aside"
    "footer footer";
}
header {
    grid-area: header;
    background-color: #c9c9c9;
    text-align: center;
    font-family: 'Play', sans-serif;
	text-shadow: 1px 1px rgba(0,0,0,0.8);
	font-weight: 700;
	font-style: normal;
}
main {
    grid-area: main;
    background-color: rgba(255, 255, 255, 0);
}
.personal-branding {
    background: #c9c9c9;
    border: 1rem solid #00ffff;
}
.personal-logo img {
    max-width: 180px;
}
.personal-tagline, .personal-logo, .sidebar-personal-logo, .gold-medal {
    text-align: center;
    margin-top: 2rem;
}
.personal-tagline {
    font-size: x-large;
    color: black;
}
article {
    background-color: rgba(0, 0, 0, 0.1);
}
.hire-now {
    text-align: center;
    font-size: 2rem;
    padding: 1.3rem;
    font-weight: bold;
    width: 18rem;
    height: 5rem;
    margin: 2rem auto;
    display: flex;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid white;
    box-shadow: 1px 1px;
    background: #00ffff;
    color: white;
	text-decoration: none;
}
.hire-now:hover {
    color: yellow;
    padding: 1rem;
    border: 1px solid yellow;
	background: #c9c9c9;
    cursor: pointer;
}
.hire-now a {
	text-decoration: none;
}
.modal {
	z-index:3;
	display:none;
	padding-top:100px;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.4);
}
.modal-content {
	margin:auto;
	background-color:#fff;
	position:relative;
	padding:0;
	outline:0;
	width:600px;
}
.modal-content a {
	color: black;
	text-decoration: none;
}
.modal-content a:visited {
	color: black;
}
.modal-content a:hover {
	color: #00FFFF;
	text-decoration: underline;
}
.modal-content a:active {
	color: #090909;
}

#close-hire-modal {
	float: right;
}
.hire-now-modal-links {
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.hire-now-modal-links li {
	padding-top: 1rem;
}
.hire-now-modal-links a {
	color: black;
	font-size: 2rem;
}
article > h3 {
    text-align: center;
    font-size: 3rem;
    background-color: #090909;
    color: white;
    margin: 3rem auto;
}
.project {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}
.project-card {
    padding: 2.3rem;
    background-color: purple;
}
.project-item-image {
    border: 2rem solid #00ffff;
    padding: 2px;
    background-color: rgba(255,255,255,0.8);
}
.project-item-image:hover {
    border: 2rem solid #090909;
}
.project-item-title, .project-item-code {
    font-weight: bold;
    font-size: x-large;
}
.project-item-code {
    font-size: medium;
}
.visit-website {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    padding: 1.3rem;
    width: 18rem;
    height: 5rem;
    margin: 2rem auto;
    display: flex;
    justify-content: center;
    background-color: green;
    color: white;
    border: 1px solid white;
    border-radius: 1rem;
}
.visit-website:hover {
    color: yellow;
    padding: 1rem;
    border: 1px solid yellow;
    cursor: pointer;
}
.project-item-image, .project-item-title, .project-item-code, .gallery-image, .gallery-item-title {
    display: block;
}
.project-item-card, .gallery-item {
    text-align: center;
    margin: auto;
}
a.gallery-item {
    display: block;
    background-color: #292929;
    border-radius: 1rem;
    padding-top: 1rem;
    margin: 1rem;
}
a.gallery-item:hover {
    background-color: #a9a9a9;
}
.project-gallery {
    background-color: black;
    display: grid;
    gap: 1rem;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
img.gallery-image {
    max-width: 230px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #090909;
    border-radius: 1rem;
}
.gallery-item-title {
    font-weight: bold;
    font-size: medium;
    max-width: 10rem;
    margin: 1rem auto;
    text-overflow: ellipsis;
}
.personal-description {
    width: 70%;
    margin: 1rem auto;
    padding: 2rem;
    font-size: x-large;
    font-family: 'Play', serif;
}
.personal-description p span {
	color: #00ffff;
}
.personal-addition p {
	color: #c9c9c9;
}
.personal-addition {
    padding-top: 3rem;
    text-align: center;
}
.personal-addition img {
    max-width: 630px;
}
.personal-basics-list {
    text-align: center;
}
.personal-basics-list ul {
    list-style-type: none;
	padding-left: 0;
	font-family: 'Inter', serif;
}
.personal-basics-list ul li {
	padding-top: 27px;
}
aside {
    grid-area: aside;
    background-color: #090909;
    border: 1rem solid #00ffff;
    color: #ffffff;
	text-align: center;
}
aside > h4 {
    font-size: xxx-large;
}
.sidebar-personal-logo img {
    max-width: 260px;
	filter: invert(1);
}
.related {
    list-style-type: '\1F517';
}
#contact-email, #contact-email-light {
	list-style-type:'\1F4E7';
}
#contact-phone, #contact-phone-light {
	list-style-type:'\1F4F1';
}
#resume-light {
	list-style-type:'\1F4D1';
}
aside ul {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}
aside ul li {
    text-align: left;
    padding: 0;
    list-style-position: inside;
}
.gold-medal {
	display: block;
	max-width:300px;
	margin-left:auto;
	margin-right:auto;
}
.learn-more {
    text-align: center;
    font-size: 2rem;
    padding: 1.3rem;
    font-weight: bold;
    width: 18rem;
    height: 5rem;
    margin: 2rem auto;
    display: flex;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid white;
    box-shadow: 1px 1px;
    background: yellow;
    color: black;
}
.learn-more:hover {
    color: orangered;
    padding: 1rem;
    border: 1px solid orangered;
    cursor: pointer;
}
.highlight-list {
	list-style-type: '\2713';
    margin: 1rem;
    padding: 1rem;
    font-size: x-large;
    font-family: 'Inter', serif;
    color: green;
}
.highlight-list-tools {
	list-style-type: '\2714';
    margin: 1rem;
    padding: 1rem;
    font-size: x-large;
    font-family: 'Inter', serif;
    color: green;
}
.highlight-list-content {
    position: relative;
    left: 8px;
    color: white;
}
.related, .more {
    font-size: x-large;
}
footer {
    grid-area: footer;
    background-color: #00ffff;
    text-align: center;
    font-family: 'Inter', sans-serif;
	text-shadow: 1px 1px rgba(0,0,0,0.8);
}
#top-btn {
	font-size: 2rem;
	border: none;
}
#top-btn, #close-hire-modal button {
	background: rgba(0,0,0,0);
}
@media screen and (max-width: 1255px) {
    .grid {
        grid-template-columns: 1fr;
        grid-template-rows: min-content auto auto min-content;
        grid-template-areas: 
        "header"
        "main"
        "aside"
        "footer";
    }   
    .personals {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .project {
        grid-template-columns: 1fr 1fr;
    }
    .highlight-list, .related, .more {
        text-align: center;
        margin-left: 0;
    }
}
@media screen and (max-width: 800px) {
    .project {
        grid-template-columns: 1fr;
    }
    .personal-description {
        font-size: large;
    }
    .personal-addition img {
        max-width: 400px;
    }
	.hire-now-modal-links {
		max-width: 80%;
	}
	.modal-content {
		width: 400px;
	}
	.hire-now-modal-links {
		max-width: 90%;
	}
	.hire-now-modal-links li {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.hire-now-modal-links li::marker {
		display: block;
	}
	.hire-now-modal-links a {
		color: black;
		font-size: 1.3rem;
		font-weight: bolder;
	}
    /*header {
        grid-row: 1;
        grid-column: 1;
    }
    article {
        grid-row: 2;
        grid-column: 1;
    }
    aside {
        grid-column: 1/2;
        grid-row: 2/3;
    }*/
}
@media screen and (max-width: 460px) {
    .grid, .personals, .project-gallery {
        grid-template-columns: auto;
    }
    .project-gallery { 
        grid-template-rows: repeat(1fr);
    }
    .personal-card img {
        width: 200px;
    }
    .personal-logo img {
        max-width: 200px;
    }
    .personal-description {
        width: auto;
    }
    .personal-addition img {
        max-width: 200px;
    }
    .sidebar-personal-logo img {
        max-width: 180px;
    }
	.gold-medal {
		max-width:180px;
	}		
    aside ul {
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
    }
	.modal-content {
		width: 250px;
	}
	.hire-now-modal-links {
		max-width: 90%;
	}
	.hire-now-modal-links li {
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.hire-now-modal-links li::marker {
		display: block;
	}
	.hire-now-modal-links a {
		color: black;
		font-size: 1em;
		font-weight: bolder;
	}
}