/*
	Name: Blue madness
    Author: Vi Jackal
    Kinda doing from scratch now yay!
*/

:root {
    --mainblue: #15297F;
    --darkaccent: #787094;
    --darkshade: #161219;
    --lightaccent: #60A5C8;
    --lightshade: #FBF9F9;
    --lightblue: #3A4FA4;
    --lighterblue: #8A99D6;
    --darkblue: #071651;
    --darkerblue: #00020B;
    --purple: #351380;
    --lightpurple: #A189D7;
    --lighterpurple: #5A38A5;
    --darkpurple: #1E0652;
    --darkerpurple: #03000B;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    width: 100%;
    background: var(--darkerpurple);
    color: var(--lightshade);
    font-family: Verdana, Helvetica, Tahoma, Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  p {
      margin:inherit;
      background-color:inherit;
  }
  
  a,
  a:link {
    color: var(--lighterblue);
    text-decoration: none;
  }
  
  a:visited {
    color: var(--lighterblue);
    text-decoration: underline;
  }
  
  a:hover,
  a:focus {
    color: var(--lightblue);
    text-decoration: underline;
  }
  
  hr {
      height: 2px;
      border-width:0;
      color: var(--darkerpurple);
      background-color: var(--darkerpurple);
  }
  
  .emph{
      text-align: center;
      padding: .5rem;
      font-size: 1.5em;
      font-weight: bold;
      margin: 0;
      border-top-right-radius: 1em;
      border-top-left-radius: 1em;
  }
  
  
  /*end of figuring out later*/
  
  .body {
    margin: 1em 2em;
  }
  
  .img{
      width: 100%;
      height: auto;
  }
  
  .content-box {
    background-color: var(--darkshade);
    border-radius: 1rem;
      height: max-content;
      padding: 1rem;
  }
  
  
  .container {
    width: 100%;
      flex:1;
      margin: 1rem auto;
  }
  
  .squish-80 {
      max-width:80%;
  }
  
  .light-accent{
      background-color: var(--lightaccent);
  }
  
  .dark-accent{
      background-color: var(--darkaccent);
  }
  
  
  .flex-column {
    display: flex;
    flex-flow: column wrap;
  }
  
  .flex-row {
    display: flex;
    flex-flow: row wrap;
  }
  
  /*Top Banner*/
  
  #banner {
    width: 100%;
    background-color: var(--mainblue);
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  
  /*Site Logo*/
  
  #logo {
    float: left;
    margin: auto;
  }

  #logo a svg,
  #logo a:link svg,
  #logo a:visited svg{
	height:3.2em;
	width: auto;
	fill: var(--lightshade);
      display:block;
      margin:auto;
  }

  #logo a:hover svg,
  #logo a:active svg{
      fill: var(--lighterblue);
  }
  
  #logo a {
    text-decoration: none;
    line-height: 0;
    display: inherit;
  }
  
  /*Top Navigation*/
  
  #top-menu {
    float: right;
  }
  
  .menu-text {
    margin: auto;
  }
  
  #top-menu a,
  #top-menu a:link,
  #top-menu a:visited {
    flex: 1;
    text-align: center;
    background-color: var(--mainblue);
    color: var(--lightshade);
    padding: 1rem 1rem;
    transition: .3s;
    text-decoration: none;
  }
  
  #top-menu a:active,
  #top-menu a:hover {
    color: var(--darkshade);
    background-color: var(--lighterblue);
  }
  
  /* Breadcrumbs */




  .breadcrumb {
    background: var(--darkshade);
    display: inline-flex;
    border-radius: 1rem;
  }


  .breadcrumb-item {
    background: var(--darkshade);
    position:relative;
    outline: none;
    padding:1rem 2rem;
    border-radius: 0;
    text-decoration: none;
    transition: background .3s linear;
  }

  .breadcrumb-item:hover:after,
  .breadcrumb-item:hover {
    color: var(--darkshade);
    background-color: var(--lighterblue);
}

.breadcrumb-item:focus:after,
.breadcrumb-item:focus{
    color: var(--darkshade);
    background-color: var(--lighterblue);
}


.breadcrumb-item:after,
.breadcrumb-item:before {
  background: var(--darkshade);
  bottom: 0;
  clip-path: polygon(50% 50%, 0% -10%, 0% 110%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: background 0.3s linear;
  width: 2rem;
  z-index: 1;
}


.breadcrumb-item:before {
  background: var(--darkerblue);
  margin-left: 1px;
}

.breadcrumb-item:first-child{
  border-radius: 1rem 0 0 1rem;
  
}


.breadcrumb-item.is-active {
    color: var(--darkshade);
    background-color: var(--lighterblue);
    border-right: none;
    border-radius: 0 1rem 1rem 0;
}

.breadcrumb-item.is-active:after {
    width: 0;
}

.breadcrumb-item.isactive:after{
    width:0;
}



  /*Start of page content*/
  
  #inner {
    width: 90%;
    margin: 1rem auto;
    overflow: hidden;
  }
  
  #welcome {
    max-width: 100%;
    height: auto;
  }
  
  /*Footer*/
  
  footer {
    width: 100%;
    background: var(--darkblue);
  }
  footer ul {
    list-style-type: none;
    margin-top: 1rem;
    padding: 0;
  }
  .foot-box {
    flex: 1;
    background-color: var(--mainblue);
    margin: 1rem;
    padding: 1rem 2rem;
    line-height: 1.32rem;
  }
  #links {
      margin: 1rem;
  }
  #bottom-nav{
      flex: 2;
  }

  /* The smallest of devices (320px and down) */
  
  @media only screen and (max-width: 380px),
      only screen and (max-device-width:380px) {
      .flex-row{
          flex-direction: column;
      }
  }
  
  /* Extra small devices (phones, 600px and down) */
  
  @media only screen and (max-width: 600px),
      only screen and (max-device-width:600px) {
      footer .flex-row{
          flex-direction: column;
      }
  }
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  
  @media only screen and (max-width: 768px),
      only screen and (max-device-width: 768px) {
      #top-menu{
          width:100%;
      }
      #logo{
          width:100%;
      }
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  
  /*@media only screen and (min-width: 768px) {}*/
  
  /* Large devices (laptops/desktops, 992px and up) */
  /*@media only screen and (min-width: 992px) {
    
  }*/
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  /*@media only screen and (min-width: 1200px) {
    
  }*/