html {
  background-color: rgb(235, 235, 235);
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Set core body defaults */
body {
  font-family: Georgia, 'Times New Roman', Times, serif, Arial;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1;
  display: grid;
  place-content: center;
  min-height: 100vh;

  font-family: var(--ff-primary);
  font-weight: var(--fw-400);
}
.body2 {
  width: 60%;
  float: center;
  margin-left: 20%;
  margin-right: 20%; 
}
:root {
  --clr-primary-400: 263 55% 52%;
  --clr-secondary-400: 217 19% 35%;
  --clr-secondary-500: 219 29% 14%;
  --clr-neutral-100: 0 0% 100%;
  --clr-neutral-200: 210 46% 95%;
  --clr-neutral-300: 0 0% 81%;

  --ff-primary: "Barlow Semi Condensed", sans-serif;

  --fw-400: 500;
  --fw-700: 600;

  --fs-300: 0.6875rem;
  --fs-400: 0.8125rem;
  --fs-500: 1.25rem;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: bloc;
}
 /* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%; 
  }
.no-underline a {
  text-decoration: none;
  font-size: 17px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Set of font-style, etc... */
h1{
  text-decoration: none;
  font-weight: bold;
  display: block;
}
p1 { 
  color: rgb(185, 0, 0);
}
article p {
  font-size: 1rem;
}
article a {
  text-decoration: none;
}
a:hover { 
  color: rgb(157, 29, 0); text-decoration: none;
}
p2 {
  color: rgb(47, 122, 156);
}
p3 {
  font-family:'Times New Roman', Times, serif; 
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
p3h {
  font-weight: bolder;
  font-family:'Times New Roman', Times, serif; 
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/*----!Important! that can be manipulated---- */


  /* Titlehead */
  .titlehead {
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 20px;
    text-align: center;
    background: rgb(219, 219,219);
  }
  .header__flex-child {
    display: flex;
    flex: 1;
  }
  /* Slideshow */
  .slideshow-style {
    display: table;
    clear: both;
    display: block;
    overflow-x: auto;
    padding: 0.01em 5px;
    margin-bottom: 16px;
    height: 100%;
    width: 100%;
  }
  /* Headline */
  .Quicknews__headline, .latest__post {
    border-bottom: 1px solid #bdbdbd;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .Quicknews__headline {
    color: #494949;
    font-family: "DM Serif Display",Georgia,serif;
    font-size: 1.5rem;
    letter-spacing: .03125rem;
    line-height: 2rem;
  }
  .three-column__container {
    padding-right: .78125rem;
    padding-left: .78125rem;
    max-width: 1225px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
  }
  .discord {
    text-align: center;
  }
  /* Left column */
  .leftcolumn {
    float: left;
    width: 22%;
    text-decoration: none;
    font-family:  'Arial', Arial, sans-serif;
    overflow-y: scroll hidden;
  }
  /* Left mid column*/
  .leftmid {
    float: left;
    width: 22%;
    margin-left: 20px;
    text-decoration: none;
    font-family:  'Arial', Arial, sans-serif;
  }
  /* Left mid2 column*/
  .leftmid2{
    float: left;
    width: 22%;
    margin-left: 20px;
    text-decoration: none;
    font-family:  'Arial', Arial, sans-serif;

  }
  /* Right column */
  .rightcolumn {
    float: right;
    width: 100%;
    padding-right: 50px;
    
  }
  /* Add a card effect for articles */
  .card {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    margin-top: 10px;
  }
  label {
    color: rgb(132, 132, 132);
  }


  /* Grid -Quick News- */
  .content-grid { 
   display: grid; 
   gap: 1.5rem;
   grid-auto-columns: 1fr;
   grid-template-areas:
   'one'
   'two'
   'three'
   'four'
   'five';


   padding-block: 2rem;
   width: min(95%, 70rem);
   margin-inline: auto;
  }
  .content {
    font-size: var(--fs-400);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
  }
  .content .quote {
    background-image: url("./images/bg-pattern-quotation.svg");
    background-repeat: no-repeat;
    background-position: top right 10%;
  }
  .content .position {
    font-size: var(--fs-300);
    opacity: 0.5;
  }
  .content .name {
    font-size: 2rem;
    font-weight: var(--fw-400);
    line-height: 1;
  }
  .content > p:first-of-type {
    font-size: var(--fs-500);
    line-height: 1.2;
  }
  .content > p:last-of-type {
    opacity: 0.7;
  }
  .content :nth-child(1) {
    grid-area: one;
  }
  .content:nth-child(2) {
    grid-area: two;
  }
  .content:nth-child(3) {
    grid-area: three;
  }
  .content:nth-child(4) {
    grid-area: four;
  }
  .content:nth-child(5) {
    grid-area: five;
  }
  
  @media screen and (min-width: 33em) {
    .content-grid {
        grid-template-areas:
        "one one"
        "two three"
        "five five"
        "four four";
    }
  }
  @media screen and (min-width: 38em) {
    .content-grid {
      grid-template-areas:
       'one one'
       'two five'
       'three five'
       'four four';
    }
  } 
  @media screen and (min-width: 54em) {
    .content-grid {
        grid-template-areas:
        "one one two"
        "five five five"
        "three four four";
    }
  } 
  @media screen and (min-width: 75em) {
    .content-grid {
        grid-template-areas:
        "one one two five"
        "three four four five";
    }
  }
 

  /* utilities */
.flex {
  display: flex;
  gap: var(--gap, 1rem);
}
.flow > *:where(:not(:first-child)) {
  margin-top: var(--flow-spacer, 1em);
}
.green-westburry-100 {
  background: rgba(6, 197, 6, 0.918);
}
.red-westburry-100 {
  background: rgba(255, 0, 0, 0.76);
}
.red-westburry-200 {
  background-color: hsl(0, 100%, 65%);
}
.tangerine-westburry-100 {
  background: #ff2301;
}
.darkred-westburry-100 {
  background: #9e0000;
}
.bg-primary-400 {
  background: hsl(var(--clr-primary-400)); 
}
.bg-secondary-400 {
  background: hsl(var(--clr-secondary-400));
}
.bg-secondary-500 {
  background: hsl(var(--clr-secondary-500));
}
.bg-neutral-100 {
  background: hsl(var(--clr-neutral-100));
}
.text-neutral-100 {
  color: hsl(var(--clr-neutral-100));
}
.text-secondary-400 {
  color: hsl(var(--clr-secondary-400));
}
.border-primary-400 {
  border: 2px solid #decafc;
}

  /* Clear floats after the columns */
.row :after {
    content: "";
    display: table;
    clear: both;
}
   
@media screen and (max-width: 00px) {
    .leftcolumn, .rightcolumn, .leftmid, .leftmid2, .body, .body1, .body2
    {
      width: 100%;
      padding: 0;
    }
}

/* Sidebar */
#fullColumn.cryptoPageWithVideo .genTbl.crossRatesTbl {
    margin-top: 5px;
}
.genTbl.crossRatesTbl {
    margin-top: 14px
;
}
.wideTbl.genTbl {
    border-collapse: collapse;
}
.mostActiveStockTbl {
    margin-top: 10px;
    position: relative;
}
.elpTbl {
    table-layout: fixed;
}
.genTbl {
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: grey;
}
:root {
  --insights-marketing-spacing-bottom: 35px;
}
:root {
  --payment-form-cta-color: #ff1901;
  --payment-form-focused-color: #838383;
}
:root {
  --sale-color: #ff0000;
  --premium-color: #ff1901;
  --sale-text-shadow-color: rgba(144, 158, 172, 0.28);
}
.tableFilterIcon {
  background-image: url(https://i-invdn-com.investing.com/newSiteIconsSprite_v42j.png);
  background-position: -111px -202px;
  display: inline-block;
  height: 12px;
  width: 14px;
  position: relative;
  cursor: pointer;
}
i {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}
script {
  display: none;
}

  /* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
    margin-top: 20px;
}
footer { 
    height: end;
}
footer p {
    color: rgba(255, 255, 255, 0.685);
    background-color: rgba(0, 0, 0, 0.62);
    padding-top: 50px;
    font-style: italic;
    padding-bottom: 50px;
    text-align: center;
    margin-top: 200px;    
}