/* You can add custom CSS and extend Boostrap styles in this file. Remember, Bootstrap is just CSS at the end of the day! */

/* 01161E Rich Black
124559 Midnight Green
598392 Air Force Blue
AEC3B0 Ash Gray
EFF6E0 Beige */

body {
    background-color: #01161E;
    color: #EFF6E0;
}
  
#footer {
    margin-top: 20px;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #EFF6E0;
}
  
#circle-image {
    border: 2px solid #EFF6E0;
    width: 25%;
    /* width: 100px; */
    border-radius: 100%;
    position: relative;
    margin-top: 15%;
}
  
header#hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(https://t4.ftcdn.net/jpg/05/54/47/79/360_F_554477926_yKEcMeDTD1oLqKQCjvpryeT5zHLMunNh.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    padding-bottom: 10%;
    text-align: center;
}
  
h2{
    margin: 20px;
    text-align: center;
}
  
section#mission img {
    width: 100%;
    height: 40vh;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    padding-bottom: 10px;
}
  
section#mission p {
    margin: 20px;
}
  
section#skills {
    background-color: #AEC3B0;
    text-align: center;
    color: #124559;
    padding: 5px;
}
  
section#contact {
    margin-bottom: 20px;
}
  
section#contact h1{
    margin-top: 20px;
    text-align: center;
    color: #EFF6E0;
}
  
section#contact a{
    color: inherit;
}
  
section#contact i:hover{
    color: #598392;
    transition: 0.3s;
}
  
section#Anime {
    margin-top: 50px;
    padding-top: 20px;
    padding-bottom: 50px;
    background-color: #598392;
}
  
.carousel-item img {
    object-fit: cover;
    object-position: center;
    height: 50vh;
    overflow: hidden;
}
  
.carousel-item:after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.3);
}
  
.carousel-caption {
    z-index: 1;
}
  
h5 {
    font-size: 40px;
}
  
#mission-target,
#skills-target,
#contact-target,
#anime-target {
    position: relative;
    top: -90px;
}