style1.css

/* Add a black background color to the top navigation */
body {
    margin-bottom: 100px;
}
.topnav {
    background-color: #333;
    overflow: hidden;

    border-radius: 15px;
    border-style: inset;
    border-color: grey;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left; 
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: rgba(214, 18, 28, 0.712);
    color: white;
  }
  
  .card {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    display: inline-block;
    width: 15%;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 1px rgb(126, 126, 126);
    border-style: double;
  }

  .Details {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    position: relative;
    display: inline-block;
    width: 81.32%;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 1px rgb(126, 126, 126);
    border-style: double;
  }

  .MoreHere {
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    display: inline-block;
    width: 15%;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 1px rgb(126, 126, 126);
    border-style: double;
  }

  .card img {
      display: block;
      margin: auto;
      width: 100%;
      height: 407px;
      border-radius: 5px;;
  }

  .cardtitle {
      font-style: italic;
      font-size: 20px;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }

  .cardtitle:visited, .cardtitle:link {
    background: -webkit-linear-gradient(rgb(255, 0, 0), rgb(189, 106, 106));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  .FrenchFry {
    font-style: italic;
    font-size: 20px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding-right: 2px !important;
  }
  #TheFrenchFry1 {
    background: -webkit-linear-gradient(rgb(0, 0, 255), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #TheFrenchFry2 {
    background: -webkit-linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #TheFrenchFry3 {
    background: -webkit-linear-gradient(rgb(255, 0, 0), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 15px;
  }

  #TheQuantumRipper {
    background: -webkit-linear-gradient(rgb(0, 140, 255), rgb(9, 46, 128));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #TheShrub {
    background: -webkit-linear-gradient(rgb(166, 70, 255), rgb(138, 138, 138));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }
  
  #NotAPhaseMom {
    background: -webkit-linear-gradient(rgb(0, 0, 0), rgb(102, 102, 102));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }
  
  #French {
    background: -webkit-linear-gradient(rgb(0, 140, 255), rgb(9, 46, 128));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #MSIAgent {
    background: -webkit-linear-gradient(rgb(255, 7, 7), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #Futura {
    background: -webkit-linear-gradient(rgb(240, 240, 240), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #Tangerine {
    background: -webkit-linear-gradient(rgb(242, 133, 0), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #Dragon {
    background: -webkit-linear-gradient(rgb(0, 255, 0), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #TV {
    background: -webkit-linear-gradient(rgb(139,69,19), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #Crack {
    background: -webkit-linear-gradient(rgb(215, 255, 254), rgb(0, 0, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #MAC{
    background: -webkit-linear-gradient(rgba(233, 160, 255, 0.514), rgb(116, 116, 116));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #Dell {
    background: -webkit-linear-gradient(rgb(108, 108, 108), rgb(182, 181, 181));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #Dell2 {
    background: -webkit-linear-gradient(rgb(215, 255, 254), rgb(255, 255, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  #Rasp {
    background: -webkit-linear-gradient(rgb(132, 1, 255), rgb(255, 255, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 10px;
  }

  .cardtitle:hover {
      color: rgb(255, 104, 104);
  }

  .cardtitle:active {
    color: rgb(190, 65, 65);
 }

  .container {
    padding: 2px 16px;
    text-align: center;
  }

  .WorkPCs {
      padding-top: 30px;
  }


  footer {
      background-color: rgb(58, 58, 58);
      display: block;
      box-sizing: border-box;
      border-radius: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
      color: white;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      text-align: center;
  }