/* main style guidelines */

html {
    background-color:#03496E;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 90%;
}

/*Ariah*/
.htmlMain {
  background-image: url("purpGalaxy.gif");
  /* https://media3.giphy.com/media/3og0IV7MOCfnm85iRa/giphy.gif */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: fixed;

  background-color:#03496E;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 90%;
}

body {
    line-height: 1.4;
    background-color:rgba(6, 109, 165, 0.4);
    margin:3.5vh 7% 20vh 7%;
    max-width:1200px;
}

#Jbody {
  line-height: 1.4;
    background-color:rgba(6, 109, 165, 1);
    margin:3.5vh 7% 20vh 7%;
    max-width:1200px;
}

#teamA {
  position: relative;
  height: auto;
  width: 100%;
  margin: 0 auto;
  padding-bottom:10vh
}

#bioAriah {
  text-align:center;
  font-size: 140%;
  padding-bottom:5vh;
  margin: .5vh 10vw 0 10vw;
}

#bioMarc {
  text-align:center;
  font-size: 140%;
  padding-bottom:5vh;
  margin: .5vh 10vw 0 10vw;
}

#bioMax {
  text-align:center;
  font-size: 140%;
  padding-bottom:5vh;
  margin: .5vh 10vw 0 10vw;
}

#bioJason {
  text-align:center;
  font-size: 140%;
  padding-bottom:8vh;
  margin: .5vh 10vw 0 10vw;
}

#bioTitle {
  text-align: center;
  font-size: 120%;
}

#bioName {
  text-align:center;
  font-size: 170%;
  color:#010E29;
}

/* on landing page for team photos */
/* 1 - bigger pics 2 - smaller up at top pics */
.profilepic1 {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  opacity:75%;
}

.profilepic1:hover {
  opacity:100%;
  box-shadow: 0 20px 20px rgba(255, 255, 204,0.8), 0 6px 6px rgba(255, 255, 204,0.6);
}

.profilepic2 {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  opacity:75%;
}

.profilepic2:hover {
  opacity:100%;
  box-shadow: 0 20px 20px rgba(255, 255, 204,0.8), 0 6px 6px rgba(255, 255, 204,0.6);
}

#maxB {
  background-color: crimson;
}

/*Max's ID*/
#maxHtmL{
  background-color: crimson;
}

/*Max's ID*/
#maxPowers{
  font-size: 28px;
}

/*Max's ID*/
#maxVillian{
  font-size: 20px;
}

/*Max's ID*/
#maxLists{
  text-align: left;
}

/*Max's ID*/
.maxBanner{
  max-width: 1200px;
}

#styleBody {
  line-height: 1.4;
    background-color:#066DA5;
    margin:0px 50px 50px 150px;
    max-width:1200px;
}

h1 {
     text-align: center;
     font-size: 2.8rem;
     font-weight:400;
     line-height:2rem;
 }

.h1a {
   text-align: center;
   font-size: 4rem;
   font-weight: 500;
   line-height:2.5rem;
   
}

/*Ariah's*/
h2 {
  text-align: center;
  font-size: 2.6rem;
  font-weight: 300;
  line-height:2rem;
}

.paddedh2 {
  padding-top: 10px;
}

.extraPadingh2 {
  padding-top: 40px;
}

h3 {
  text-align:center;
  padding-top:30px;
  font-size:2.0rem;
  line-height:2rem;
}

h4 {
  text-align: center;
  padding: 5px;
  font-size: 1.6rem;
  font-weight: 180;
  line-height: 2rem;
}

 p {
     text-align:center;
     padding: 5rem 0;
 }

 /*Max's ID*/
 #maxP p{
   font-family:monospace;
   background-color: rgba(0, 0, 0, 0.425);
   color: white;
   font-size: 18px;
 }

 /*Max's ID*/
 #maxP h2{
   background-color:rgba(0, 0, 0, 0.425) ;
   color: white;
   padding: 20px;
 } 

 em {
   color: #FCE694;
 }

 footer {
   padding-bottom:100px;
 }
 
/*Max's ID*/
 #maxFooter footer{
   background-color:rgba(0, 0, 0, 0.425) ;
 }

 /*Max's ID*/
 #maxfoot p{
   text-align: left;
   font-size: 13px;
   color: white;
 }
/* Page Layout */
#Page {
    width:1000px;
    margin:30px auto;
}

nav {
  text-align: center;
  margin: auto;
  justify-content:space-evenly;
}

#banner {
    background-color:rgba(54, 151, 203, 0.4);
    padding-top:2%;
    margin-bottom:1.5rem;
    height:5%;
}

    #banner nav ul {
      list-style-type: none;
      margin: 5px 30px 0 30px;
      padding: 0.15rem 0;
      overflow: hidden;
      background-color: #333333;
    }
            
    #banner nav li {
      float: left;
    }
            
    #banner nav li a {
      display: block;
      color: #F9FFFD;
      text-align: center;
      padding: 16px;
      text-decoration: none;
    }
            
    #banner nav li a:hover {
      background-color: #010E29
    }
 
    /* Ariah's */
