/*ex-oc-4-2-0*/


body {
    font-family: 'Comme', sans-serif;
    color:rgb(99, 10, 182);
    width: auto;
    height: auto;
}


header{
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url("../images_oc/oc23.jpeg");
    background-size: cover;
    background-attachment: fixed; 
    border-radius: 25px;

    font-size: 2.5em;
    font-weight: bold;
    padding: 1%; 
}



main{
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 2fr;
    grid-template-rows: 0.16fr 0.62fr 0.16fr 1.54fr 0.16fr 0.8fr;

     
    border-radius: 15px;
    border: 1px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px inset;
    background-color: rgba(229, 242, 250, 0.7);

    margin: 1% 0.3% 0.3% 0.3%;
    padding: 0.8%;


    
}



.c1{
    grid-row: 1/2;
    grid-column: 1/2;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-size: 1.5em;
    font-weight: bold;

    margin-right: 4%;
}

.c1a{  
    grid-row: 2/3;
    grid-column: 1/2;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-size: 2.5em;
    font-weight: bold;

    margin-bottom: 4%;
    margin-right: 4%;
}

.c2{
    grid-row: 1/2;
    grid-column: 2/4;
 
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-size: 1.5em;
    font-weight: bold;

}

.c3{
    grid-row: 2/3;
    grid-column: 2/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-size: 1.15em;

    padding: 1%;
    margin-bottom: 1.5%;

}

.c4{
    grid-row: 3/4;
    grid-column: 1/4;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-weight: bold;
    font-size: 1.5em;
    

}

.c5{
    grid-row: 4/5;
    grid-column: 1/4;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-size: 1.15em;
    padding: 1%;

    margin-bottom: 1.5%;

}


.c6 {
    grid-row: 5/6;
    grid-column: 1/3;
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-weight: bold;
    font-size: 1.5em;

}

.c7{
    grid-row: 6/7;
    grid-column: 1/3;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    padding: 0.5%;

}

.c7a{
    width: 100%;
    height: 200px;
    border-radius: 18px;
}

.c6-8 {
    font-size: 0.6em;
}

.c8{
    grid-row: 5/6;
    grid-column: 3/4;
    display: flex;
    justify-content: center;
    align-items: center;


    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    font-weight: bold;
    font-size: 1.5em;


}

.c9{
    grid-row: 6/7;
    grid-column: 3/4;

    border-radius: 15px;
    border: 0.5px solid rgb(95, 185, 238); 
    box-shadow: rgb(95, 185, 238) 1px 1px 12px;
    background-color: rgba(229, 242, 250, 0.7);

    padding: 0.5%;
    
}

.c9a{
    width: 100%;
    height: 200px;
    border-radius: 18px;
}


.bf {
    font-weight: bold;
    color: rgb(30, 112, 206);
    
    border-radius: 15px;
    border: 0.5px solid rgb(30, 112, 206); 
    box-shadow: rgb(30, 112, 206) 1px 1px 3px;
    background-color: rgba(215, 238, 253, 0.7);
    padding: 0.5px 10px 0.5px 10px;
}

.bc {
    font-weight: bold;
    color: rgb(94, 197, 245);
    
    border-radius: 15px;
    border: 0.5px solid rgb(94, 197, 245); 
    box-shadow: rgb(94, 197, 245) 1px 1px 3px;
    background-color: rgba(217, 239, 250, 0.7);
    padding: 0.5px 10px 0.5px 10px;
}

.or {
    font-weight: bold;
    color: rgb(233, 161, 5);
    
    border-radius: 15px;
    border: 0.5px solid rgb(218, 158, 48); 
    box-shadow: rgb(218, 158, 48) 1px 1px 3px;
    background-color: rgba(248, 240, 224, 0.7);
    padding: 0.5px 10px 0.5px 10px;
}

.v {
    font-weight: bold;
    color: rgb(10, 177, 123);
    
    border-radius: 15px;
    border: 0.5px solid rgb(10, 177, 123); 
    box-shadow: rgb(10, 177, 123) 1px 1px 3px;
    background-color: rgba(227, 248, 241, 0.7);
    padding: 0.5px 10px 0.5px 10px;
}


@media screen and (max-width: 1100px) {
    header {
        font-size: 25px;
    }
}

@media screen and (max-width: 960px) {
    body {
        orientation: landscape;
    }
    main {
        grid-template-rows: auto;
    }
    header {
        font-size: 15px;
    }
    main{
        grid-template-columns: 1.2fr 0.5fr 2fr;

    }

    
    .c1 {
        font-size: 16px;
        padding: 1%;
    }
    .c1a {
        font-size: 16px;
        padding: 1%;
    }
    .c2 {
        font-size: 16px;
        padding: 1%;
    }
    .c3 {
        font-size: 16px;
        padding: 2%;
    }
    .c4 {
        font-size: 16px;

    }
    .c5 {
        font-size: 14px;
        padding: 2%;
    }
    .c6 {
        font-size: 14px;
        padding: 1%;
    }
    .c8 {
        font-size: 14px;
        padding: 1%;
    }
    .c7a {
        orientation: landscape;
    }
    .c9a {
        orientation: landscape;
    }
}