/*--------------------------------------Fonts-------------------------------------------------*/
.pt-sans-regular {
  font-family: "PT Sans", serif;
  font-weight: 400;
  font-style: normal;
}
/*.pt-sans-bold {
  font-family: "PT Sans", serif;
  font-weight: 700;
  font-style: normal;
}*/

/*---------------------------------------Typographic Scale------------------------------------------------*/
/* Scale implemented is golden section 1:1.618  16px is base 1em*/
/*https://www.modularscale.com/?16&px&1.618*/
body {
  font-size: 100%;
  font-family: "PT Sans", serif;
}
h1 {
  font-size: 3.437em; /*55 /16 */
  line-height: 1em; /* 55 / 55 */
  margin: 1em 0 0 0; /* 55 / 55 */
  margin-top: 0.25em; /* 4 / 16 */
  font-style: italic;
  text-align: center;
}
h2 {
  font-size: 1.5625em; /* 25 / 16 */
  font-style: italic;
  margin: 0.65em 0; /* 16 / 25 */
  text-align: center;
}
h3 {
  font-size: 1em; /* 16 / 16 */
  font-style: italic;
  margin: 1em 0; /* 16 / 16 */
  text-align: center;
}
p {
  font-size: 1em; /* 16 / 16 */
  margin: 1.562em 0; /* 25 / 16 */
  text-align: center;
}
.menufont {
  font-size: 1em; /* 16 / 16 */
  font-style: italic;
}
.fanfoot {
  /*-------------------------------Calc() Example-----------------------------------------*/
  font-size: calc(100% + 4px); /* 16 + 4 */
}
nav a:link {
  font-size: 1em; /* 16 / 16 */
}
footer a:link {
  font-size: 1em; /* 16 / 16 */
}

/*------------------------------------------Website Grid Values----------------------------------------------*/
.grid_container {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  gap: 2px;
  justify-items: stretch;
  align-items: center;
}
.item1_header {
  grid-area: header;
}
.item2_nav {
  grid-area: nav;
}
.item3_main {
  grid-area: main;
}
.item4_footer {
  grid-area: footer;
}

/*--------------------------------------Header-------------------------------------------------*/
header {
  background-image: url(../Images/truckscstartB.png);
  line-height: 0.5em;
  padding-top: 5px;
  padding-bottom: 50px;
  font-weight: 900;
  margin-left: 0;
  margin-right: 0;
  /*--------------------------------Calc() Example---------------------------------------------*/
  margin-top: calc(10px - 15px);
  margin-bottom: calc(10px - 26px);
  /*background-repeat: no-repeat;*/
}
.logo {
  display: block;
  margin-left: 40%;
  margin-right: 50%;
  /* margin-bottom: 10px;*/
}

/*---------------------------------------Nav Bar-----------------------------------------------------*/
.newcolor {
  color: black;
}
.new {
  padding-left: 400px;
  /*align-content: center;*/
}
.daycolor {
  padding-right: 200px;
}
.daycolorb {
  padding-left: 25px;
}
nav {
  background: #ef7a16;
  border-bottom: solid black;
  border-width: 10px;
  padding-bottom: 15px;
  padding-top: 15px;
}
nav a:link {
  color: black;
  background-color: #f0d81a;
  border-style: solid;
  border-color: #000000;
  border-radius: 8px;
  border-width: medium;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 4px;
  padding-right: 4px;
  margin-left: 30px;
  margin-right: 30px;
  text-decoration: none;
  font-weight: 800;
}
/*----------------------------Browser correction --------------------------------------*/
nav a:visited {
  color: black;
}

/*---------------------------------------------------Flexbox container for nav bar----------------------------------------*/
ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-evenly;
  margin: 6px 0 -2px 0;
}
li {
  padding: 10px 0.05em;
}

