/*

Jesus died for You and me a long time ago.
Today, He lives for You. For us. 
Tomorrow, we might see Him. 
Be ready.

*/

body {
  background-color: #070504;
  text-align: center;
  color: #f9f9f9;
/* f9 hex = 249 rgb */
  text-shadow: none;
}

/* ----------------------

code below for x-css:

  body::after {
  opacity: 0.4;
  content: "";
  position: fixed;
  top: 0;
  height: 100vh;
  left: 0;
  right: 0;
  z-index: -1;
  background: url("/pics/photo.jpg") left bottom;
  background-size: cover;
}

----------------------  */

html {
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.box {
  width: 70%;
  max-width: 800px;
  margin: 43px auto;
  font: 19px/1.85 box;
  text-align: left;
  letter-spacing: 0.05em;
}

p {
  margin: 24px 5%;
}

.mandt {
  font-family: mandt;
  font-size: 25px;
  margin-left: 6%;
  letter-spacing: 0.05em;
}

.covering {
  height: 0;
  line-height: 0;
}

.header2, .range, .te {
  font-family: boxsub;
}

.header2, .range {
  font-family: box2;
  font-size: 80%;
  letter-spacing: 0.2em;
}

.and1, .header1, .five, .header2, .range {
  color: hsl(43,43%,82%);
}

.super {
  font-family: lav;
  font-size: 143%;
  line-height: 0.5;
}

.header1 {
  line-height: 0.75;
  font-size: 40px;
  font-family: box1;
  letter-spacing: 0.1em;
}

.and1 {
  font-family: lav;
  line-height: 5px;
}

.plusfoot {
  font-size: 125%;
  vertical-align: -3px;
  line-height: 5px;
}

.plus {
  letter-spacing: 0.2em;
}

.curly { /* style for double quotes around victory */
  font-family: brush;
  font-size: 162%;
  line-height: 5px;
}

.five {
  line-height: 1.0;
  font-size: 36px;
  font-family: box1;
  letter-spacing: 0.1em;
}

.fivesub {
  white-space: nowrap;
  font-family: boxsub;
}

.rowgap {
  display: flex;
  flex-direction: column;
  row-gap: 7px;
}

.rpm {
  display: flex;
  align-items: center;
  margin: 0 5%;
}

.letter {
  text-align: center;
  width: 31px;
  height: 31px;
  line-height: 1.67;
  background-color: rgba(7,5,4,0.7);
  border: 5px solid rgba(77,77,77,0.7);
  border-radius: 4px;
}

.range {
  margin-left: 17px;
  line-height: 1.7;
}

.top, .button {
  display: flex;
  align-items: center;
  line-height: 0;
}

.top {
  margin: 0 5% 15px;
}

.button {
  margin: 2px auto 10px;
  text-align: center;
}

.mtcircle {
  width: 38px;
  height: auto;
}

.mtcircle2 {
  width: 36px;
  height: auto;
  margin: -9px auto 10px;
}

.book1 {
  margin-top: 16px;
  max-width: 220px;
  width: 50%;
}

.book2 {
  margin-top: 10px;
  margin-bottom: 33px;
  max-width: 210px;
  width: 45%;
}

.book1, .book2 {
  font-size: 0;
  height: auto;
  border-radius: 4px;
}

.photo, .photos2 {
  height: auto;
  margin-top: 16px;
  margin-bottom: 5px;
  border-radius: 4px;
}

.photo {
  width: 90%;
  max-width: 450px;
  margin-left: 5%;
}

.photos2 {
  width: 90%;
  max-width: 800px;
  margin-left: 5%;
}

.line {
  opacity: 0.6;
  background-color: #777;
  font-size: 0;
  width: 90%;
  max-width: 720px;
  margin-left: 5%;
  line-height: 0;
  height: 1px;
}

.songs {
  margin: 14px 5% 24px;
}

.songrow {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.songlink {
  text-align: left;
}
 
.footernav {
  text-align: center;
  margin-top: 13px;
  margin-bottom: -5px;
}

.middledot {
  opacity: 0.5;
  margin: auto 8px;
}

.footercopy {
  margin: -10px auto 25px;
  text-align: center;
  line-height: 1.5;
}

a.copy, a.copy1, .copy, .copy1 {
  letter-spacing: 0.07em;
  font-family: copy;
  text-align: center;
  font-size: 14px;
}

a {color: #f9f9f9; font-family: boxlink; text-decoration: none; transition: 0.25s; white-space: nowrap;}

a:hover {color: #f9f9f9;}

a.main, a.main-nodec {padding-bottom: 3px; border-bottom: 4px solid hsl(43 40% 82% / 0);}

a.main:hover {border-bottom: 4px solid hsl(43 40% 82% / 0.3);}

a.main-nodec:hover {border-bottom: 4px solid hsl(43 40% 82% / 0);}

a.copy {letter-spacing: 0.06em; white-space: nowrap; text-align: center; padding-bottom: 3px; border-bottom: 4px solid hsl(43 40% 82% / 0);}

a.copy:hover {border-bottom: 4px solid hsl(43 40% 82% / 0.3);}

a.copy1 {letter-spacing: 0.06em; white-space: nowrap; text-align: center; padding-bottom: 3px; border-bottom: 4px solid hsl(43 40% 82% / 0.3);}

a.copy1:hover {border-bottom: 4px solid hsl(43 40% 82% / 0.3);}

a.mtcircle2 {margin: 0 auto;}

a.footer, a.footer1 {text-decoration: none; font-family: boxlink; white-space: nowrap; padding-bottom: 3px; letter-spacing: 0.02em; color: #f9f9f9;}

a.footer {border-bottom: 4px solid hsl(43 40% 82% / 0);}

a.footer:hover {border-bottom: 4px solid hsl(43 40% 82% / 0.3);}

a.footer1 {border-bottom: 4px solid hsl(43 40% 82% / 0.3);}

a.footer1:hover {border-bottom: 4px solid hsl(43 40% 82% / 0.3);}

@media (max-width: 1020px)

{

* {
  margin: 0;
  padding: 0;
}

html, body {
 overflow-x: hidden;
}

.mandt {
  font-size: 22px;
}

.box {
  width: 100%;
  margin: 0 auto 20px;
  padding-bottom: 5px;
  letter-spacing: 0.03em;
}

.top {
  margin: 25px 3% 8px;
}

.mtcircle {
  width: 1.9rem;
  height: auto;
}

.mtcircle2 {
  width: 1.9rem;
  height: auto;
  margin: -10px auto 0;
}

.photo, .photos2 {
  max-width: 800px;
  width: 94%;
  height: auto;
  margin-left: 3%;
}

p {
  margin: 24px 3%;
}

.book1 {
  margin-top: 14px;
}

.book2 {
  margin-top: 14px;
  margin-bottom: 20px;
}

.book1, .book2 {
  height: auto;
  border-radius: 3px;
}

.line {
  opacity: 0.12;
  background-image: linear-gradient(to right, #aaa, #ccc, #aaa);
  font-size: 0;
  width: 92%;
  margin-left: 4%;
  line-height: 0;
  height: 4px;
}

.button {
  margin: 3px auto 10px;
  text-align: center;
}

.songs {
  margin: 14px 3% 24px;
}

.footernav {
  text-align: center;
  margin-top: 19px;
  margin-bottom: 14px;
  font-size: 19px;
}

.footercopy {
  font-size: 18px;
}

.middledot {
  font-size: 19px;
  margin: auto 6px;
}

}

/* weights & stretch ------------------- */

@font-face {
  font-family: mandt;
  font-stretch: 120%;
  font-weight: 380;
  src: url(/fonts/Mont.ttf);
}

@font-face {
  font-family: box;
  font-stretch: 120%;
  font-weight: 280;
  src: url(/fonts/Mont.ttf);
}

@font-face {
  font-family: box1;
  font-stretch: 120%;
  font-weight: 200;
  src: url(/fonts/Mont.ttf);
}

@font-face {
  font-family: box2;
  font-stretch: 120%;
  font-weight: 170;
  src: url(/fonts/Mont.ttf);
}

@font-face {
  font-family: boxsub;
  font-stretch: 120%;
  font-weight: 550;
  src: url(/fonts/Mont.ttf);
}

@font-face {
  font-family: boxlink;
  font-stretch: 120%;
  font-weight: 690;
  src: url(/fonts/Mont.ttf);
}

@font-face {
  font-family: lav;
  src: url(/fonts/Lav.ttf);
}

@font-face {
  font-family: copy;
  font-stretch: 120%;
  font-weight: 240;
  src: url(/fonts/Mont.ttf);
}

@font-face {
  font-family: brush;
  src: url(/fonts/Brush.ttf);
}

/* markandtraci.com */