/*  background webpage color */
body {
    background-color: #ADD8E6;
}
/*  headline color */
h1 {
    color: #00FFE6;
    margin-left: 50px;
} 
/*  First 5 links on top boxes using ox */
/*  title above whole width picture */
/*  whole width picture */
<style>

.ox {
    text-align:center;
}
.ox1, .ox2, .ox3, .ox4, .ox5 {
    width:222px;
    height:50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ox1 {
    background: #000000;
    margin-left:10;
}
.ox2 {
    background: #000000;
}
.ox3 {
    background: #000000;
}
.ox4 {
    background: #000000;
}
.ox5 {
    background: #000000;
}

@media all and (max-width: 1100px) {
    .ox1, .ox2, .ox3, .ox4, .ox5 {
        width:100%;
        display:block;
        margin:10;
    }
}
</style>
/*  Second 5 links on top boxes using oxn */
<style>

.xn {
    text-align:center;
}
.xn1 {
    background: #000000;
    margin-left:10;
	    width:222px;
    height:50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xn2 {
    background: #000000;
	    width:222px;
    height:50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xn3 {
    background: #000000;
	    width:222px;
    height:50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xn4 {
    background: #000000;
	    width:222px;
    height:50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xn5 {
    background: #000000;
	    width:222px;
    height:50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media all and (max-width: 1100px) {
    .xn1, .xn2, .xn3, .xn4, .xn5 {
        width:100%
        display:block;
        margin:10;
    }
}
</style>
/*  Three concepts: +meself,+ 5D and +ogres+ using three boxes */
<style>

.box {
    text-align:center;
}
.box1, .box2, .box3 {
    width:500px;
    height:333px;
    display:inline-block;
    margin-left:10px;
    vertical-align: bottom;
}
.box1 {
    background: #ADD8DC;
    margin-left:10;
}
.box2 {
    background: #ADD8DC;
  }
.box3 {
    background: #ADD8DC;
}
@media all and (max-width: 700px) {
    .box1, .box2, .box3 {
        width:100%
        display:block;
        margin:10;
    }
}
</style>

/*  definition of SV */

/*  vertical five boxes for socials within the middle of three boxes using bof*/
<style>

.bof {
    text-align:center;
}
.bof1, .bof2, .bof3 {
    width:500px;
    height:330px;
    display:inline-block;
    margin-left:10px;
    vertical-align: bottom;
}
.bof1 {
    background: #ADD8DC;
    margin-left:10;
}
.bof2 {
    background: #ADD8FF;

    .so {
        text-align: center;    
        
    }
    .so1, .so2, .so3, .so4, .so5 {
        
    width:500px;
    height:50px;
    display: inline-center;
    align-items: center;
    justify-content: center;
    }
        .so1 {

        background-color: #FFFFFF;
    }
        .so2 {

        background-color: #000321;
    }
        .so3 {

        background-color: #000321;
    }
        .so4 {

        background-color: #000321;
    }
        .so5 {

        background-color: #000321;
    }
    @media all and (max-width: 700px) {
    .so1, .so2, .so3, .so4, .so5 {
        width:100%
        display:block;
        margin:10;
    }
}

  }
.bof3 {
    background: #ADD8DC;
}
@media all and (max-width: 700px) {
    .bo1, .bo2, .bo3 {
        width:100%
        display:block;
        margin:10;
    }
}
</style>
/*  Next three spacer boxs */
<style>

.next2spacer {
    text-align:center;
}
.next2spacer1, .next2spacer2, .next2spacer3 {
    width:500px;
    height:330px;
    display:inline-block;
    margin-left:10px;
    vertical-align: bottom;
}
.next2spacer1 {
    background: #ADD8DC;
    margin-left:10;
}
.next2spacer2 {
    background: #ADD8DC;
  }
.next2spacer3 {
    background: #ADD8DC;
}
@media all and (max-width: 700px) {
    .next2spacer1, .next2spacer2, .next2spacer3 {
        width:100%
        display:block;
        margin:10;
    }
}
</style>
/*  Three pictures across 1of3, 2of3 and 3of3 */
/*  picture across 1of3 */
<style>
.pic {
    height:200px;
    display:flex;
    gap:330px;
}
 
.pic img {
    width: 100%;
    height: 100%;

}
.pic1 img {
    object-fit: cover;
}
</style>
/*  first middle text across */
<style>
.next3spacer {
    text-align:center;
}
.next3spacer1, .next3spacer2, .next3spacer3 {
    width:500px;
    height:330px;
    display:inline-block;
    margin-left:10px;
    vertical-align: bottom;
}
.next3spacer1 {
    background: #ADD8DC;
    margin-left:10;
}
.next3spacer2 {
    background: #ADD8DC;
  }
.next3spacer3 {
    background: #ADD8DC;
}
@media all and (max-width: 700px) {
    .next3spacer1, .next3spacer2, .next3spacer3 {
        width:100%
        display:block;
        margin:10;
    }
}
</style>
/*  picture across 2of3 */
<style>
.picc {
    height:200px;
    display:flex;
    gap:330px;
}
 
.picc img {
    width: 100%;
    height: 100%;

}
.picc2 img {
    object-fit: cover;
}
</style>
/* second middle text across */
<style>
.next4spacer {
    text-align:center;
}
.next4spacer1, .next4spacer2, .next4spacer3 {
    width:500px;
    height:330px;
    display:inline-block;
    margin-left:10px;
    vertical-align: bottom;
}
.next4spacer1 {
    background: #ADD8DC;
    margin-left:10;
}
.next4spacer2 {
    background: #ADD8DC;
  }
.next4spacer3 {
    background: #ADD8DC;
}
@media all and (max-width: 700px) {
    .next4spacer1, .next4spacer2, .next4spacer3 {
        width:100%
        display:block;
        margin:10;
    }
}
</style>
/*  picture across 3of3 */
<style>
.piccc {
    height:200px;
    display:flex;
    gap:330px;
}
 
.piccc img {
    width: 100%;
    height: 100%;

}
.piccc3 img {
    object-fit: cover;
}
</style>

/*  Three pictures three boxes */
<style>

}
.boxx {
	position: relative;
    text-align:center;

}
.boxx1, .boxx2, .boxx3 {
    width:500px;
    height:508px;
    margin-left:0px;
}
.boxx1 {
    background: #ADD8DC;
    margin-left:10;
}
	.lefttop {
	position: absolute;
	top: 10px;
	left: 10px;
}
.boxx2 {
    background: #ADD8DC;
  }
.boxx3 {
    background: #ADD8DC;
	width:500px;
    height:300px;
    margin-left:0px;
}
		
@media all and (max-width: 700px) {
    .boxx1, .boxx2, .boxx3 {
        width:100%
        display:block;
        margin:0;
    }
}
</style>
/*  Contact footer */
/*  Last three small spacer boxs for information */
<style>

.lastspacer {
    text-align:center;
}
.lastspacer1, .lastspacer2, .lastspacer3 {
    width:500px;
    height:150px;
    display:inline-block;
    margin-left:10px;
    vertical-align: bottom;
}
.lastspacer1 {
    background: #ADD8DC;
    margin-left:10;
}
.lastspacer2 {
    background: #ADD8DC;
  }
.lastspacer3 {
    background: #ADD8DC;
}
@media all and (max-width: 700px) {
    .lastspacer1, .lastspacer2, .lastspacer3 {
        width:100%
        display:block;
        margin:10;
    }
}
</style>