@property --gradient-angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@supports (display:grid) {
    .blog-items {
    margin: 0 0 0;
      }

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes title-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

:root{
  --border-rad: 10px;
  --banner-clr: rgb(66, 66, 66);
  --light-text: rgb(255,255,255);
  --dark-text: rgb(0,0,0);
  --grey-bg: #dddddd;
  --clr-1: red;
  --clr-2: orange;
  --clr-3: yellow;
  --clr-4: green;
  --clr-5: blue;
  --clr-6: purple;
  --clr-7: pink;
  --scroller: 5;
  --scroll-speed: 30s;
}

body{
  margin: 0 auto;
  display: flex;
  flex-direction: column ;
  width: 1440px;
  max-width: 100%;
  overflow-x: hidden;
  flex-basis: 1440px;
  font-family: Roboto, verdana, sans-serif;
}  

html{
  background: linear-gradient(-50deg, #e05a30, #cf18b7c7, #4cc3ee, #23d55e, #fdfb7a);
  background-size: 400% 400%;
  animation: gradient 35s ease infinite;
  height: 100vh;
}

/*----------------------Top Menu Bar----------------------*/
.card-body{
  padding: 0;
}

.main-top{
  /*background-color: transparent;
  position: absolute;*/
  background-color: var(--banner-clr);
  height: 113px;
  width: 100%;
  top: 0;
  position: sticky;
  z-index: 5;
  /*padding: 20px;*/
}

ul.nav{
  flex-direction: row;
  align-items: center;
  margin: 0 20px 0 20px;
}

ul.nav a{
  margin: 0 20px 0 20px;
  padding: 15px;
  color: white;
  text-decoration: none;
}

.nav-item, 
.mod-list li.active>a,
.mod-list li a:hover{
  font-family: Roboto, verdana, sans-serif;
  color: white;
  text-decoration: none;
}

/*Logo*/
.item-104{
  margin-right: auto;
  font-size: 1.5em;
}

.item-104 a{
  display: flex;
  align-items: center;
}/*-------------------------------------------------*/
  
/* There was a 16px top margin between the breadcrumb bar and the main content */
.container-component>*+*{
  margin: 0;
}
  
/* Adds drop shadow between cards on home page*/
.home-shadow{
  box-shadow: inset 0px 5px 6px rgba(59, 59, 59, .5);
}

img{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*----------------------Menu Button Animation and home page button focus----------------*/
.btn, .nav-item a{
  padding: 15px;
  border-radius: var(--border-rad);
  background-color: #ffffff;
  border: none;
  /*outline: none;*/
  outline-color: transparent;
  position: relative;
  cursor: pointer;
  z-index: 2;
  --background-color: #e3e3e3;
  --border-size: 1px;
  
}

.btn::before,
.nav-item a::before{
	
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
    opacity: 0;
	border: none;
	transition: top, left, right, bottom, border, opacity, 300ms ease-in-out;

}

.btn.btn-border-pop:hover::before,
.btn:focus::before,
.nav-item a:hover::before,
.nav-item a:focus::before,
li.nav-item.item-104 a:focus::before{

    border: var(--border-size) solid var(--background-color);
	top: calc(var(--border-size) * -2);
	left: calc(var(--border-size) * -2);
	right: calc(var(--border-size) * -2);
	bottom: calc(var(--border-size) * -2);
    opacity: 1;
}

/*I don't want the hover border animation for the home/logo button*/
li.nav-item.item-104 a:hover::before,
li.nav-item.item-104 a::before{
  border: none;
}
/*--------------------------------------------------------------*/
  
.container-banner{
  margin: 0;
  align-self: flex-start;
  position: sticky;
  inset: auto;
  overflow: auto;
  height: auto;
}

.h-buttons .btn,
.nav-item a{
   background-color: transparent;
}

div.header, .top-section, .footer-banner, footer.footer{
  background-color: var(--banner-clr);
}

div.header, .logo, .top-section, .wbt-section ul, .quote-section, .signup-section, .signup-box, footer.footer{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.wbt-section, .wbt-section li, .text-section, .signup-text, .site-grid{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wbt-section li p{
  margin: 10px 0 0 0;
}

div.header, .logo{
  color: white;
  justify-content: space-between;
}

div.header{
  height: 100px;
  padding: 0px 20px 0px 20px;
}

.footer-banner img{
  box-shadow: 0 0 0 0;
  height: 50px;
}

.logo a{
  font-size: 1.5em;
  font-family: Roboto, verdana, sans-serif;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.grid-child{
  margin: 0;
  display: flex;
  justify-content: flex-start;
  height: 0;
}

/*------------------breadcrumb styling-------------------------*/
.main-top.card{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  background-color: var(--grey-bg);
  height: 40px;
  top: 113px;
  position: sticky;
}/*-------------------------------------------------*/

.container-component nav{
  background-color: var(--grey-bg);
}

/*remove header title from breadcrumbs*/ 
.card-header{
  display: none;
}

/*remove small top margin from top menu*/
.container-component>:first-child{
  margin-top: 0;
}

img.logo{
  padding: 0;
  margin: 0 20px 0 0;
  width: 75px;
  height: 75px;
  box-shadow: none;
}

.h-buttons a{
  margin: 20px;
  text-decoration: none;
  color: white;
}

.top-section{
  justify-content: center;
  gap: 200px;
  color: white;
  padding: 30px 0 50px 0;
  background-image: url("../images/images/box_pattern.png");
}

.ts-left{
  width: 400px;
}

.ts-right img{
  width: 370px;
  height: 230px;
  border-radius: 5%;
  
}

.wbt-section{
  padding-top: 20px;
}

.wbt-section img{
  width: 150px; 
  height: 150px;
  border-radius: 10%;
  overflow: hidden;
}

.wbt-section li{
  width: 200px;
  padding: 30px;
}

.text-section{
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.t-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 1;
  width: 65%;
  margin: 20px 0 20px 0;
}

.t-section-content{
  margin-top: 20px;
}

.image-block img{
  
  width: 300px;
  height: 200px;
  border-radius: 5px;
  float: right;
  margin: 30px 0 30px 30px;
}

.quote-section{
  background-color:rgb(66, 66, 66);
  height: 300px;
  justify-content: center;
}

.quote-section blockquote q{
  font-size: 30px;
  font-style: italic;
  
}

.quote-section blockquote{
  font-size: 27px;
  color: white;
  width: 600px;
  text-shadow: 1px 1px 1px rgb(153, 153, 153);
}

.signup-section{
  height: 300px;
  background-color: #ffffff;
  justify-content: center;
  padding: 40px;
}

.signup-box{
  justify-content: space-around;
  width: 700px;
  height: 150px;
  background-color: dodgerblue;
  border-radius: 20px;
  color: white;
}

.r-btn{
  position:relative;
  height: var(--rbtn-height);
  width: var(--rbtn-width);
  background: white;
  border-radius: var(--rbtn-radius);
  z-index: 3;

  --rbtn-width: 100px;
  --rbtn-height: 50px;
  --rbtn-radius: 0.4rem;
}

.r-btn::before,
.r-btn::after{
  content: "";
  position: absolute;
  inset: -0.2rem;
  z-index: 2;
  background: conic-gradient(
    from var(--gradient-angle),
    var(--clr-1),
    var(--clr-2),
    var(--clr-3),
    var(--clr-4),
    var(--clr-5),
    var(--clr-6),
    var(--clr-7),
    var(--clr-1)
  );
  filter: blur(3px);
  border-radius: calc(var(--rbtn-radius) * 2);
  animation: rotation 20s linear infinite;
}

@keyframes rotation{
  0% {--gradient-angle: 0deg;}
  100% {--gradient-angle: 360deg;}
}

.r-btn::after{
  filter: blur(3.5rem);
}

.r-btn::before{
  transition: inset, 300ms ease-in-out;
}

.r-btn:hover::before,
.r-btn:focus::before,
.r-btn:focus-within::before,
.r-btn.btn:focus::before{
  animation: rotation 500ms linear infinite;
  inset: -0.3rem;
  background-color: #ffffff;
}

.r-btn .signup-btn{
  height: var(--rbtn-height);
  width: var(--rbtn-width);
  padding: 15px;
  border-radius: var(--border-rad);
  background-color: #ffffff;
  border: none;
  /*outline: none;*/
  outline-color: transparent;
  position: absolute;
  text-decoration: none;
  cursor: pointer;
  z-index: 3;
}

.signup-btn::before{
	
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	border: none;
}

.signup-text p, .signup-text h2{
  margin: 10px 0 10px 0;
}

.footer-banner{
  display: flex;
  color: white;
  justify-content: space-between;
  align-items: center;
  width: 90em;
  margin: 0 0 0 -8px;
}

.f1 p{
  margin: 0;
}

.f1, .f2, .f3{
  width: 300px;
  margin: 15px;
}

/************  News Section *************/

.mod-articlescategory,
ul.tags,
.page-header{
  display: none;
}

/*.blog-item{
  margin: 0 200px 0 200px;
  display: flex;
}*/

.blog-item h2{
  text-size: 1.5rem;
}

.news-h1{
  text-align: left !important;
}

.news{
  min-height: 380px;
  max-width: 940px;
  margin: auto;
}

.news img{
  width: 350px;
  height: 250px;
  float: right;
  border-radius: calc(var(--border-rad)/2);
  margin: 0px 30px 0px 30px;
}

/************  Testing Section *************/

.testing-main{
  background: var(--banner-clr);
  color: var(--light-text);
  padding-top: 20px;
}

.id-wrapper{
	max-width: 50rem;
	margin-inline: auto;
	padding-inline: 1rem;
}

h1.article-title{
  background: linear-gradient(-25deg, yellow, green, orange, pink, yellow);
  background-size: 400% 400%;
  color: transparent;
  background-clip: text;
  animation: gradient 35s ease infinite;
  font-size: 3rem;
  text-align: center;
  padding-bottom: 10px;
}



.id-section-title{
	font-size: 2.25rem;
}

section{
	padding-block: 5rem;
}

.diagonal{
	--skew-angle: -5deg;
	--background: linear-gradient(
		45deg, #12c2e9, #c471ed, #f64f59 
	);
    margin: 30px 175px 0 175px;
	position: relative;
	isolation: isolate;
	
}

.diagonal::after{
	content:'';
	background: var(--background);
		
	position: absolute;
	z-index: -1;
	inset: 0;
	transform: skewY(var(--skew-angle));

}

.spikes{
	--spike-color: var(--banner-clr);
	--spike-width: 30px;
	--spike-height: 30px;
	--mask: 
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/60px 99% repeat-x,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/60px 99% repeat-x;

	position: relative;
	color: black;
	background:
		linear-gradient(
			to right,
			#fdc830,
			#f37335
		)
}

.spikes::before,
.spikes::after{
	content: "";
	position: absolute;
	width: 100%;
	height: var(--spike-height);
	background: var(--spike-color);
  -webkit-mask: var(--mask);
          mask: var(--mask);
	/*-webkit-mask-image: url('assets/triangle.svg');
	-webkit-mask-size: var(--spike-width) var(--spike-height);
	mask-image: url('assets/triangle.svg');
	mask-size: var(--spike-width) var(--spike-height);8?
	/*-webkit-mask-repeat: repeat-x;*/
}

.spikes::before{
	top: -15px;
}

.spikes::after{
	bottom: -15px;
	transform: rotate(.5turn);
}

.wavy {
	color: var(--dark-text);
    --wave-color: var(--body-bg);
	--wave-height: 60px;
	
	--mask:
    radial-gradient(34.99px at 50% 48px,#000 99%,#0000 101%) calc(50% - 60px) 0/120px 51% repeat-x,
    radial-gradient(34.99px at 50% -18px,#0000 99%,#000 101%) 50% 30px/120px calc(51% - 30px) repeat-x,
    radial-gradient(34.99px at 50% calc(100% - 48px),#000 99%,#0000 101%) calc(50% - 60px) 100%/120px 51% repeat-x,
    radial-gradient(34.99px at 50% calc(100% + 18px),#0000 99%,#000 101%) 50% calc(100% - 30px)/120px calc(51% - 30px) repeat-x;
	-webkit-mask: var(--mask);
    mask: var(--mask);
  
	background:
		linear-gradient(
			to right,
			#00f260,
			#0575e6);
}

.scroll-wrapper{
  position: relative;
  width: 70%;
  height: 120px;
  margin-top: 20px;
  margin-inline: auto;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  )
}

@keyframes scrollLeft{
  to{
    left: -200px;
  }
}
  
.scroll{
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: var(--border-rad);
  left: max(calc(200px * var(--scroller)), 100%);
  animation: scrollLeft var(--scroll-speed) linear infinite;
  box-shadow: 3px 3px rgba(59, 59, 59, .5);
}

.scroll img{
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: var(--border-rad);
}

.scroll01{
  animation-delay: calc(30s/var(--scroller) * (var(--scroller) - 1) * -1);
}

.scroll02{
  animation-delay: calc(30s/var(--scroller) * (var(--scroller) - 2) * -1);
}

.scroll03{
  animation-delay: calc(30s/var(--scroller) * (var(--scroller) - 3) * -1);
}

.scroll04{
  animation-delay: calc(30s/var(--scroller) * (var(--scroller) - 4) * -1);
}

.scroll05{
  animation-delay: calc(30s/var(--scroller) * (var(--scroller) - 5) * -1);
}

/********************************** Infographics******************************/

.blog h1{
  margin-top: 40px;
  text-align: center;
}
  
.infograph{

   min-height: 380px;
   max-width: fit-content;
   margin: auto;
   margin-top: 40px;
  
}