.phantastickBanner {
  width: 100%;
  max-width: 1500px;
  height: auto;
  /*above three lines: needed to make banner responsive to webpage size*/
  /* original img source: https://www.popshopguide.com/funko-pop-licenses/pop-marvel/fantastic-four/ */
}   


#HomePage {
  background-color:rgba(54, 151, 203, 0.5);
  
  padding:0px 10px 10px 30px;
}

/* for tags.html */
#imgInvisi {
  margin-left: 325px;
}

#YoutubeVid {
  padding-left: 260px;
}

/* for nested.html */
#ariahNested {
  vertical-align: center;
  padding-left: 240px;
}

/* ----------------------------MARC STYLES--------------------------------------------------------------------------------------- */
#navmenu {
  background-color: #F6EDA9;
  border-color: #333333;
  padding:10px 10px 10px -10px;
  height:100px;

}

#navmenu h1 {
  color: #333333;
}

#navmenu ul {
  list-style-type: none;
  margin: auto;
  overflow: hidden;
  background-color: #333333;
}

#navmenu li {
  float: left;
}

#navmenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

#navmenu li a:hover {
  background-color: #111111;
}

#TableMarc {
  border-collapse: collapse;
  width: 100%;
}

  #TableMarc th, td {
    text-align: center;
    padding: 8px;
    background-color: white;
  }

  #TableMarc th {
    background: #3697CB;
    color: white;
  }


#Blue {
  color: blue;
}

#Violet {
  color: violet;
}

#tagsize {
  font-size: larger;
}

#noli {
  list-style: decimal-leading-zero;
  font-size: 5rem;
}

#noli span {
  font-size: 0.25em;
}

.gifsize {
  width: 150px;
  height: 150px;
  float: left;
  border-radius: 50%;
}
.gifsize2 {
  padding-left: 40em;
}

.tablesize {
  width: 100px;
  height: 100px;
  font-size: 30;
}

table, th, td {
  border: 3px solid #333333;
  text-align: center;
}
th, td {
  padding: 15px;
  font-size: large;
}

.headsize {
  color: #333333;
  border-color: #333333;
  background-color: #F6EDA9;
  border-width: 2px;
  border-style: solid;
  border: 10px 20px 10px 20px;
  font-size: 30;
  margin: 45px 0 0 0; 
  text-align: center;
  padding: 5px 0;
}

.headsize2 {
  color: #F6EDA9;
  font-size: 50px;
  padding-top: -20px;
  text-align: middle;
}

.headsize3 {
  color:yellow;
  font-size: 40;
  text-align: center;
  border-style: dotted;
  border-color: red;

}
 
.navtext {
  font-size: 20;
  text-indent: 2.0em;
  padding: 10px 0;
  text-align: left;  
  margin: 0 3vw 10vh 3vw;
}

.navtext p {
  padding: 5px;
}

.navtext hr {
  border-color: #F6EDA9;
  border-style: ridge;
}

#wrap {
  font-size: 20;
  background-color: #F6EDA9;
  border-radius: 20px;
  box-shadow: 5px 5px 5px #333333;
  margin-bottom: 1.5rem;
  overflow: hidden;
  text-indent: 2.0em;
  padding: 0 5px;
  text-align: justify;
}

.imgsize {
  font-size: 20;
  width: 307px;
  height: 582px;
  padding: 20px;
  float: right;
     
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}



.imgsize2 {
  width: 480px;
  height: 320px;
}

.aligntext {
  text-align: center;
  margin: auto;
  padding: 20px 20px;
}
   
/* ----------------------------END MARC STYLES--------------------------------------------------------------------------------------- */

/*Max - List*/ 

#TorchBanner {
  background-color:#904643;
  padding:1rem 2rem 0 2rem;
  margin-bottom:1.5rem;
  height:100px;
  border: solid;
  border-width: thin;
} 

.torchImgSize {
  font-size: 20;
  width: 200px;
  height: 379.15px;
  padding: 20px 0 0 0;
  float: left;
     
}

/*Max's ID*/
#maxIMG.torchImgSize{
  width: 200px;
  height: 200px;
  padding: 10px;
  float: left
}

.torchImgSizeRight {
  font-size: 20;
  width: 200px;
  height: 379.15px;
  padding: -15px 0 20px 0;
  float: right;
     
}

.torchNavText {
  font-size: 20;
  text-indent: 2.0em;
  padding: 10px 0;
  text-align: right;
     
}

.torchNavTextLeft {
  font-size: 20;
  text-indent: 2.0em;
  padding: 10px 0;
  text-align: left;
     
}


#TorchPage {
  width:1200px;
  margin:1.5rem auto;
}

