* {
    box-sizing:border-box;
}

img {
    max-width:100%;
}

body {
    overflow:hidden;
    background-image: url("img/bg.jpg");
    background-size:cover;
}

/* .topbar {
    background:yellow;
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
    
} */

button {
    /* background:#a3b8ce; */
    width:200px;
    height:60px;
    font-size:larger;
    border:none;
    font-family:'Courier New', Courier, monospace;
    color:#294629;
}

button.hover {
    background:green;
}

.page {
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:20px;
}

.container {
    /* background:#a3b8ce; */
    width:600px;
    height:600px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap:wrap;
    padding:20px;
}



.box {
    width:130px;
    height:130px;
    border:solid 1px white;
}


.hidden {
    position:relative;
    left:200vw;
}

/* .a {
    background:red;
}

.b {
    background:orange;
}

.c {
    background:yellow;
}

.d {
    background:greenyellow;
}

.e {
    background:green;
}

.f {
    background:teal;
}

.g {
    background:blue;
}

.h {
    background:indigo;
}

.i {
    background:purple;
}

.j {
    background:magenta;
}

.k {
    background:pink;
}

.l {
    background:brown;
}

.m {
    background:gray;
}

.n {
    background:black;
}

.o {
    background:whitesmoke;
}

.p {
    background:#00fff7;
} */