/* --- 1. Global Reset & Box Sizing --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #E0E7FF;
    cursor: pointer;
}

.pixelify-sans-regular {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.cutive-mono-regular {
  font-family: "Cutive Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

body {
    background: linear-gradient(187deg,rgb(0, 0, 0) 0%, rgb(5, 5, 54) 66%, rgb(21, 43, 59) 100%);
    font-family: "Cutive Mono", monospace;
    line-height: 1.6;
    background-color: #0A1931;
    color: #E0E7FF;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 18px;
}

/*Layout*/
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/*Header*/
.main-header {
    color: #E0E7FF;
    padding: 1rem 0;
    text-align: center;
    font-family: "Pixelify Sans", sans-serif;
}

.main-header h1 {
    font-size: 50px;
}


/*Main section!*/
.hero {
    padding: 40px;
    border-radius: 8px;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
}

.hero h2 {
    margin-bottom: 4px;
    font-size: 36px;
    font-family: "Pixelify Sans", sans-serif;
}

.hero h3 {
    margin-bottom: 20px;
    font-size: 28px;
    font-family: "Pixelify Sans", sans-serif;
}

.hero p {
    font-size: 20px;
}

.liTitle {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 24px;
    font-family: "Pixelify Sans", sans-serif;
}

.hero li {
    margin-bottom: 10px;
    font-size: 20px;
}

/* Projects */
#projectTitle {
    margin-bottom: 40px;
    font-family: "Pixelify Sans", sans-serif;
}

.projects {
    padding: 40px;
    text-align: center;
    border-radius: 8px;
    margin-top: 20px;
    margin-top: 30px;
    margin: 50px;
}

.InsideBoxTitle {
    font-family: "Pixelify Sans", sans-serif;
    margin-bottom: 10px;
}

/*Loopform*/
#Loopform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    border: 2px solid #185ADB;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin: 30px;
    transition: all 0.3s ease-in-out;
}
#Loopform:hover {
    background: linear-gradient(187deg,rgb(106, 18, 207) 0%, rgb(66, 116, 177) 66%, rgb(193, 128, 16) 100%);
    border-color: #ad7beb;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(11, 115, 156, 0.955);
}

/*Wordbuster*/
#Wordbuster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    border: 2px solid #185ADB;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin: 30px;
    transition: all 0.3s ease-in-out;
}
#Wordbuster:hover {
    background: linear-gradient(187deg,rgb(10, 102, 68) 0%, rgb(8, 60, 123) 66%, rgb(112, 214, 163) 100%);
    border-color: #2fa3a3;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(11, 115, 156, 0.955);
}

/*StudiLib*/
#StudiLib {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    border: 2px solid #185ADB;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin: 30px;
    transition: all 0.3s ease-in-out;
}
#StudiLib:hover {
    background: linear-gradient(187deg,rgb(159, 14, 164) 0%, rgb(130, 94, 208) 66%, rgb(16, 140, 193) 100%);
    border-color: #4365c4;
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(11, 115, 156, 0.955);
}

.project-link {
    display: block;
    color: inherit;
}

/* --- 6. Footer --- */
.main-footer {
    background: #0A1931;
    color: #E0E7FF;
    text-align: center;
    padding: 1rem 0;
    margin-top: 40px;
}

/* Pixel mountains banner */
.pixel-mountains {
    width: 100%;
    overflow: hidden;
    display: block;
}

.pixel-mountains svg {
    display: block;
    width: 100%;
    height: 140px;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

@media (max-width: 600px) {
    .pixel-mountains svg {
        height: 110px;
    }
}