@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

body {
  padding-top: 56px;
  font-family: 'Roboto', sans-serif;
}
.navbar-brand
{
    font-size: xx-large;
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #222222 !important; }
/* .bg-hero { background-color: #00356b; } */
.bg-hero {
    height: 100%;
    background: linear-gradient(5deg, #042953, #0f4d92, #3d7ec8);
    background-size: 600% 600%;
  
    -webkit-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
  }
  
  @-webkit-keyframes AnimationName {
    0%{background-position:90% 0%}
    50%{background-position:11% 100%}
    100%{background-position:90% 0%}
  }
  @keyframes AnimationName {
    0%{background-position:90% 0%}
    50%{background-position:11% 100%}
    100%{background-position:90% 0%}
}

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.GradientBorder {
  position: relative;
  width: 450px;
  padding: 40px 0;
  font-size: 5em;
  color: #fff;
  text-align: center;
  letter-spacing: 5px;
  background: #020117;
}
.GradientBorder::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2);
  z-index: -1;
}
.GradientBorder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2);
  z-index: -2;
  filter: blur(40px);
}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#63aaff }
.bd-callout-warning { border-left-color:#5f712d }
.bd-callout-danger { border-left-color:#bd5319 }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }