/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("img/wideBG.png");
  color: black;
  font-family: Verdana;
}

@font-face {
  font-family: neuropol;
  src: url("neuropol x free.ttf");
}

.glass-card {
  width: 316px;
  height: 180px;
  background: rgba(80, 100, 120, 0.4);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    /*inset 0 1px 0 rgba(180, 255, 255, 0.5),
    inset 0 -1px 0 rgba(180, 255, 255, 0.1), */
    inset 0 0 16px 8px rgba(150, 180, 225, 0.6);
  position: relative;
  overflow: hidden;
  z-index: -1;
  margin-left: 32px;
}

.glass-card::before {
  /*content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(120, 255, 255, 0.8),
    transparent
  );*/
}

.glass-card::after {
  /*content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(180, 255, 255, 0.8),
    transparent,
    rgba(180, 255, 255, 0.3)
  );*/
} 

.card-tab {
  width: 360px;
  height: 240px;
}

h2 {
  background-image: linear-gradient(to bottom, rgb(180, 180, 210) 20%, rgb(120, 120, 150) 49%, rgb(80, 80, 100) 51%, rgb(20, 20, 25) 80%, rgb(50, 50, 55) 100%);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 80px;
  color: rgba(255, 255, 255, 1);
  position: relative;
  border-radius: 32px;
  z-index: 2;
  bottom: -83px;
  font-family: neuropol;
  font-size: 24px;
  font-weight: normal;
  border-style: solid;
  border-color: rgb(120, 200, 255);
  border-width: 1px;
}

button {
  background-image: linear-gradient(to bottom, rgb(180, 180, 210) 20%, rgb(120, 120, 150) 49%, rgb(80, 80, 100) 51%, rgb(20, 20, 25) 80%, rgb(50, 50, 55) 100%);
  color: rgba(255, 255, 255, 1);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 80px;
  padding-right: 32px;
  position: relative;
  border-radius: 32px;
  z-index: 2;
  bottom: 107px;
  font-family: neuropol;
  font-size: 24px;
  border-style: solid;
  border-color: rgb(120, 200, 255);
  border-width: 1px;
}

button:hover {
  background-image: linear-gradient(to bottom, rgb(135, 135, 158) 20%, rgb(90, 90, 112) 49%, rgb(60, 60, 75) 51%, rgb(15, 15, 18) 80%, rgb(37, 37, 41) 100%);
  color: rgba(255, 255, 255, 1);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 80px;
  padding-right: 32px;
  position: relative;
  border-radius: 32px;
  z-index: 2;
  bottom: 107px;
  font-family: neuropol;
  font-size: 24px;
  border-style: solid;
  border-color: rgb(120, 200, 255);
  border-width: 1px;
}

.link-button {
  background-image: linear-gradient(to bottom, rgb(180, 180, 210) 20%, rgb(120, 120, 150) 49%, rgb(80, 80, 100) 51%, rgb(20, 20, 25) 80%, rgb(50, 50, 55) 100%);
  color: rgba(255, 255, 255, 1);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 80px;
  padding-right: 32px;
  position: relative;
  border-radius: 32px;
  z-index: 2;
  bottom: 72px;
  font-family: neuropol;
  font-size: 24px;
  border-style: solid;
  border-color: rgb(120, 200, 255);
  border-width: 1px;
  white-space: nowrap;
}

.link-button:hover {
  background-image: linear-gradient(to bottom, rgb(135, 135, 158) 20%, rgb(90, 90, 112) 49%, rgb(60, 60, 75) 51%, rgb(15, 15, 18) 80%, rgb(37, 37, 41) 100%);
  color: rgba(255, 255, 255, 1);
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 80px;
  padding-right: 32px;
  position: relative;
  border-radius: 32px;
  z-index: 2;
  bottom: 72px;
  font-family: neuropol;
  font-size: 24px;
  border-style: solid;
  border-color: rgb(120, 200, 255);
  border-width: 1px;
  white-space: nowrap;
}

img {
  margin-bottom: -38px;
  margin-left: 8px;
  z-index: 3;
  position: relative;
}

.button-img {
  margin-bottom: 93px;
  margin-left: -288px;
  z-index: 3;
  position: relative;
}

.alt-button-img {
  margin-top: -96px;
  margin-left: -332px;
  z-index: 3;
  position: absolute;
}

p {
  padding-top: 32px;
  padding-left: 8px;
}

#resume-download {
}