* {box-sizing: border-box;
}
html {height: 100%;
width:100%;
}
body {width: 100%;
height: 100%;
margin: 0 auto;
background-color: #212121 ;
padding: 0;
}
/* START OF INDEX PAGE CSS */
div { text-align: center;}
.design-p-first,
.index-p-first {
text-align: left;
}
.percentile-span {
display: grid;
align-items: center;
}
.index-div-header {background-image: url("../headerimages/homeheroimage1800wide2.jpg");
/*height: 50%;*/
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px blue;
margin: 0 auto;
width:100%;
min-height: 328px;
}
.index-h1 {color: #f0c330;
position: relative;
left:0px;
}
.index-p-first {color: #f0c330;
font-size: 1.2em;
/*position: relative;
left: 20px;
bottom: 20px;*/
font-weight: bold;
margin-left: 20px;
margin-bottom: 20px;
}
.index-div-navigation {width: 80%;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
color: white;
margin: 0 auto;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
}
/*.index-nav {text-decoration: none;
color: #f0c330;
}*/
.index-nav .index-a-nav{
text-decoration: none;
color: #f0c330;
}
.index-nav .index-a-nav:hover {color: white;
}
.index-ul {list-style-type: none;
width: 100%;
margin: auto;
position: relative;
background:#757575;
padding:7px;
text-align:center;
}
.index-li {display: block;
}
.index-div-wrapper {width: 80%;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
margin: 0 auto;
height: max-content;
padding-left: 2%;
padding-right: 2%;
padding-bottom:20px;
padding-top: 0;
}
.index-div-row {display:flex;
flex-wrap: wrap;
height: max-content;
}
.index-div-row-item-first .index-img-daniel {width: 100%;
max-width: 100%;
border-radius: 10px;
border: solid 2px black;
vertical-align: middle;
}
.index-div-row-item-second {height:max-content;
background: black ;
border-radius: 10px;
overflow:hidden;
color: white;
}
.index-h2-first {margin:0 auto;
width: 20%;
color: #f0c330;
text-decoration: underline;
width:max-content;
}
.index-p-second {font-size: 1.2em;
display:flex;
justify-content: space-between;
margin-bottom: -1;
margin-top: 0;
width: 90%;
margin-left: 5%;
margin-right: 5%;
line-height: 1.4;
position:relative;
flex-wrap:wrap;
}
.index-p-third {margin-top: 25px;
}
.index-p-sixth {font-size: 1.2em;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.index-div-row-item-third { height:max-content;
background: black;
border-radius: 10px;
overflow:hidden;
color: white;
}
.index-span-rightcol {color: pink;
text-align:right;
}
/* The Flex Value Below Pushes .rightcol to the next line*/
.index-span-leftcol {color: blue;
flex: 0 1 95%;
text-align: left;
}
/* by default we set grid columns to 1 */
.index-div-row-item-first {flex: 0 1 100%;
padding: 1% 1%;
}
.index-div-row-item-second {flex: 0 1 98%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 6px;
height: max-content;
}
.index-div-row-item-third {flex: 0 1 98%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 6px;
}
.index-div-row-item-third p {width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.index-div-heading2 { margin: 0 auto;
width: 98%;
padding-top: 70px;
padding-bottom: 50px;}
.index-p-7th {width: max-content;
margin: 0 auto;
font-size: 1.3em;
text-align: center;
color: #f0c330;
}
.index-div-video {width: 98%;
margin: 0 auto;
position:relative;
width:80%;
overflow:hidden;
padding-top: 56.25%;}
.index-iframe { position: absolute;
border: solid 1px white;
border-radius: 10px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;}
.index-div-bible { width: 98%;
margin: 0 auto;
padding-bottom: 25px;
}
.index-h2-second { width: max-content;
margin: 0 auto;
margin-top: 70px;
color: #f0c330;
}
.index-p-8th { width: 98%;
margin: 0 auto;
margin-top: 30px;
font-size: 1.3em;
line-height:1.6;
color: white;
text-align:center;
}
.index-p-9th { width: 98%;
margin: 0 auto;
text-align: center;
}
.index-div-copyright { padding-bottom: 25px;
width: 100%;
padding-top: 50px;
}
@media only screen and (min-width: 460px) {
/*grid changes to 2*/
.index-div-row-item-first { flex: 0 1 50%;
}
.index-div-row-item-third { flex: 0 1 48%;
margin-left: 1%;
margin-right:1%;
}
.index-div-row-item-second { flex: 0 1 48%;
margin-left: 1%;
margin-right:1%;
height:max-content;
}
.index-span-leftcol { flex: 0 1 95%;
}
.index-p-second {flex-wrap: wrap;
}
}
@media only screen and (max-width: 675px) {
.index-li {display: block;
font-size: 1.4em;
width: 98%;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2px;
background: black;
padding: 3px; }
}
@media only screen and (max-width: 519px) {
.index-h1 {color: #C6930A;
font-size: 38px;
/*position: relative;
left:30px;
top: 10px;*/
margin:0;
margin-left: 30px;
margin-top: 10px;
text-align: left;
}
.index-p-first {color: #C6930A;
font-size: 22px;
/*position: relative;
left: 30px;
top:5px;*/
font-weight:bold;
margin:0;
margin-left: 30px;
margin-top: 5px;
}
.index-ul { background-color: #757575;
padding-top: 0px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}
@media only screen and (min-width:520px) {
.index-h1 {color: #C6930A;
font-size: 40px;
/*position: relative;
left:30px;
top: 10px; */
margin:0;
margin-left: 30px;
margin-top: 10px;
text-align: left;
}
.index-p-first {color: #C6930A;
font-size: 25px;
/*position: relative;
left: 30px;
top: 5px;*/
font-weight:bold;
margin:0;
margin-left: 30px;
margin-top: 5px;
}
.index-ul { background-color: #757575;
padding-top: 0px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.index-nav { padding-left: 0;
padding-right: 0;}
.index-li {display: block;
font-size: 1.4em;
width: 98%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2px;
background: black;
padding: 3px; }
}
@media only screen and (min-width: 676px) {
/* Reduces size of Logo Text*/
.index-h1 {color: #C6930A;
font-size: 2.9em;
/*position: relative;
left:30px;
bottom: 10px;*/
margin:0;
margin-left: 30px;
margin-top: 10px;
text-align: left;
}
.index-p-first {color: #C6930A;
font-size: 1.7em;
/*position: relative;
left: 30px;
bottom: 20px;*/
font-weight: bold;
margin:0;
margin-left: 30px;
margin-bottom: 20px;
}
.index-ul { background-color: black;
padding:5px 0px 7px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.index-nav { padding-left: 0;
padding-right: 0;}
.index-li {
font-size: 1.1em;
margin-left: 0px;
margin-right: 0px;
width: 100%;
flex: 0 0 calc(20% );
}
.nav-login .index-li {
flex: 0 0 calc(20%);
}
.index-ul .index-li:nth-child(1),
.index-ul .index-li:nth-child(2),
.index-ul .index-li:nth-child(3),
.index-ul .index-li:nth-child(4),
.index-ul .index-li:nth-child(5) {
border-bottom: 1px solid #757575;
}
.nav-login .index-ul .index-li:nth-child(5) {
border-bottom: 1px solid #757575;
}
}
@media only screen and (min-width: 768px) {
/* grid changes to 3 */
.index-div-row-item-first {flex: 0 1 calc(100%/3);
}
.index-div-row-item-first:first-child,
.index-div-row-item-first:first-child + div,
.index-div-row-item-first:first-child + div + div {order: -4;
}
.index-div-row-item-second {flex: 0 1 48%;
margin-left:1%;
margin-right:1%;
height: max-content;
order:-3;
}
.index-div-row-item-third {flex: 0 1 48%;
margin-left:1%;
margin-right:1%;
order: -2;
}
.index-div-row-item-first:nth-child(4) {
/*margin-right: calc(2*100%/3);*/
order: -1;
}
.para {line-height: 1.8;
}
.index-p-fourth span:nth-of-type(2) {flex: 0 1 70%;
text-align: right;
}
.index-p-fifth span:nth-of-type(2) {text-align: right;
flex: 0 1 60%;
}
.index-span-leftcol {flex:initial;
}
.index-p-second {flex-wrap: initial;
}
.index-ul { background-color: black;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.index-nav { padding-left: 0;
padding-right: 0;}
.index-li { display:inline-block;
font-size: 1.3em;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.index-h1 {color: #C6930A;
font-size: 3em;
/*position: relative;
left:40px;
bottom:10px;*/
margin:0;
margin-left: 40px;
margin-top: 10px;
text-align:left;
}
.index-p-first {color: #C6930A;
font-size: 1.8em;
/*position: relative;
left: 40px;
bottom: 20px;*/
font-weight: bold;
margin:0;
margin-left: 40px;
margin-bottom: 20px;
}
.index-ul { background-color: black;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.index-nav { padding-left: 0;
padding-right: 0;}
.index-li {
display:inline-block;
font-size: 1.3em;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.index-h1 {color: #C6930A;
font-size: 3.6em;
/*position: relative;
left: 40px;
bottom: 20px;*/
margin:0;
margin-left: 40px;
margin-top: 20px;
text-align: left;
}
.index-p-first {color: #C6930A;
font-size: 1.9em;
/*position: relative;
left: 40px;
bottom: 40px;*/
font-weight: bold;
margin:0;
margin-left: 40px;
margin-bottom: 40px;
}
.index-ul { background-color: black;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.index-nav { padding-left: 0;
padding-right: 0;}
.index-li {display: inline-block;
font-size: 1.3em;
}
}
@media only screen and (min-width: 1024px) {
/* grid changes to 4 */
.index-div-row-item-first {flex: 0 1 25%;
}
.index-div-row-item-second {flex: 0 1 48%;
margin-right: 1%;
margin-left: 1%;
height:max-content;
}
.index-div-row-item-third {flex: 0 1 48%;
margin-right: 1%;
margin-left: 1%;
}
.index-div-row-item-first:nth-child(4) {margin-right: 0;
}
.index-div-row-item-first {order: 0 !important;
}
.index-ul { background-color: black;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.index-nav { padding-left: 0;
padding-right: 0;}
.index-li {
display:inline-block;
font-size: 1.3em;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.index-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
top: 5px;
margin:0;
text-align:left;
}
.index-p-first {color: #C6930A;
font-size: 2.1em;
/*position: relative;
left: 50px;
bottom: 40px;*/
font-weight: bold;
margin:0;
margin-left: 50px;
margin-bottom: 2px;
}
.index-ul { background-color: black;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.index-nav { padding-left: 0;
padding-right: 0;}
.index-li { display:inline-block;
font-size: 1.3em;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.index-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
top: 5px;
margin:0;
width: max-content;}
.index-p-first {color: #C6930A;
font-size: 2.2em;
/*position: relative;
left: 50px;
bottom: 2px;*/
font-weight: bold;
margin:0;
margin-left: 50px;
margin-bottom: 2px;
}
.index-ul { background-color: black;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.index-nav { padding-left: 0;
padding-right: 0;}
}
/* START OF GALLERY PAGE CSS */
.gallery-div-header { background-image: url("../headerimages/galleryheroimage1800wide.jpg");
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px #DEB887;
min-height: 328px;
}
.gallery-h1 {color: #f0c330;
position: relative;
left:20px;
}
.gallery-div-navigation {width: 80%;
background: #757575 ;
color: white;
margin: 0 auto;
height:max-content;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
padding-top: 0;
}
.gallery-ul {list-style-type: none;
width: 95%;
margin: auto;
position: relative;
background:#757575 ;
padding:0;
text-align:center;
}
.gallery-li {display: block;
padding-left: 20px;
font-size: 1.4em;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2px;
background: black;
padding: 3px;
}
.gallery-a {text-decoration: none;
color: #f0c330;
}
.gallery-a:hover{color: white;
}
.gallery-div-heading { width:80%;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
margin: 0 auto;
padding: 10px;
padding-top: 0;
margin-top: -20px;
}
.gallery-h2 { padding-top: 5px;
margin-bottom: -5px;
width:100%;
text-align: center;}
.gallery-h3 {margin-bottom: -5px;
width: 100%;
margin-top: 8px;
text-align: center;}
.gallery-div-wrapper {width:80%;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height:max-content;
margin: 0 auto;
padding-top:0;
padding-bottom: 40px;
}
.gallery-div-row {display:flex;
flex-wrap: wrap;
height: max-content;
}
.gallery-div-row-item .gallery-img {width: 100%;
max-width: 100%;
border-radius: 10px;
border: solid 2px black;
vertical-align: middle;
}
.gallery-figure {width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
.gallery-figcaption { text-align: center;
font-weight: bold;
margin-top: 20px;
color: #f0c330;
}
.gallery-div-row-item {flex: 0 1 100%;
padding: 1% 1%;
}
.gallery-p-2nd { width: 98%;
margin: 0 auto;
text-align: center;}
.gallery-div-copyright {padding-top:30px;
width: 100%;
}
@media only screen and (max-width: 519px) {
.gallery-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.gallery-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.gallery-h3 {
margin-bottom: -10px;
}
.gallery-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.gallery-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
.gallery-ul { background-color: #757575;
height: max-content;
padding-top: 0px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.gallery-li {display:block;
padding-right: 15px;
font-size: 1.4em;
padding:3px;
width: 96%;
}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.gallery-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.gallery-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
.gallery-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.gallery-li {display:inline-block;
padding-right: 10px;
font-size: 1.1em;
width: max-content;}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;}
}
@media only screen and (min-width: 732px) {
/*grid changes to 2*/
.gallery-div-row-item { flex: 0 1 50%;
}
.gallery-img:hover {transform: scale(1.5,1.5);}
.gallery-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.gallery-li {display:inline-block;
padding-right: 10px;
font-size: 1.1em;}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.gallery-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.gallery-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
.gallery-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-left:0;}
.gallery-li {display:inline-block;
padding-right: 15px;
font-size: 1.3em;
margin-left: 0;}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.gallery-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.gallery-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
.gallery-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.gallery-li {display:inline-block;
padding-right: 30px;
font-size: 1.3em;}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;}
}
@media only screen and (min-width: 997px) {
/* grid changes to 3 */
.gallery-div-row-item {flex: 0 1 calc(100%/3);
}
.gallery-img:hover {transform: scale(1.5,1.5);}
.gallery-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.gallery-li {display:inline-block;
padding-right: 30px;
font-size: 1.3em;}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.gallery-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.gallery-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
.gallery-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.gallery-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.gallery-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;}
.gallery-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;
}
.gallery-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; }
.gallery-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;}
.gallery-div-navigation { padding-left: 0;
padding-right: 0;}
}
/* START OF ABOUT PAGE CSS */
.about-div-hero {background-image: url("../headerimages/aboutheroimage1800wide3.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.about-div-navigation {width: 80%;
margin: 0 auto;
background: #757575 ;
color: white;
margin: 0 auto;
height:max-content;
padding-bottom: 5px;
padding-top: 0;
margin-top: 0px;
}
.about-ul {
background-color: #757575;
padding-top: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
position:relative;
width:95%;
margin: 0 auto;
text-align: center;
padding-left: 0;
margin-top: 0;}
.about-li {display: block;
padding-left: 0px;
font-size: 1.4em;
border-radius: 10px;
margin-left:1%;
margin-right: 1%;
margin-bottom: 2px;
background: black;
padding: 3px;
margin-top: 0;
}
.about-a {text-decoration: none;
color: #f0c330;
}
.about-a:hover{color: white;
}
.about-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.about-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.about-div-main { width:98%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
text-align: left;
}
.about-img-first {width: 90%;
margin: 0 auto;
margin-top: 20px;
display: block;
border-radius: 10px;
}
.about-p-2nd {width: 90%;
margin: 15px auto;
font-size: 1.2em;
}
.about-p-3rd {width: 90%;
margin: 15px auto;
font-size: 1.2em;
border-radius: 10px;
}
.about-p-4th { width: 90%;
margin: 22.5px auto;
font-size: 1.2em;
text-align: justify;
}
.about-ul-2nd { width: 90%;
margin: 15px auto;
font-size: 1.1em;}
.about-div-heading2 {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
}
.about-div-main2 { width:98%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
}
.about-img-2nd { width: 90%;
margin: 0 auto;
margin-top: 20px;
display: block;
border-radius: 10px;
}
.about-p-5th {width: 98%;
text-align: center;
margin: 0 auto;}
.about-div-copyright { padding-top: 30px;
padding-bottom: 20px;
width: 98%;}
@media only screen and (max-width: 519px) {
.about-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.about-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.about-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.about-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
.about-ul { background-color: #757575;
height: max-content;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-left: 0;}
.about-li {display:block;
padding-right: 10px;
font-size: 1.4em;}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.about-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.about-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
.about-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-left: 0;}
.about-li {display:inline-block;
padding-right: 15px;
font-size: 1.1em;
width: max-content;}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.about-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.about-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
.about-ul { background-color: black;
height: 40px;
padding-top: 5px;
padding-left: 0;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.about-li {display:inline-block;
padding-right: 20px;
font-size: 1.3em;
width:max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.about-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.about-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
.about-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-left: 0;}
.about-li {display:inline-block;
padding-right: 20px;
font-size: 1.3em;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.about-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.about-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
.about-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-left: 0;}
.about-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.about-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.about-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
.about-ul { background-color: black;
height: 40px;
padding-top: 5px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-left: 0;}
.about-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;
width:max-content;
}
}
/* START OF DESIGN PAGE CSS */
.design-div-hero {background-image: url("../headerimages/designheroimage1800wide.jpg");
/*height: 50%;*/
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px yellow;
margin: 0 auto;
width:100%;
min-height: 328px;
}
.design-div-navigation {width: 80%;
background: #757575 ;
color: white;
margin: 0 auto;
height:max-content;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.design-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
}
.design-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:20px;
margin-top: -20px;}
.design-div-main {margin: 0 auto;
position:relative;
width:80%;
overflow:hidden;
padding-top: 56.25%;}
.design-div-main2 { margin: 0 auto;
position:relative;
width:80%;
overflow:hidden;
padding-top: 56.25%;}
.design-div-heading2 {width: 80%;
margin-top: 50px;
margin: 0 auto;
padding-bottom:30px;
padding-top: 20px;
margin-bottom: 10px;
background-color:pink;}
.design-div-heading3 {width: 80%;
margin: 0 auto;
margin-top: 50px;
padding-bottom:15px;
padding-top: 20px;}
.design-p-3rd {width: max-content;
margin: 0 auto;
text-decoration: underline;
font-weight: bold;
font-size: 1.4em;
padding-bottom: 20px;}
.design-p-4th {width: max-content;
margin: 0 auto;
text-decoration: underline;
font-weight: bold;
font-size: 1.4em;}
.design-iframe-first {position: absolute;
border: solid 1px white;
border-radius: 10px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;}
.design-iframe-2nd {position: absolute;
border: solid 1px white;
border-radius: 10px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;}
.design-p-first {color: #f0c330;
font-size: 1.2em;
/*position: relative;
left: 20px;
bottom: 20px;*/
font-weight: bold;
margin-left: 20px;
margin-bottom: 20px;
}
.design-p-4th {/* height: 100%;
width:100%; */
width: max-content;
margin: 0 auto;
text-decoration: underline;
font-weight: bold;
font-size: 1.4em;
}
.design-ul {list-style-type: none;
width: 95%;
margin: auto;
position: relative;
background:#757575 ;
padding:0;
text-align:center;
}
.design-li {display: block;
padding-left: 20px;
font-size: 1.4em;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2px;
background: black;
padding: 3px;
}
.design-a {text-decoration: none;
color: #f0c330;
}
.design-a:hover{color: white;
}
.design-p-2nd {font-size: 1.2em;
color: white;}
.design-p-2nd {padding-top: 10px;
font-size: 1.2em;
color: white;
text-align: justify;
}
.design-p-copyright { width: 98%;
margin: 0 auto;
text-align:center;}
.design-div-copyright { padding-top: 40px;
padding-bottom: 40px;
width:100%;
}
@media only screen and (max-width: 519px) {
.design-h1, .dashboard-h1 {color: #C6930A;
font-size: 38px;
/*position: relative;
left:30px;
top: 10px;*/
margin:0;
margin-top: 10px;
margin-left: 30px;
text-align:left;
}
.design-p-first, .dashboard-p-first {color: #C6930A;
font-size: 22px;
/*position: relative;
left: 30px;
top:5px;*/
font-weight:bold;
margin:0;
margin-left: 30px;
margin-top: 5px;
text-align:left;
}
}
@media only screen and (min-width:520px) {
.design-h1 {color: #C6930A;
font-size: 40px;
/*position: relative;
left:30px;
top: 10px; */
margin:0;
margin-top: 10px;
margin-left:30px;
text-align: left;
}
.design-p-first {color: #C6930A;
font-size: 25px;
/*position: relative;
left: 30px;
top: 5px;*/
font-weight:bold;
margin:0;
margin-left: 30px;
margin-top: 5px;
}
.design-ul { background-color: #757575;
height: max-content;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.design-li {display:block;
padding-right: 10px;
font-size: 1.4em;}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.design-h1 {color: #C6930A;
font-size: 2.9em;
/*position: relative;
left:30px;
bottom: 10px;*/
margin:0;
margin-top: 10px;
margin-left: 30px;
text-align: left;
}
.design-p-first {color: #C6930A;
font-size: 1.7em;
/*position: relative;
left: 30px;
bottom: 20px;*/
font-weight: bold;
margin:0;
margin-left: 30px;
margin-bottom: 20px;
}
.design-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.design-li {display:inline-block;
padding-right: 15px;
font-size: 1.1em;}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.design-h1 {color: #C6930A;
font-size: 3em;
/*position: relative;
left:40px;
bottom:10px;*/
margin:0;
margin-top: 10px;
margin-left:40px;
text-align: left;
}
.design-p-first {color: #C6930A;
font-size: 1.8em;
/*position: relative;
left: 40px;
bottom: 20px;*/
font-weight: bold;
margin:0;
margin-left: 40px;
margin-bottom: 20px;
}
.design-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.design-li {display:inline-block;
padding-right: 20px;
font-size: 1.3em;}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.design-h1 {color: #C6930A;
font-size: 3.6em;
/*position: relative;
left: 40px;
bottom: 20px;*/
margin:0;
margin-top: 20px;
margin-left: 40px;
text-align: left;
}
.design-p-first {color: #C6930A;
font-size: 1.9em;
/*position: relative;
left: 40px;
bottom: 40px;*/
font-weight: bold;
margin:0;
margin-left: 40px;
margin-bottom: 40px;
}
.design-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.design-li {display:inline-block;
padding-right: 35px;
font-size: 1.3em;}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.design-h1 {color: #C6930A;
font-size: 4em;
/*position: relative;
left:50px;
bottom: 10px;*/
margin:0;
margin-top: 10px;
margin-left: 50px;
text-align: left;
}
.design-p-first {color: #C6930A;
font-size: 2.1em;
/*position: relative;
left: 50px;
bottom: 40px;*/
font-weight: bold;
margin:0;
margin-left: 50px;
margin-bottom: 40px;
}
.design-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.design-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.design-h1 {color: #C6930A;
font-size: 5em;
/*position: relative;
left:50px;
bottom: 20px;*/
margin:0;
margin-left: 50px;
margin-top: 20px;
text-align: left;
}
.design-p-first {color: #C6930A;
font-size: 2.2em;
/*position: relative;
left: 50px;
bottom: 2px;*/
font-weight: bold;
margin:0;
margin-left: 50px;
margin-bottom: 2px;
}
.design-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.design-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;}
}
/* START OF CONTACT PAGE CSS */
.contact-div-hero {background-image: url("../headerimages/contactheroimage1800wide.jpg");
height:50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px green;
padding: 0;
min-height: 328px;
}
.contact-div-navigation {width: 80%;
background: #757575 ;
color: white;
margin: 0 auto;
height:max-content;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
padding-top: 0;
}
.contact-ul {list-style-type: none;
width: 100%;
margin: auto;
position: relative;
background:#757575 ;
padding:0;
text-align:center;
}
.contact-li {display: block;
padding-left: 20px;
font-size: 1.4em;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 2px;
background: black;
padding: 3px;
}
.contact-a {text-decoration: none;
color: #f0c330;
}
.contact-h1 {color: #f0c330;
position: relative;
left:20px;
}
.contact-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.contact-div-heading {
width:98%;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height:max-content;
margin: 0 auto;
padding-top:10px;
padding-left: 0%;
padding-right: 4%;
padding-bottom: 10px;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
}
.contact-div-main { width:98%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
}
.contact-img {width: 90%;
margin: 0 auto;
display: block;
border-radius: 10px;
}
.contact-p-2nd { width: 90%;
margin: 22.5px auto;
margin-top: 50px;
font-size: 1.2em;
text-align: justify;
}
.contact-p-2nd { width: 90%;
margin: 22.5px auto;
font-size: 1.2em;
}
.contact-span {color: #f0c330;}
.contact-p-copyright { width: 98%;
margin: 0 auto;
text-align: center;}
.contact-div-copyright { padding-top: 35px;
padding-bottom: 30px;
width: 100%;
}
#contact {
width: 60%;
margin: 40px auto 0;
padding: 30px;
background-color: #111;
border: 1px solid #333;
border-radius: 8px;
}
#contact-title {
margin-bottom: 10px;
font-size: 2rem;
text-align: center;
color: #f5f5f5;
}
#contact p {
margin-bottom: 20px;
line-height: 1.6;
text-align: center;
color: #d6d6d6;
}
.contact-form {
width: 100%;
}
.contact-form-group {
margin-bottom: 18px;
}
.contact-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
text-align: center;
color: #f0f0f0;
}
.contact-input,
.contact-select,
.contact-textarea {
width: 100%;
padding: 12px 14px;
font-size: 1rem;
font-family: inherit;
color: #f5f5f5;
background-color: #1a1a1a;
border: 1px solid #444;
border-radius: 6px;
box-sizing: border-box;
}
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
outline: none;
border-color: #777;
box-shadow: none;
}
.contact-textarea {
min-height: 140px;
resize: vertical;
}
.contact-form-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
.contact-button {
padding: 12px 20px;
border: 1px solid #555;
border-radius: 6px;
background-color: #222;
color: #fff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
.contact-button:hover {
background-color: #333;
}
.contact-button-reset {
background-color: #2a2a2a;
}
.contact-button-reset:hover {
background-color: #3a3a3a;
}
@media only screen and (max-width: 768px) {
#contact {
width: 100%;
padding: 20px;
}
.contact-div-main {
padding-left: 1%;
padding-right: 1%;
}
}
@media only screen and (max-width: 519px) {
.contact-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.contact-p-1st {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.contact-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.contact-p-1st {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
.contact-ul { background-color: #757575;
height: max-content;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.contact-li {display:block;
padding-right: 10px;
font-size: 1.4em;}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.contact-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.contact-p-1st {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
.contact-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.contact-li {display:inline-block;
padding-right: 15px;
font-size: 1.1em;}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.contact-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.contact-p-1st {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
.contact-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.contact-li {display:inline-block;
padding-right: 25px;
font-size: 1.1em;}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.contact-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.contact-p-1st {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
.contact-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.contact-li {display:inline-block;
padding-right: 30px;
font-size: 1.1em;}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.contact-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.contact-p-1st {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
.contact-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.contact-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.contact-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.contact-p-1st {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
.contact-ul { background-color: black;
padding-top: 5px;
height: 40px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;}
.contact-li {display:inline-block;
padding-right: 40px;
font-size: 1.3em;}
}
/* START OF LOGIN PAGE CSS */
.login-div-header {background-image: url("../headerimages/loginheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.login-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.login-image-one { width: 98%;}
.login-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;}
.login-div-main { width:98%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
}
.login-image-one {width: 98%;
margin: 0 auto;
margin-top: 20px;
display: block;
border-radius: 10px;
}
.login-h2-first { margin-top: 50px;
margin-bottom: 50px;}
.login-p-second { font-size: 1.2em;}
.login-p-poem { color: white;
font-size: 1.3em;}
.p-copyright {width: 98%;
text-align: center;
margin: 0 auto;}
.div-copyright { padding-top: 30px;
padding-bottom: 20px;
width: 98%;}
.login-input {display: block;
margin: 20px auto;
text-align: center;
box-shadow: 0 0 10px #666;
width: 240px;
height: 30px;
background-color: #f2f2f2;}
.login-button { width: 240px;
height: 30px;
background-color: #000000;
color: #ffffff;
border: 2px solid #fff;}
.login-button:hover { background-color: #757575;}
@media only screen and (max-width: 519px) {
.login-h1-first {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.login-p-header {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.login-h1-first {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.login-p-header {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.login-h1-first {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.login-p-header {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.login-h1-first {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.login-p-header {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.login-h1-first {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.login-p-header {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.login-h1-first {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.login-p-header {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.login-h1-first {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.login-p-header {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
@media only screen and (max-width: 780px) {
.index-div-navigation {
padding-left: 1%;
padding-right: 1%;
}
}
/* START OF REGISTER PAGE CSS */
.register-div-header {background-image: url("../headerimages/registerheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.register-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.register-image-two { width: 98%;}
.register-div-wrapper {width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;}
.register-div-main { width:98%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
}
.register-div-main { width:98%;
background-color:black;}
.register-h2-first { margin-top: 50px;
margin-bottom: 50px;}
.p-copyright {width: 98%;
text-align: center;
margin: 0 auto;}
.div-copyright { padding-top: 30px;
padding-bottom: 20px;
width: 98%;}
.register-input {display: block;
margin: 20px auto;
text-align: center;
box-shadow: 0 0 10px #666;
width: 240px;
height: 30px;
background-color: #f2f2f2;}
.register-button { width: 240px;
height: 30px;
background-color: #000000;
color: #ffffff;
border: 2px solid #fff;}
.register-button:hover { background-color: #757575;}
@media only screen and (max-width: 519px) {
.register-h1-first {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.register-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.register-h1-first {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.register-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.register-h1-first {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.register-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.register-h1-first {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.register-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.register-h1-first {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.register-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.register-h1-first {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.register-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.register-h1-first {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.register-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF DASHBOARD PAGE CSS */
.dashboard-div-hero {background-image: url("../headerimages/dashboardheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.dashboard-p-quote { color:white;
font-size:1.1em;
text-align: center;
padding-top: 40px;}
.dashboard-p-second { font-size: 1.3em;
text-align:center;}
.dashboard-a { color: blue;
}
.dashboard-a:hover{color: white;
}
.dashboard-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.dashboard-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.dashboard-div-main { width:70%;
background-color: black;
color: white;
height: max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
.dashboard-h1-second {color: #C6930A;
text-align: center;}
}
@media only screen and (max-width: 519px) {
.dashboard-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.dashboard-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.dashboard-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.dashboard-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.dashboard-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.dashboard-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.dashboard-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.dashboard-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.dashboard-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.dashboard-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.dashboard-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.dashboard-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.dashboard-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.dashboard-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF HER BLUE SHORTS PAGE CSS */
.shorts-div-hero {background-image: url("../headerimages/herblueshortsheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.shorts-h3-first { text-align:center;}
.shorts-p-disclaimer {font-size: 1.2em;
text-align: justify;
}
.shorts-p-end {text-align:center;
font-style: bold;
font-size: 2em;}
.shorts-p-story {font-size: 1.2em;
padding: 10px;
text-align: justify;
}
.shorts-p-story-indented { font-size: 1.2em;
padding: 10px;
text-align: justify;
text-indent: 75px; }
.shorts-span-italic { font-style: italic;}
.shorts-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.shorts-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.shorts-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.shorts-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.shorts-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.shorts-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.shorts-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.shorts-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.shorts-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.shorts-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.shorts-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.shorts-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.shorts-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.shorts-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.shorts-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.shorts-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.shorts-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF EDEN PAGE */
.eden-div-hero {background-image: url("../headerimages/edenheroimage1800wide7.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.eden-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.eden-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.eden-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.eden-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.eden-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.eden-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.eden-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.eden-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.eden-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.eden-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.eden-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.eden-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.eden-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.eden-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.eden-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.eden-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.eden-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.eden-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF EMPTINESS PAGE */
.emptiness-div-hero {background-image: url("../headerimages/emptinessheroimage1800wide3.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.emptiness-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.emptiness-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.emptiness-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.emptiness-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.emptiness-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.emptiness-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.emptiness-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.emptiness-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.emptiness-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.emptiness-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.emptiness-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.emptiness-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.emptiness-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.emptiness-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.emptiness-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.emptiness-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.emptiness-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.emptiness-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF CHINESE WHISPERS PAGE */
.chinese-div-hero {background-image: url("../headerimages/chineseheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.chinese-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.chinese-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.chinese-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.chinese-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.chinese-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.chinese-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.chinese-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.chinese-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.chinese-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.chinese-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.chinese-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.chinese-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.chinese-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.chinese-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.chinese-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.chinese-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.chinese-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.chinese-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF SUNSET PAGE */
.sunset-div-hero {background-image: url("../headerimages/sunsetheroimage1800wide2.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.sunset-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.sunset-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.sunset-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.sunset-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.sunset-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.sunset-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.sunset-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.sunset-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.sunset-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.sunset-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.sunset-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.sunset-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.sunset-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.sunset-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.sunset-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.sunset-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.sunset-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.sunset-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF BUTTERFLY PAGE */
.butterfly-div-hero {background-image: url("../headerimages/butterflyheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.butterfly-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.butterfly-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.butterfly-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.butterfly-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.butterfly-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.butterfly-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.butterfly-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.butterfly-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.butterfly-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.butterfly-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.butterfly-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.butterfly-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.butterfly-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.butterfly-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.butterfly-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.butterfly-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.butterfly-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.butterfly-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF MOTHER PAGE */
.mother-div-hero {background-image: url("../headerimages/motherheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.mother-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.mother-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.mother-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.mother-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
.mother-h3 { text-align: center;}
.mother-p-disclaimer { text-align:center;
font-size: 1.2em;
}
@media only screen and (max-width: 519px) {
.mother-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.mother-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.mother-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.mother-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.mother-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.mother-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.mother-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.mother-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.mother-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.mother-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.mother-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.mother-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.mother-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.mother-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF TIME PAGE */
.time-div-hero {background-image: url("../headerimages/timeheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.time-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.time-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.time-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.time-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.time-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.time-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.time-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.time-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.time-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.time-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.time-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.time-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.time-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.time-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.time-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.time-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.time-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.time-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF FREEDOM PAGE */
.freedom-div-hero {background-image: url("../headerimages/freedomheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.freedom-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.freedom-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.freedom-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.freedom-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.freedom-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.freedom-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.freedom-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.freedom-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.freedom-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.freedom-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.freedom-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.freedom-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.freedom-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.freedom-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.freedom-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.freedom-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.freedom-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.freedom-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF PUZZLE PAGE*/
.puzzle-div-hero {background-image: url("../headerimages/puzzleheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.puzzle-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.puzzle-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.puzzle-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.puzzle-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.puzzle-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.puzzle-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.puzzle-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.puzzle-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.puzzle-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.puzzle-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.puzzle-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.puzzle-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.puzzle-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.puzzle-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.puzzle-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.puzzle-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.puzzle-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.puzzle-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF ONE THOUSAND SHIPS PAGE */
.ships-div-hero {background-image: url("../headerimages/onethousandshipsheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.ships-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.ships-div-heading {width:100%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.ships-div-wrapper { width: 80%;
margin: 0 auto;
background-image: url("../otherimages/div_wrapper_background_img5.png");
background-repeat: repeat;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.ships-div-main { width:70%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
text-align: left;
}
@media only screen and (max-width: 519px) {
.ships-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.ships-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.ships-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.ships-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.ships-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.ships-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.ships-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.ships-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.ships-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.ships-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.ships-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.ships-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.ships-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.ships-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}
/* START OF BAD BOY PAGE */
.badboy-div-hero {background-image: url("../headerimages/badboyheroimage1800wide.jpg");
height: 50%;
background-position: center;
background-repeat:no-repeat;
background-size: cover;
border: dotted 1px red;
width:100%;
margin: 0 auto;
min-height: 328px;
}
.badboy-p-poem {font-size: 1.2em;
padding: 10px;
text-align: center;
}
.badboy-div-heading {width:100%;
margin: 0 auto;
background-color:#757575;
padding-left: 2%;
padding-right:2%;
padding-top:10px;
margin-top: -20px;}
.badboy-div-wrapper { width: 80%;
margin: 0 auto;
background-color:#757575;
height: max-content;
padding-right: 2%;
padding-left: 2%;
padding-bottom: 20px;}
.badboy-div-main { width:98%;
background-color:black;
color: white;
height:max-content;
margin: 0 auto;
padding-top:30px;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 30px;
border-radius: 10px;
margin-left: 1%;
margin-right: 1%;
text-align: left;
}
@media only screen and (max-width: 519px) {
.badboy-h1 {color: #C6930A;
font-size: 38px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.badboy-p-first {color: #C6930A;
font-size: 22px;
position: relative;
left: 30px;
top:5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width:520px) {
.badboy-h1 {color: #C6930A;
font-size: 40px;
position: relative;
left:30px;
top: 10px;
margin:0;
width: max-content;
}
.badboy-p-first {color: #C6930A;
font-size: 25px;
position: relative;
left: 30px;
top: 5px;
font-weight:bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 641px) {
/* Reduces size of Logo Text*/
.badboy-h1 {color: #C6930A;
font-size: 2.9em;
position: relative;
left:30px;
bottom: 10px;
margin:0;
width: max-content;
}
.badboy-p-first {color: #C6930A;
font-size: 1.7em;
position: relative;
left: 30px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 782px){
/* reduces size of Logo*/
.badboy-h1 {color: #C6930A;
font-size: 3em;
position: relative;
left:40px;
bottom:10px;
margin:0;
width: max-content;
}
.badboy-p-first {color: #C6930A;
font-size: 1.8em;
position: relative;
left: 40px;
bottom: 20px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 905px) {
/* reduces size of Logo */
.badboy-h1 {color: #C6930A;
font-size: 3.6em;
position: relative;
left: 40px;
bottom: 20px;
margin:0;
width: max-content;
}
.badboy-p-first {color: #C6930A;
font-size: 1.9em;
position: relative;
left: 40px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1048px) {
/* Changes size of heading */
.badboy-h1 {color: #C6930A;
font-size: 4em;
position: relative;
left:50px;
bottom: 10px;
margin:0;
width: max-content;
}
.badboy-p-first {color: #C6930A;
font-size: 2.1em;
position: relative;
left: 50px;
bottom: 40px;
font-weight: bold;
margin:0;
width: max-content;
}
}
@media only screen and (min-width: 1262px) {
/* changes size of heading */
.badboy-h1 {color: #C6930A;
font-size: 5em;
position: relative;
left:50px;
bottom: 20px;
margin:0;
width: max-content;
}
.badboy-p-first {color: #C6930A;
font-size: 2.2em;
position: relative;
left: 50px;
bottom: 2px;
font-weight: bold;
margin:0;
width: max-content;}
}