/*------------------------------------------------------main------------------------------------------*/
/*-------------------------------------------progrssive enhancement---------------------------------*/
main footer {
  content-visibility: auto;
}
p {
  text-wrap: pretty;
}
.photo {
  aspect-ratio: 1/1;
}
/*----------------------------------------*/
.birthA {
  text-align: center;
  font-size: 0.85em;
}
.birth {
  text-align: center;
  font-size: 0.85em;
}
.linkcolor {
  color: red;
}
.htwo {
  background: #f0d81a;
  border: solid black;
  color: #000000;
  border-radius: 8px;
  margin-left: 35%;
  margin-right: 35%;
}
.align {
  text-align: center;
  /*margin-left: 10%;
  margin-right: 10%;*/
}
.bottom {
  padding-bottom: 15px;
}
h2 {
  text-align: center;
}
h3 {
  text-align: center;
}
main {
  background: #faf2e6;
  margin-bottom: -2px;
}
.fanfoot {
  font-style: normal;
  background: #ef7a16;
}
.fanfootb {
  margin-bottom: 1.5em;
}
article img {
  margin-left: 43%;
  padding-top: 2%;
  border-radius: 10px;
}

/*--------------------------------------Form Styles-------------------------------------------------*/
.border {
  background: #ef7a16;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 50px;
}
.border2 {
  background: #f8cc92;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 10px;
}
.warning {
  color: red;
}
.warningb {
  color: red;
  font-size: x-large;
}
legend {
  border: solid black;
  background: white;
  /* margin: auto;
  position: relative;*/
  text-align: center;
}
.birthA {
  text-align: center;
  font-size: 0.85em;
}
/*.button {
  list-style-type: none;
}*/

/*------------------------------------------Menu Grid Values----------------------------------------------*/
.container {
  background: #f8cc92;
  display: grid;
  /*grid-template-columns: 1fr 1fr 1fr;*/
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 230px 230px 230px 230px;
  row-gap: 2px;
  column-gap: 2px;
  /*gap: 2px;*/
  justify-items: stretch;
  align-items: stretch;
  border-radius: 2px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  width: 97%;
}
.side {
  grid-template-rows: 225px 235px 225px;
}
.item {
  text-align: center;
  font-family: sans-serif;
  border: 1px solid black;
  padding-bottom: 10px;
}
.inside {
  background: #f0d81a;
  margin-left: 50px;
  margin-right: 50px;
  border: solid black;
  border-radius: 6px;
  border-width: 2px;
}
.action {
  color: black;
  background: #ebc000;
  border: solid black;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 50px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-family: cursive;
  font-weight: bolder;
}
.decor {
  text-decoration: none;
}
.menu {
  background: #ef7a16;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 50px;
}
.menu2 {
  background: #f8cc92;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 10px;
}
.bundles {
  grid-template-rows: 240px 240px;
}
.photo {
  border-radius: 6px;
  /*padding-top: 0px;
  padding-bottom: 10px;*/
}
div {
  padding: 10px 0.05em;
}

/*----------------------------------------------------Footer-------------------------------------------*/
footer {
  background: #ef7a16;
  padding-top: 15px;
  margin-top: -15px;
  margin-bottom: -8px;
  border-top: solid black;
  border-width: 10px;
}
footer a:link {
  color: black;
  background-color: #f0d81a;
  font-weight: bold;
  padding-top: 5px;
  padding-left: 4px;
  padding-right: 4px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  border-style: solid;
  border-color: #000000;
  border-radius: 8px;
  border-width: medium;
}

/*---------------------------------------------Flexbox container for footer ---------------------------------------------*/
section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-evenly;
  align-items: center;
  margin: 6px 0 -2px 0;
}

/*----------------------------------------------------@Media Queries------------------------------------------------------*/

