/*BASE STYLES - MOBILE (0 à 480px)*/
body {
  background-color: #ebebeb; 
  margin: 0;
  padding: 0;
}

.general {
    display: flex;
    justify-content: center;
}

.frame {
    margin-top: 2rem;
    width: 280px;
    height: 450px;
}

.a {
    margin-top: 2rem;
    margin-left: 5.5rem;
    display: flex;
}

#a1, #a2, #a3, #a4, #a5, #a6 {
    width: 15px;
    height: 15px;
    background-color: red;
}

.b {
    display: flex;
    margin-left: 4.5rem;
}

#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b10 {
    width: 15px;
    height: 15px;
    background-color: red;
}

.c {
    display: flex;
    margin-left: 4.5rem;
}

#c1, #c2, #c3 {
    width: 15px;
    height: 15px;
    background-color: rgb(165, 92, 24);
}

#c7 {
    width: 15px;
    height: 15px;
    background-color: rgb(0, 0, 0);
}

#c4, #c5, #c6, #c8 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

.d {
    display: flex;
    margin-left: 3.57rem;
}

#d1, #d3 {
    width: 15px;
    height: 15px;
    background-color: rgb(165, 92, 24);
}

#d2, #d4, #d5, #d6, #d7, #d9, #d10, #d11 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

#d8 {
    width: 15px;
    height: 15px;
    background-color: rgb(0, 0, 0);
}

.e {
    display: flex;
    margin-left: 3.57rem;
}

#e1 {
    width: 15px;
    height: 15px;
    background-color: rgb(165, 92, 24);
}

#e3, #e4 {
    width: 15px;
    height: 15px;
    background-color: rgb(165, 92, 24);
}

#e9 {
    width: 15px;
    height: 15px;
    background-color: rgb(0, 0, 0);
}

#e2, #e5, #e6, #e7, #e8, #e10, #e11, #e12 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

.f {
    display: flex;
    margin-left: 3.57rem;
}

#f1, #f2 {
    width: 15px;
    height: 15px;
    background-color: rgb(165, 92, 24);
}

#f3, #f4, #f5, #f6, #f7 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

#f8, #f9, #f10, #f11, #f12 {
    width: 15px;
    height: 15px;
    background-color: rgb(0, 0, 0);
}

.g {
    display: flex;
    margin-left: 5.5rem;
}

#g1, #g2, #g3, #g4, #g5, #g6, #g7, #g8 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

.h {
    display: flex;
    margin-left: 4.5rem;
}

#h1, #h2 {
    width: 15px;
    height: 15px;
    background-color: red;
}

#h3 {
    width: 15px;
    height: 15px;
    background-color: rgb(70, 102, 245);
}

#h4, #h5, #h6 {
    width: 15px;
    height: 15px;
    background-color: red;
}

.i {
    display: flex;
    margin-left: 3.57rem;
}

#i1, #i2, #i3 {
    width: 15px;
    height: 15px;
    background-color: red;
}

#i4, #i7 {
    width: 15px;
    height: 15px;
    background-color: rgb(70, 102, 245);
}

#i5, #i6, #i8, #i9, #i10 {
    width: 15px;
    height: 15px;
    background-color: red;
}

.j {
    display: flex;
    margin-left: 2.63rem;
}

#j1, #j2, #j3, #j4{
    width: 15px;
    height: 15px;
    background-color: red;
}

#j5, #j6, #j7, #j8 {
    width: 15px;
    height: 15px;
    background-color: rgb(70, 102, 245);
}

#j9, #j10, #j11, #j12 {
    width: 15px;
    height: 15px;
    background-color: red;
}

.k {
    display: flex;
    margin-left: 2.63rem;
}

#k1, #k2, #k11, #k12 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

#k3, #k10 {
    width: 15px;
    height: 15px;
    background-color: red;
}

#k4, #k6, #k7, #k9 {
    width: 15px;
    height: 15px;
    background-color: rgb(70, 102, 245);
}

#k5, #k8 {
    width: 15px;
    height: 15px;
    background-color: rgb(252, 238, 51);
}

.l {
    display: flex;
    margin-left: 2.63rem;
}

#l1, #l2, #l3, #l10, #l11, #l12 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

#l4, #l5, #l6, #l7, #l8, #l9 {
    width: 15px;
    height: 15px;
    background-color: rgb(70, 102, 245);
}

.m {
    display: flex;
    margin-left: 2.63rem;
}

#m1, #m2, #m11, #m12 {
    width: 15px;
    height: 15px;
    background-color: rgb(248, 203, 161);
}

#m3, #m4, #m5, #m6, #m7, #m8, #m9, #m10 {
    width: 15px;
    height: 15px;
    background-color: rgb(70, 102, 245);
}

.n {
    display: flex;
    margin-left: 4.5rem;
}

#n4 {
    margin-left: 2.9rem;
}

#n1, #n2, #n3, #n4, #n5, #n6 {
    width: 15px;
    height: 15px;
    background-color: rgb(70, 102, 245);
}

.o {
    display: flex;
    margin-left: 3.5rem;
}

#o4 {
    margin-left: 4.9rem;
}

#o1, #o2, #o3, #o4, #o5, #o6 {
    width: 15px;
    height: 15px;
    background-color: rgb(124, 69, 18);
}

.p {
    display: flex;
    margin-left: 2.57rem;
}

#p5 {
    margin-left: 4.87rem;
}

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8 {
    width: 15px;
    height: 15px;
    background-color: rgb(124, 69, 18);
}


/*GRAND MOBILE (481px et plus)*/

@media (min-width: 481px) {

}

/*MOBILE LANDSCAPE / PHABLET (576px et plus)*/

@media (min-width: 576px) {
  
}

/*TABLETTE PORTRAIT (768px et plus)*/

@media (min-width: 768px) {


}

/*TABLETTE LANDSCAPE (992px et plus)*/

@media (min-width: 992px) {

}

/*DESKTOP (1024px et plus)*/

@media (min-width: 1024px) {                                                                                                              

}

/*LARGE DESKTOP (1280px et plus)*/

@media (min-width: 1280px) {

}

/* EXTRA LARGE DESKTOP (1920px et plus)*/

@media (min-width: 1920px) {

}