@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Press Start 2P', cursive;
    background:#8ec07c;
    color:#2d3436;
    min-height:100vh;
    padding:30px;
}

/* HEADER */

header{
    text-align:center;
    margin-bottom:40px;
}

header h1{
    color:#3d2b1f;
    margin-bottom:15px;
}

header p{
    font-size:12px;
}

/* GRID */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

/* CARD */

.card{
    background:#f4e6b1;
    border:4px solid #3d2b1f;
    padding:25px;
    cursor:pointer;

    transition:0.2s;
    box-shadow:6px 6px 0 #3d2b1f;
}

.card:hover{
    transform:translateY(-5px);
}

.card h2{
    font-size:14px;
    margin-bottom:15px;
}

.card p{
    font-size:10px;
    line-height:1.6;
}

/* NOTE PAGE */

.hidden{
    display:none;
}

#notePage{
    max-width:1000px;
    margin:auto;
}

#noteTitle{
    margin:25px 0;
}

textarea{
    width:100%;
    height:450px;

    background:#fffbe6;

    border:4px solid #3d2b1f;

    padding:20px;

    resize:none;

    font-family:monospace;
    font-size:16px;
}

button{
    margin-top:20px;

    padding:15px 25px;

    border:none;

    background:#d68c45;

    color:white;

    font-family:'Press Start 2P', cursive;

    cursor:pointer;

    box-shadow:4px 4px 0 #3d2b1f;
}

.subject{
    margin-bottom:40px;
}

.subject h2{
    margin-bottom:20px;
    color:#3d2b1f;
}

.sub-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:15px;
}

.sub-card{

    background:#f4e6b1;

    border:4px solid #3d2b1f;

    padding:20px;

    cursor:pointer;

    text-align:center;

    font-size:10px;

    transition:0.2s;

    box-shadow:4px 4px 0 #3d2b1f;
}

.sub-card:hover{

    transform:translateY(-4px);
}

.search-box{

    text-align:center;

    margin-bottom:40px;
}

.search-box input{

    width:500px;
    max-width:90%;

    padding:15px;

    border:4px solid #5b3a29;

    background:#fff5d6;

    font-size:16px;

    font-family:monospace;
}

#searchResults{

    max-width:900px;

    margin:0 auto 40px auto;
}

.result-card{

    background:#fff3d1;

    border:4px solid #5b3a29;

    padding:20px;

    margin-bottom:15px;

    cursor:pointer;
}

.result-card:hover{

    background:#ffe6ad;
}