body {
    background: #090909;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-family: 'Calibri', sans-serif;
}
a {
    color: white;
}
a:visited {
	color: #c9c9c9;
}
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);
}
.shop-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: orangered;
    color: white;
}
.shop-now:hover {
    color: yellow;
    padding: 1rem;
    border: 1px solid yellow;
    cursor: pointer;
}
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: 'Georgia', serif;
}
.personal-carton {
    padding-top: 3rem;
    text-align: center;
}
.personal-carton img {
    max-width: 630px;
}
.personal-basics-list {
    text-align: center;
}
.personal-basics-list ul {
    list-style-type: none;
}
aside {
    grid-area: aside;
    background-color: #090909;
    border: 1rem solid #00ffff;
    color: #ffffff;
}
aside > h4 {
    text-align: center;
    font-size: xxx-large;
}
.sidebar-personal-logo img {
    max-width: 260px;
}
.highight-list {
    list-style-type: '\2713';
}
.related {
    list-style-type: '\1F517';
}
#contact-email, #contact-email-light {
	list-style-type:'\1F4E7';
}
#contact-phone, #contact-phone-light {
	list-style-type:'\1F4F1';
}
aside ul li {
    padding: 1rem 0;
}
.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;
}
.highight-list {
    margin: 1rem;
    padding: 1rem;
    font-size: x-large;
    font-family: 'Georgia', serif;
    color: green;
}
.highight-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);
}
@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-gallery {
        grid-template-columns: 1fr 1fr;
    }
    .highight-list, .related-personals, .more-personals {
        text-align: center;
        margin-left: 0;
    }
}
@media screen and (max-width: 800px) {
    .project-gallery {
        grid-template-columns: 1fr;
    }
    .personal-description {
        font-size: large;
    }
    .personal-carton img {
        max-width: 400px;
    }
    /*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;
        background-color: #ea8dff;
    }
    .personal-carton 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;
    }
}