body{
    background-image: url("https://static.vecteezy.com/system/resources/previews/001/984/880/original/abstract-colorful-geometric-overlapping-background-and-texture-free-vector.jpg");
    overflow-y: scroll;
    margin: 0;
}
#date{
    padding: 3px;
    width:100%;
    color:#ffffff;
    font-size:22px;
    background-color: #ea08907a;
    position: inherit;
}
.top-nav{
    padding: 18px;
    background-color: rgba(235, 50, 173, 0);
}

#wth{
    width:500px;
    align-items: center;
    margin:auto;
    box-shadow:4px 6px #000000; 
    padding:5%;
    width:100%;
    background-color: #ffffff89;
    color: rgb(0, 0, 0);
    position:relative;
    margin-bottom: 15px;
}
#c1{
    background-color: #003cff5a;
    padding:10px;
    border-radius: 5%;
    text-decoration:solid;
    font-size: 20px;
    
}
#c3{
    color:#ffffff;
    text-decoration: none;
    background-color: #000000;
    border-radius: 50%;
    padding: 10px;
}

#c3:hover{
    color:#ffffff;
    text-decoration: none;
    background-color: #000000;
    border-radius: 50%;
    padding: 15px;
}




.card-body{
    padding: 50%;
}
.top-nav a{
    text-decoration: none;
    padding: 18px;
    font-size: 22px;
    color: rgb(57, 34, 14);
}

.top-nav a:hover{
    background-color: rgb(255, 0, 115);
    color: whitesmoke;  
}
/* css for icons */

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
}
.fa:hover {
    opacity: 0.7;
}
.fa-github {
    background: #000000;
    color: white;
}

.fa-instagram {
  background: #ca059c;
  color: rgb(255, 255, 255);
}


.icon-bar{
    position:relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%) ;
    transform: translateY(-50%);
}


.icon-bar a{
    display: block;
    text-align: center;
    padding: 10px;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}

.icon-bar a:hover{
    background-color:rgb(0, 0, 0) ;
    color:#ca059c;
}


.body{
    font-size: 30px;
    color:rgb(0, 0, 0);
    text-align: center;
    padding: 1%;
    height: 0%;
    line-break: none;
}


.head{
    background-color: rgb(55, 6, 71);
    font-size: 70px;
    text-align: center;
    border: none;
    border-width: 0%;
    color:#ffffff;
}

.dyn-1{
    padding: 20px;
    background-color: rgb(233, 190, 209);
    box-shadow: #000000 4px 6px 17px;
}

.dyn-1 input{
    background-color:#ffffff;
    width: 50%;
    border: solid 1px;
    border-radius: 2px;
    padding:1%;
    box-shadow: rgb(45, 45, 45) 3px 4px;
    
}
.dyn-1 input:active{
    background-color: rgb(255, 235, 249);
}

.dyn-1 button{
    background-color: #6f1956;
    color:aliceblue;
    padding:1%;
    cursor:grabbing;
    box-shadow: #000000 3px 4px;

}

.dyn-1 button:hover{
    background-color: #ea0890;
    box-shadow: #000000 2px 4px;
}