@charset "utf-8";

@font-face {
    font-family: 'dynamictrooper';
    src: url('fonts/dynamictrooper-ovb7a-webfont.woff') format('woff');
    src: url('fonts/dynamictrooper-ovb7a-webfont.woff2') format('woff2');
    font-weight: normal;
    font-weight: normal;
}

html {
    width: 100%;
    height: 100%;
    line-height: 1em;
    font-size: 105%;
}

/* Locked background layer (image + gradient) */
body::before {
  content: "";
  position: fixed;      /* stays put on scroll */
  inset: 0;             /* top:0 right:0 bottom:0 left:0 */
  z-index: -1;          /* behind page content */
  background-image: url("../images/back_whiteranger.png"),
                    linear-gradient(to bottom right, rgb(141,141,141), rgb(255,255,255));
  background-repeat: no-repeat, no-repeat;
  background-position: bottom right, center;
  /* adjust sizes as you like; e.g., keep image natural size: 'auto' */
  background-size: auto, cover;
  background-blend-mode: multiply;
  pointer-events: none; /* background layer never captures taps/clicks */
  /* iOS performance hint */
  will-change: transform;
  transform: translateZ(0);
}


body {
    margin: auto;
    max-width: 1350px;
}

header img {
    width: 25%;
}

h1 {
    color: black;
    font-family: 'dynamictrooper';
    padding: 10px;
}


th {
    border: 1px solid black;
    width: 10%;
    background-color: navy;
    color: white;

}

th#perks {
    width: 20%;

}

table tbody tr:nth-child(odd) td {
	background-color: lightblue;

}

table tbody tr:nth-child(even) td {
	background-color: rgb(216, 236, 245);
}

table td {
    border: 1px solid black;
    text-align: center;
}

article {
    background-color: lightblue;
    border-radius: 25px;
    padding: 5px;
    display: block;
    width: 66%;
    float: left;
}

.perks {
    padding: 20px;
}

h3 {
    color: blue;
    padding: 5px;
    font-family: 'dynamictrooper';
}
article > hr {
    width: 100%;
}