/* =========================
BASIC PAGE SETUP
========================= */
* {
box-sizing: border-box;
}

body {
    margin: 0;

    /* Replace this with your actual background */
    background-image: url("images/Background.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    font-family: Arial, sans-serif;
    color: white;
}


/* Everything on the page lives in here */

.page {
width: 90%;
max-width: 1200px;
min-height: 100vh;

margin: auto;
padding: 50px;
}


/* =========================
WEBSITE TITLE
========================= */

.site-header {
width: 500px;

margin-left: auto;
margin-right: 40px;
margin-bottom: 80px;

padding: 20px 40px;

background-color: #174c2c;

text-align: center;

/* optional */
border: 4px solid #0d351d;
}

.site-header h1 {
margin: 0;

font-size: 50px;
font-weight: normal;
}

.site-header p {
margin: 0;

font-size: 30px;
}


/* =========================
MAIN PAGE AREA
========================= */

.content {
display: grid;

grid-template-columns: 1.3fr 0.8fr 1fr;

gap: 25px;

align-items: center;
}


/* =========================
GREEN TEXT BOX
========================= */

.main-box {
min-height: 420px;

padding: 50px;

background-color: #174c2c;

font-size: 20px;
line-height: 1.5;

border: 4px solid #0d351d;
}


/* =========================
YELLOW NOTEBOOK
========================= */

.welcome-note {
min-height: 280px;

padding: 40px 30px;

background-color: #f4df75;

color: white;

text-align: center;

/* Makes it slightly crooked like paper */
transform: rotate(2deg);

box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.25);
}

.welcome-note p {
font-size: 20px;
line-height: 1.5;
}

.welcome-note h2 {
font-size: 35px;
}


/* =========================
PERSONAL ART AREA
========================= */

.personal-art {
min-height: 400px;

display: flex;
align-items: center;
justify-content: center;

text-align: center;

font-size: 25px;
line-height: 1.5;
}


/* =========================
MOBILE VERSION
========================= */

@media (max-width: 800px) {

.page {
width: 95%;
padding: 20px;
}

.site-header {
width: 100%;
margin: 20px 0 40px;
}

.site-header h1 {
font-size: 38px;
}

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

.main-box,
.welcome-note,
.personal-art {
width: 100%;
}
}