/*-------------------------------------------------Tablet @media-------------------------------------------------*/
/*--------------------------------Menu Grid @media------------------------------------*/
@media (max-width: 975px) {
  .menu {
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media (max-width: 911px) {
  .rform {
    margin-left: 1px;
    margin-right: 1px;
  }
}
@media (max-width: 835px) {
  .menu {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/*-------------------------------Menu Grid @media------------------------------------*/
@media (max-width: 796px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 230px 225px 225px 225px 225px 225px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
  }
  .side {
    grid-template-rows: 230px 225px 225px 225px 225px;
  }
  .bundles {
    grid-template-rows: 225px 225px 225px;
  }
  /*------------------------Typographic Scale @media---------------------------------------*/
  .fanfoot {
    /*-------------------------------Calc() Example-----------------------------------------*/
    font-size: calc(100% + 2px);
  }
  /*---------------------------------Header @media-----------------------------------*/
  header {
    background-image: url(../Images/truckscTAB.png);
    padding-top: 5px;
    padding-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    margin-bottom: -16px;
    background-repeat: no-repeat;
  }
  .logo {
    width: 12.5em; /* 200 / 16 */
    height: 9.37em; /* 150 / 16 */
    /*width: 200px;
    height: 150px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}
/*------------------------------Menu @media----------------------------------------*/
@media (max-width: 695px) {
  /*------------------------Typographic Scale @media---------------------------------------*/
  .fanfoot {
    font-size: 100%;
    /* font-size: 0.938em;*/ /* 15 / 16 */
    margin-left: 25%;
    margin-right: 25%;
  }
  /*------------------------------Header @media-------------------------------------*/
  .pageHeader {
    font-size: 2.812em; /* 45 / 16 */
  }
}

/*---------------------------------------------Smartphone @media---------------------------------------------------------*/
/*----------------------------Menu Grid @media-----------------------------------*/
@media (max-width: 628px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 230px 225px 225px 225px 225px 225px 230px 225px 225px 225px 225px 225px;
  }
  .side {
    grid-template-rows: 230px 225px 225px 225px 225px 230px 225px 225px 225px;
  }
  .bundles {
    grid-template-rows: 225px 225px 225px 225px 225px 225px;
  }
}
/*------------------------Typographic Scale @media---------------------------------------*/
@media (max-width: 615px) {
  .htwo {
    font-size: 1.25em; /* 20 / 16 */
  }
  .fanfoot {
    /*-------------------------------Calc() Example-----------------------------------------*/
    font-size: calc(100% - 1px);
    margin-left: 25%;
    margin-right: 25%;
  }
}

/*---------------------------------------------Flexbox Nav @media----------------------------------------*/
@media (max-width: 524px) {
  ul {
    flex-direction: column;
    align-items: center;
    padding-right: 13%;
  }
  li {
    padding: 10px;
    /* margin-left: 22%;*/
  }
  /*---------------------------------------------Flexbox Footer @media----------------------------------------*/
  section {
    flex-direction: column;
    align-items: center;
  }

  /*----------------------------------Menu @media--------------------------------*/
  .menu2 {
    margin-left: 0.5px;
    margin-right: 0.5px;
  }
  .menu {
    margin-left: 0.05px;
    margin-right: 0.5px;
  }
}
/*----------------------------------Header @media-------------------------------*/
@media (max-width: 465px) {
  header {
    background-image: url(../Images/truckscSMR.png);
    padding-top: 5px;
    padding-bottom: 50px;
    margin-left: 0;
    margin-right: 0;
    margin-top: -5px;
    margin-bottom: -16px;
    background-repeat: no-repeat;
  }
  .logo {
    width: 10.312em; /* 115 / 16 */
    height: 7.187em; /* 165 / 16 */
    /*width: 165px;
    height: 115px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}
@media (max-width: 741px) {
  article img {
    width: 20%;
    height: 20%;
    margin-left: 40%;
    margin-top: 2%;
  }
}
/*-----------------correction for smartphone navbar drift---------------------*/
@media (max-width: 360px) {
  li {
    padding-right: 8%;
  }
}