/* Card.css */

.card {
  background-image: url("cloudsgif.webp");
  height: 300px;
  width: 200px;
  background-color: rgba(42,196,231,0.582);
  margin: 20px;
  padding: 20px;
  border: 5px ridge rgb(218, 165, 32);
  box-shadow: 0 7px 15px 0 rgba(0,0,0,0.609);
  display: inline-block;
  border-radius: 10px;
  color: white;
}
.inner {
  padding: 10px;
  font-size: large;
  font-weight: bold;
  color: whitesmoke;
  background-color: rgba(218, 165, 32, 0.25);
  border: 5px solid rgba(0,0,0,0.609);
}

.image {
  margin: 20px;
  height: 40px;
  width: 40px;
}

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


/* Ariah's css */

.riaHTML {
  background-color:#BB7E3F;
  width:100%;
  padding-left: auto;
}

.riaNav {
  text-align: center;
  width: 100%;
  padding-bottom: 100px;
}

.riaBody {
  background-color:#F49849;
}

.riaPage {
  background-color:#BB7E3F;
  width: 90%;
}

#riaBanner {
  padding-top:2%;
  margin-bottom:1rem;
  height:8%;
  background-color:#BB7E3F;
}

  #riaBanner nav ul {
    list-style-type: none;
    margin: 5px 30px 0 30px;
    padding: 0.15rem 0;
    overflow: hidden;
    background-color: #333333;
  }
        
  #riaBanner nav li {
    float: left;
  }
          
  #riaBanner nav li a {
    display: block;
    color: #F9FFFD;
    text-align: center;
    padding: 16px;
    text-decoration: none;
  }
          
  #riaBanner nav li a:hover {
    background-color: #010E29
  }

  /* for background used: https://www.gradient-animator.com/ */
  .riaCSS-selector {
    width:100%;
    padding-left: auto;
    
    background: linear-gradient(216deg, #eeb982, #d99147, #ae6c28, #56300a);
    background-size: 800% 800%;

    -webkit-animation: backgroundSpice 30s ease infinite;
    -moz-animation: backgroundSpice 30s ease infinite;
    animation: backgroundSpice 30s ease infinite;
}

@-webkit-keyframes backgroundSpice {
    0%{background-position:87% 0%}
    50%{background-position:14% 100%}
    100%{background-position:87% 0%}
}
@-moz-keyframes backgroundSpice {
    0%{background-position:87% 0%}
    50%{background-position:14% 100%}
    100%{background-position:87% 0%}
}
@keyframes backgroundSpice {
    0%{background-position:87% 0%}
    50%{background-position:14% 100%}
    100%{background-position:87% 0%}
}

.riaMain {
  text-align: right; 
  font-size: 20px; 
  margin: 0 5vw 5vh 5vw;
  padding: 0 1vw 0 1vw;
  display:flex;
}

.riaMainAlt {
  text-align: justify; 
  font-size: 20px; 
  margin: 0vh 5vw 5vh 5vw;
  padding: 0 1vw 0 1vw;
  
}

.riaMainCent {
  text-align: center; 
  font-size: 20px; 
  margin: 0vh 5vw 5vh 5vw;
  padding: 0 1vw 0 1vw;
  
}

.riaImage {
  width: 90%; 
  max-width: 900rem; 
  margin-left:0px;
  height: auto;
  padding: 0 1vw 0 1vw;
}

.riaImage2 {
  width: 40%; 
  max-width: 400rem; 
  margin-left:0px;
  height: auto;
  padding: 0 1vw 0 1vw;
}

.clobberinAnimate {
  text-align: center;
  font-size: 100px;
  margin-top: 80px;
  color: #000000;
  animation: clobberin 15s steps(15) infinite;
}

@keyframes clobberin {
  0%, 100%{opacity: 0; }
  10%, 80%{opacity: 1; }
}

.riaVideo {
  width: 100%;
  max-width: 800px;
  height: auto;
  
  float:left;
  padding-left:500px;
}

/*Jason's */
#navmenuu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

#navmenuu li {
  float: left;
}

#navmenuu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

#navmenuu li a:hover {
  background-color: #111111;
}
div.a{
  text-align: left;
 text-decoration-line: underline;
}
div.b{
  text-align: center;
}
hr.a{
  height: 2px;
  background-color: #0000ff;
  border: none;
}
div.c{
  text-align: center;
  font-weight: bold;
  font-size: 25px;
  border-radius: 10px;
    width: 200px;
height: 100px;

background-color: red;
position: relative;
animation-name: example;
animation-duration: 8s;
animation-name: About Jason Tipp ;
animation-iteration-count: infinite;
animation-direction: alternate;


  }
  
  @keyframes example {
    from{left:0px}
    to{left: 1000px}
    
0%   {background-color: red;}
25%  {background-color: rgb(0, 255, 115);}
50%  {background-color: blue;}

}