body{
    background:rgb(194 246 250 / 58%);
    font-family: 'Lato', 'Open sans','sans-serif';
}

header{
    position:fixed;
    top:0;
    right: 0;
    left:0;
    background: #00A4B1;
    color:rgb(243 255 241);
    text-align: center;
    padding: 0;
    font-size: 18px;
    line-height: 45px;
}

table{
    font-size: 14px;
    text-align: center;
    margin: 80px auto;
    width: 75%;
    box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.3);
    line-height: 25px;
    border-spacing: 0;
    border-radius: 10px;
}

/* Specifying the width for each the columns */
#sn{
    width: 4%;
}

#title{
width: 60%;
}

#demo{
    width: 18%;

}

#code{

    width: 18%;
}


table tr.title{
    background:#00A4B1;
    color:rgb(243 255 241); 
    font-size: 16px;
    height: 35px;
}

tr.title th:first-child {
    border-top-left-radius: 10px;
}
tr.title th:last-child {
    border-top-right-radius: 10px;
}

table tr, table td{
    padding: 8px;
    height: 30px;
}

/* Alternating the colors of the rows */
tr:nth-child(even){
background-color:#c5f5f8;
}


/* Button for View Demo */
.Ybutton {
    background-color:#f5bc00;
    border: none; 
    color:rgb(243 255 241); 
    padding: 3px 10px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block;
    font-size: 13px; 
    cursor: pointer; 
    margin-top: 5px;
    box-shadow: 0px 4px 15px 10px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    font-weight: bold;
  }

/* Button for View Code */
  .Pbutton {
    background-color: #ee4266; 
    border: none; 
    color:rgb(243 255 241); 
    padding: 3px 10px; 
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px; 
    margin-top: 3px;
    box-shadow: 0px 4px 15px 10px rgba(0, 0, 0, 0.07);
    border-radius: 15px;
    font-weight: bold;
  }  
/* Universal button link */
a{
    text-decoration: none;
    color: inherit;
}

/* Button hover */
.Pbutton:hover, .Ybutton:hover{
    text-decoration: none;
    background-color:#00A4B1;
    box-shadow: 1px 1px 10px 3.3px #00a5b1b3;
}

