html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    background-color: rgb(214, 211, 206);
}

.div1, .div7 {
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}

.div1 {
    height: 10%;
}

.div7 {
    height: 10%;
}

.main-div {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-rows: repeat(6, 1fr);
    width: 100%;
    height: 80%;
    column-gap: 100px;
}




.div2 {
    grid-column: 1;
    grid-row: 1 / 7;
}

.div3 {
    grid-column: 2;
    grid-row: 1 / 7;
}

.div4 {
    grid-column: 3 / 5;
    grid-row: 1;
}

.div5 {
    grid-column: 3;
    grid-row: 2 / 7;
}

.div6 {
    grid-column: 4;
    grid-row: 2 / 7;
}

.div3{
    display: flex;
    align-items: center;
    font-size: 5vh;
    color:black;
}
.div3 a{
    color:black;
    text-decoration: none;
}


.div1{
    background-color: rgb(112, 91, 91);
}

.div2{
    background-color: rgb(224, 107, 111);
}

.div3{
    background-color: rgb(151, 94, 94);
}

.div4{
    background-color: rgb(153, 63, 63);
}

.div5{
    background-color: rgb(233, 98, 98);
}

.div6{
    background-color: rgba(245, 192, 192, 0.911);
}

.div7{
    background-color: rgb(121, 40, 26);
}


.div2 img{
    scale: 50%;
    
}

.s1 {
    display: flex;
    flex-direction: row; 
    
}

.s2 img{
    scale: 90%;

}

.s3 img{
    scale: 100%;

}


.div7{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}


.div1{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}



.page2{
    background-color:rgb(255, 69, 0)
}


.page3{
    background-color: rgb(105, 15, 20)
}


.page4{
    background-color: rgb(50, 50, 50)
}

.page4{
    background-color: rgb(255, 85, 0)
}

.page5{
    background-color: rgb(255, 140, 0)
}

.page6{
    background-color: rgb(255, 165, 0)
}

.page7{
    background-color: rgb(128, 0, 0)
}

.page1
{
    background-color: rgb(128, 0, 0)
}

.page4{
    font-size: 48px; 
    text-align: center; 
    color: black; 
}

.page5{
    text-align: center;  
}

.page6{
    text-align: center; 
}

 
   


 .page6 img {
    width: 100px;
    height: auto; 
}





.p2 img {
    width: 120%; 
    height: auto;
  
}



.p1
{
    background-color: rgb(86, 129, 21)
}

.p2
{
    background-color: rgb(233, 195, 164)
}

.p3
{
    background-color: rgb(167, 68, 44)
}


.p4
{
    background-color: rgb(30, 156, 97)
}

.p5
{
    background-color: rgb(6, 73, 44)
}


.p6
{
    background-color: rgb(247, 111, 0)
}


.p7
{
    background-color: rgb(37, 20, 6)
}

.p4{
    font-size: 18px; 
    text-align: center; 
    color: black; 
}



.p5{
    text-align: center; 
    color: black; 
}



.p6{
    text-align: center; 
    color: black; 
}



.p6 img {
    width: 100px;
    height: auto; 
}





.p7
{
    background-color: rgb(37, 20, 6)
}




.s1{
    background-color: rgb(193, 196, 14) 
}




.s2{
    background-color: rgb(16, 115, 196) 
}


.s3{
    background-color: rgba(255, 187, 0, 0.596) 
}


.s4{
    background-color: rgba(14, 24, 172, 0.596) 
}



.s5{
    background-color: rgba(136, 113, 13, 0.596) 
}



.s6{
    background-color: rgba(245, 236, 185, 0.342) 
}


.s7{
    background-color: rgba(90, 77, 2, 0.342) 
}



.s6{
    text-align: center; 
    color: black; 
}

.s4{
    text-align: center; 
    color: black; 
}



.s5{
    text-align: center; 
    color: black; 
}




.s6 img {
    width: 100px;
    height: auto; 
}



.m2 img {
    width: 700px;
    height: auto; 
}





.m1{
    background-color: rgb(0, 130, 236) 
}



.m2{
    background-color: rgb(12, 80, 134) 
}
.m3{
    background-color: rgb(3, 45, 80) 
}

.m4{
    background-color: rgb(23, 76, 119) 
}
.m5{
    background-color: rgb(79, 101, 119) 
}

.m6{
    background-color: rgb(150, 190, 223) 
}



.m7{
    background-color: rgb(17, 37, 53) 
}



.m6{
    text-align: center; 
    color: black; 
}



.m5{
    text-align: center; 
    color: black; 
}



.m4{
    text-align: center; 
    color: black; 
}





.m6 img {
    width: 100px;
    height: auto; 
}
