/* :root {
  --purple: #392D78;
  --purple-accent: #6732BB;
  --dark: #1A181C;
  --grey: #707B92;
  --light: #F6F4F2;
} */

:root {
--black: #0A0005;
--purple: #3C2C7C;
--purple-accent: #6833BB;
--red-accent: #e43480;
--dark: #15141A;
--grey: #82818E;
--light: #F4F2F0;
}

/* Base reset */
* {
margin: 0;
padding: 0;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size:62.5%;
scroll-behavior:smooth;
}

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
html {
    font-size: 60%;
}
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
html {
    font-size: 58%;
}
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
html {
    font-size: 55%;
}
}


body {
background: var(--black);
font-family: 'Source Code Pro', monospace;
font-size: 1.8rem;
font-weight: 400;
line-height: 1.4;
color: var(--light);
}

h1,h2,h3 {
font-family: 'Press Start 2P', monospace;
text-align: center;
color: var(--purple-accent);
}

ul {
list-style: none;
}

a {
text-decoration: none;
background: var(--purple);
color: var(--red-accent);
}

img {
display: block;
width: 100%;
}

.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top:0;
left:0;
width:100%;
background: var(--purple);
z-index:10;
}

.nav-list {
display: flex;
margin-right: 2rem;
}

@media (max-width: 28.75em) {
.nav {
    justify-content: center;
}

.nav-list {
    margin: 0 1rem;
}
}

.nav-list a {
color: var(--light);
display: block;
font-size: 2rem;
padding: 1rem;
}

.nav-list a:hover {
background: var(--purple-accent);
}




.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #15141a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%233c2c7c' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%236833bb'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

.welcome-section > p {
font-size: 2rem;
}


.projects-section {
text-align: center;
padding: 10rem 2rem;
background: var(--purple);
}

.projects-section-header {
color: var(--dark);
max-width: 640px;
margin: 0 auto 6rem auto;
/*border-bottom: 0.2rem solid var(--dark);*/
}

.projects-section-header h2 {
color: var(--dark);
}
.projects-section-header p {
font-style: italic;
}


@media (max-width: 28.75em) {
.projects-section-header {
    font-size: 4rem;
}
}

/* "Automagic" image grid using no media queries */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
}

@media (max-width: 30.625em) {
.projects-section {
    padding: 6rem 1rem;
}

.projects-grid {
    grid-template-columns: 1fr;
}
}

.project {
background: var(--dark);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
border-radius: 5px;
}

.project:hover {
background: var(--black);
}

.project-title h3{
color: var(--grey);
}

.project:hover .project-title h3{
color: var(--red-accent);
}


.project-image {
margin: 1rem;
height: calc(100% - 6.8rem);
width: calc(100% - 2rem);
object-fit: cover;
border-radius: 10px;
}

.project-name {
padding: 0.8rem 0.5rem;
}



/* ***/


.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 80vh;
padding: 0 2rem;
background: var(--dark);
}


.contact-section-header > h2 {
font-size: 3rem;
}

@media (max-width: 28.75em) {
.contact-section-header > h2 {
    font-size: 3rem;
}
}

.contact-links {
padding: 1rem 2rem;
}

.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 2rem;
font-size: 2rem;
}

#profile-link {
color: var(--purple-accent);
background: var(--purple);
opacity: 0.8;
display: flex;
align-items: center;
}

#profile-link:hover {
color: var(--light);
background: var(--purple);
opacity: 1;
}

#profile-link .icon {
font-size: 4rem;
padding: 0 1rem 0 0;
}

.why-not {
margin: 2rem;
display: flex;
align-items: center;
justify-content: center;
}

.why-not i{
padding: 0 0.5rem;
}
.why-not p{
font-size: 1.4rem;
font-family: sans-serif;
font-style: bold;
margin: 0.5rem 0.5rem;
padding: 0 0.5rem;
background: var(--light);
color: var(--dark);
border-radius: 1rem;
}