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

:root {
 --background1color: #f9f9fc;
 --background2color: #EEEDF2;
 --linecolor: #2A2A2E;
 --buttoncolor: #9296C4;
 --buttonhovercolor: #666cb7;
 --accentcolor: #7B82C4;
 --textcolor: #1C1C1F;
 --darkcolor: #2A2A2E;
 --linkhovercolor: #7B82C4;
 --gamebgcolor: #F0EFF5;
 --gamebordercolor: #C0BFD0;
}

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

body, h1, h2, p, a {
 margin: 0;
 padding: 0;
 font-family: 'Quattrocento Sans', sans-serif;
}

html {
 height: 100%;
 scroll-behavior: smooth;
}
body {
 background-color: var(--background1color);
 color: var(--textcolor);
 line-height: 1.6;
 display: flex;
 flex-direction: column;
 height: 100%;
}

h2 {
 font-size: 1.3rem;
 margin-bottom: 14px;
 padding-bottom: 6px;
 border-bottom: 2px solid var(--accentcolor);
 display: inline-block;
 color: var(--textcolor);
}

a {
 color: inherit;
 text-decoration: none;
 border-bottom: 1px dotted var(--darkcolor);
}
a:hover {
 border-bottom-color: var(--linkhovercolor);
 color: var(--linkhovercolor);
}

main {
 padding: 30px 20px;
 flex: 1;
 max-width: 740px;
 margin: 0 auto;
 width: 100%;
}
section {
 margin-bottom: 40px;
 padding-top: 10px;
}

.nav-links {
 display: flex;
 gap: 1.5rem;
 list-style: none;
 margin: 0;
 padding: 0;
}
.nav-links a {
 color: var(--textcolor);
 text-decoration: none;
 border-bottom: none;
 display: flex;
 align-items: center;
 gap: 0.4rem;
 font-size: 0.9rem;
 padding: 4px 10px;
 border-radius: 20px;
 transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover {
 background-color: var(--accentcolor);
 color: white;
}
.nav-links i {
 font-size: 0.95rem;
}

.breadcrumb {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
 left: 20px;
 bottom: 0;
 transform: translateY(-50%);
}
.breadcrumb a {
 color: var(--textcolor);
 text-decoration: none;
 display: flex;
 align-items: center;
 transition: color 0.2s ease;
 border-bottom: 1px dotted var(--darkcolor);
}
.breadcrumb a:hover {
 color: var(--linkhovercolor);
}

.projects ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.projects li {
 padding: 12px 16px;
 background: white;
 border-left: 3px solid var(--accentcolor);
 border-radius: 0 6px 6px 0;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
 transition: box-shadow 0.2s ease;
}
.projects li:hover {
 box-shadow: 0 2px 10px rgba(123, 130, 196, 0.2);
}

.game-container {
 background-color: var(--gamebgcolor);
 border: 1px solid var(--gamebordercolor);
 padding: 20px;
 text-align: center;
}
.game-container a {
 display: inline-block;
 margin-top: 10px;
 padding: 8px 12px;
 background-color: var(--buttoncolor);
 color: white;
 text-decoration: none;
 border-radius: 4px;
 border-bottom: none;
}
.game-container a:hover {
 background-color: var(--buttonhovercolor);
}

.center {
 margin: auto;
 padding: 10px;
 text-align: center;
}
@media (max-width: 600px) {
 main {
 padding: 20px 14px;
 }
 .nav-links {
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.8rem;
 }
}