/* HTML + Body */
*{
    padding: 0;
    margin: 0;
}

html {
  position: relative;
  min-height: 100%;
}

 body {
 margin-bottom: 60px;
 background-image: url('../images/background.jpeg');
 background-size: cover;
}

/* HEADER */
.name{
    background-color: transparent;
    border-color: transparent;
    float: left;
    width: 290px;
    height: 90px;
    font-family: 'Fredoka One', cursive;
    letter-spacing: 3px;
    font-size: 25px;
    font-weight: 700;
    line-height: 90px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 2px #ce31ce, 0 0 25px #de1dde, 0 0 5px #de1dde;
  }

  a:hover {
    color: #fff;
    text-decoration: none;
  }

.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
}
/* FOOTER */

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #000000!important;
    background-image: url("../images/sky-background.jpeg");
    background-size: cover;
    box-shadow: 0px 1px 12px #de1dde;
}

.text-muted{
    line-height: 55px;
    color: #fff!important;
    font-weight: bold;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
}

/* TEXT FIELDS */
/* .btn-primary {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background-color: rebeccapurple;
    border-color: #007bff;
} */

.btn-group{

    background-color: azure;
}
#portfolio{
padding: 20px;
}
             
.bg-light {
    background-color: #000000!important;
    background-image: url('../images/sky-background.jpeg');
    background-size: cover;
    box-shadow: 0px 1px 12px #de1dde;
        }

.border-bottom {
    border-bottom: none!important;
              }

#text-body{
    font-family: 'Poppins', sans-serif;
    background: #F8F8FF;
    box-shadow: 0 0 5px 7px #F8F8FF;
    border-radius: 4px;
    background: url('../images/background-inverted.jpg');
    color: #000;
    font-weight: bold;
}

.h1, h1 {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 700;
    color: #9932CC;
    text-shadow: 1px 1px 2px #333, 0 0 25px #fff, 0 0 5px #fff;
}

#styled {
    background-color: #F8F8FF;
    box-shadow: 0 0 5px 3px #F8F8FF;
}

#textfield{
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 0 5px 7px #F8F8FF;
    border-radius: 4px;
    background: url('../images/background-inverted.jpg');
    background-size: cover;
    color: #000;
    font-weight: bold;
    padding: 15px;
  }

  .row{
    margin-top: 10px;
    margin-left: 16px;
  }

  #about {
    padding: 20px;
}

#text-about{
    font-size: 20px;
    line-height: 38px;
}

#contact-link{
    font-size: 26px;
    line-height: 38px;
}

#update{
    font-size:25px;
    color:red;
    text-align: center;
}

.text-center::before{
    content:"";
    margin-left:calc(100% - 100%);
  } 

  /*Bootstrap Edits*/
.navbar{
  background-color: #000000!important;
    background-image: url(../images/sky-background.jpeg);
    background-size: cover;
    box-shadow: 0px 1px 12px #de1dde;
}


.name-here{
    background-color: transparent;
    border-color: transparent;
    /* float: left; */
    /* width: 290px;
    height: 70px; */
    font-family: 'VT323', monospace;
    letter-spacing: 3px;
    font-size: 50px;
    font-weight: 700;
    line-height: 7px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 2px #ce31ce, 0 0 25px #de1dde, 0 0 5px #de1dde;
}

.link-name{
    color: #fff;
    font-weight: bold;
    font-size: 27px;
    font-family: 'VT323', monospace;
}

.portfolio{

    background-color:#fff;
}

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
  }
  .row > [class*='col-'] {
    display: flex;
    flex-direction: column;
  }

  .page-footer{

    width: 100%;
    background-image: url("../images/sky-background.jpeg");
    background-size: cover;
    box-shadow: 0px 1px 12px #de1dde;
    color: #fff;
    font-weight: bold;
    font-size: 27px;
    font-family: 'VT323', monospace;
}

.text-body {
    box-shadow: 0 0 17px 9px #Fff;
    text-align: center!important;
}


.btn-primary:hover {
        color: #fff;

        font-weight: bold;
    }
    
    .btn-primary {
        color: #fff;
     
        font-weight: bold;
    }

    .col-sm-4{
    font-size:22px;
    }

    .col-sm-8{
        font-size:22px; 
    }

    @media screen and (max-width: 600px) {
        .nav-link{
          font-size:30px;
        }
      }