/* gameboy.css - Slim GameBoy framework */

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

:root {
    --gb-0: #9bbc0f;
    --gb-1: #8bac0f;
    --gb-2: #306230;
    --gb-3: #0f380f;
}

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

html,body{height:100%;font-family:'Press Start 2P',monospace;font-size:12px;background:var(--gb-0);color:var(--gb-3);line-height:1.6}

body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(to bottom,transparent,transparent 2px,rgba(15,56,15,.03)2px,rgba(15,56,15,.03)4px);pointer-events:none;z-index:1000}

h1,h2,h3,h4,h5{margin-bottom:1rem}
h1{font-size:1.5rem}
h2{font-size:1.2rem}
h3{font-size:1rem}
h4{font-size:0.8rem}
h5{font-size:0.5rem}

.container{width:100%;margin:0 auto;padding:1rem;max-width:1200px}

.row{display:flex;flex-wrap:wrap}
.col{flex:1;padding:.5rem}
.col-6{flex:0 0 50%}
.col-4{flex:0 0 33.33%}
.col-3{flex:0 0 25%}

/* Standard buttons */
button,.button{display:inline-block;padding:.75rem 1rem;font-size:12px;text-align:center;text-decoration:none;color:var(--gb-3);background:var(--gb-0);border:2px solid var(--gb-3);cursor:pointer;transition:all .1s;font-family:'Press Start 2P',monospace}

button:hover,.button:hover{background:var(--gb-1);transform:translate(-1px,-1px)}
button:active,.button:active{transform:translate(1px,1px)}

/* GameBoy A/B circular buttons */
.btn-gameboy{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:var(--gb-1);border:3px solid var(--gb-3);color:var(--gb-3);font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer;transition:all .1s;box-shadow:3px 3px 0 var(--gb-3),inset -2px -2px 4px rgba(0,0,0,.2),inset 2px 2px 4px rgba(255,255,255,.2)}

.btn-gameboy:hover{background:var(--gb-0);transform:scale(1.05)}
.btn-gameboy:active{transform:scale(.95);box-shadow:1px 1px 0 var(--gb-3),inset -1px -1px 2px rgba(0,0,0,.3),inset 1px 1px 2px rgba(0,0,0,.1)}

/* GameBoy START/SELECT buttons */
.btn-control{display:inline-flex;align-items:center;justify-content:center;width:60px;height:25px;background:var(--gb-2);border:2px solid var(--gb-3);border-radius:12px;color:var(--gb-0);font-family:'Press Start 2P',monospace;font-size:8px;cursor:pointer;transition:all .1s;box-shadow:1px 1px 0 var(--gb-3),inset -1px -1px 2px rgba(0,0,0,.2)}

.btn-control:hover{background:var(--gb-1);color:var(--gb-3)}
.btn-control:active{transform:scale(.95);box-shadow:0 0 0 var(--gb-3),inset -1px -1px 1px rgba(0,0,0,.3)}

input,textarea,select{width:100%;padding:.75rem;margin-bottom:1rem;border:2px solid var(--gb-3);background:var(--gb-0);color:var(--gb-3);font-family:'Press Start 2P',monospace;font-size:12px}

input:focus,textarea:focus,select:focus{outline:none;background:var(--gb-1)}

input[type="radio"],input[type="checkbox"]{width:auto;height:auto;margin-right:.5rem;accent-color:var(--gb-2)}

/* Select dropdown styling - If anyone can get a better implementation. Let me know*/
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230f380f' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:12px 8px;padding-right:2.5rem}

label{display:block;margin-bottom:.5rem;font-size:10px}

.box{padding:1rem;border:2px solid var(--gb-3);background:var(--gb-0);margin-bottom:1rem}

.alert{padding:1rem;border:2px solid var(--gb-3);background:var(--gb-0);margin-bottom:1rem}
.alert-info{background:var(--gb-0)}
.alert-warning{background:var(--gb-1)}
.alert-danger{background:var(--gb-2);color:var(--gb-0)}

.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,56,15,.8);justify-content:center;align-items:center;z-index:999}
.modal-content{background:var(--gb-0);padding:2rem;border:2px solid var(--gb-3);max-width:90%}

.progress{width:100%;background:var(--gb-2);border:2px solid var(--gb-3);height:1.5rem;margin-bottom:1rem}
.progress-bar{height:100%;background:var(--gb-1);transition:width .2s}
.progress-bar-25{width:25%}
.progress-bar-50{width:50%}
.progress-bar-75{width:75%}
.progress-bar-100{width:100%}

.code-container{background:var(--gb-2);color:var(--gb-0);border:2px solid var(--gb-3);padding:1rem;font-family:'Press Start 2P',monospace;font-size:10px;margin-bottom:1rem;white-space:pre-wrap}

a{color:var(--gb-3);text-decoration:none;border-bottom:1px solid var(--gb-3)}
a:hover{color:var(--gb-2)}

.text-center{text-align:center}
.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}

@media(max-width:768px){.col{flex:0 0 100%}}