/*------------------------------------RULER-----------------------------------------------*/
html,
body {
    font-family: 'Fira Code';
    color: rgb(61, 56, 30);
    
}

body {
    background: linear-gradient(344deg, rgb(66, 68, 70) 25%, rgb(154, 160, 167) 59%, rgb(207, 205, 195) 91%);
}

p {
    color: rgb(35, 24, 46);
}


/* -----------------------------------Containers------------------------------------------ */

.container-fluid {
    padding: 1% 3%;
}

/*------------------------------------Navbar tweaks----------------------------------------*/
.bg-light {
    --bs-bg-opacity: 0.2;
}

.navbar {
    height: auto;
}

.navbar-brand {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #885BA8;
    font-weight: bold;
}

.nav-item {
    padding: 0 18px;
}

.nav-link {
    font-family: 'Segoe UI';
    color: #885BA8;
}

/*------------------------------------Greetings section-----------------------------------*/
.headtext {
    text-align: right;
}

#mypic {
    width: 20%;
    height: auto;
    float: right;
    border-radius: 100%;
    border: none;
    background-color: none;
}

/*------------------------------------Cards------------------------------------------------*/
/*margin for the cards important for mobile view*/
.card {
    text-align: center;
    margin: 1.5rem;
    background-color: #657781;
}

.card-header {
    color: #e2e0d7;
}

.card-title {
    color: #1c1a1d;
    text-align: left;
}

.card-text {
    text-align: left;
}

.btn {
    background-color: #858286;
    width: 15rem;

}

/*-------------------------------------footer section--------------------------------------*/
footer {
    position: relative;
    background-color: transparent;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 30px;
    /* margin: auto;*/
    margin-top: 30%;
    text-align: center;
}

.clickbait {
    color: #f5e076;
}

.foot {
    color: blanchedalmond;
}

/*
@media (max-width: 1028px) {

    #title {
      text-align: center;
    }
  
    .title-image {
      position: static;
      transform: rotate(0);
    }
  }
  */