kc-website/index.css

* {
	font-family: Montserrat, Ubuntu, Lucida Grande, Helvetica Neue, DejaVu Sans, FreeSans, Liberation Sans, Droid Sans, sans;
}

header {
  align-items: center;
  display: flex;
  height: 10vh;
  background-color: deeppink;
  margin-bottom: 1vh;
}
/*
#h1 {
#  font-size: 150%;
#}

#h2 {
#  font-size: 120%;
#}

#p {
#  font-size: 75%;
#}
*/

footer{
	color: darkgray;
	font-size: 3vw;
}


.banner {
  background-image: url("static/tresorImAll.webp");
  width: 100%;
  height: 90vh;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.withinBanner {
  display:inline-block;
}

.linkContainer {
  display: grid;
  grid-template-columns: auto auto auto auto;
  width: 100%;
}

.pLink {
  font-size: 4vh;
  color: white;
}

.bannerHeader {
  font-size: 9vh;
  color: black;
}

.bannerSubtext {
  font-size: 6vh;
  color: black;
}

.glow {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 20px #e60073;
}

/*
.glow {
  color: #fff;
  text-align: center;
  text-shadow: 0 0 20px #e60073;
  #animation: glow 1s ease-in-out infinite alternate;
}
*/
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6;
  }
}

@media only screen and (max-width: 500px) {
  [class*="bannerHeader"] {
    font-size: 7vh;
    color: #fff;
  }
  .bannerSubtext {
    font-size: 4vh;
    color: #fff;
  }
  [class*="infoImgDiv"] {
    grid-row-start: 1;
    grid-row-end: 1;
    justify-content: center;
    justify-self: center;
    display: flex;
  }
  [class*="infoDiv"] {
    grid-row-start: 2;
    grid-row-end: 2;
  }
  [class*="infoContainer"] {
    display: grid;
    grid-template-columns: auto;
  }
  [class*="infoImg"] {
    width: 60vw;
    grid-row-start: 1;
  }
  .linkContainer {
    grid-template-columns: auto auto;
  }
  .info {
    font-size: 6vw;
  }
  .infoHeader {
    font-size: 9vw;
  }
  .grid-container {
    display: grid;
    grid-template-columns: auto;
  }
  [class*="model"] {
    height: 40vh;
    width: 90vw;
  }
  [class*="model1"] {
    height: 40vh;
    width: 90vw;
  }
}

.infoImg {
  width: 30vw;
}
.infoContainer {
  margin-left: 10vw;
  margin-right: 10vw;
  display: grid;
  grid-template-columns: auto auto;
}

.infoImgDiv {
  width: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: none;
}

.infoDiv {
  display: grid;
  width: 50vw;
  text-align: justify;
  justify-content: center
  justify-self: none;
}

.info {
  font-size: 2vw;
}

.infoHeader {
  font-size: 3vw;
  margin-top: 5vw;
  margin-bottom: 0vw;  
  color: deeppink;
}

.model0 {
  width: 50vw;
  height: 100vh;
}
.model1 {
  width: 50vw;
  height: 100vh;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}