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;
  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 screen and (max-width: 400px) {
  [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;
  }
  .infoContainer {
  margin-left: 10vw;
  margin-right: 10vw;
  display: grid;
  }
  [class*="infoImg"] {
    width: 60vw;
    grid-row-start: 1;
  }
  .linkContainer {
    grid-template-columns: auto auto;
  }
  [class*="info"] {
    font-size: 8vw;
  }
  .infoDiv {
  display: grid;
  width: 80vw;
  text-align: left;
  justify-content: center
  justify-self: none;
  }

  .infoHeader {
    font-size: 10vw;
    margin-top: 5vw;
    margin-bottom: 0vw;  
    color: deeppink;
  }
  .grid-container {
    display: grid;
    grid-template-columns: auto;
  }
  [class*="model"] {
    height: 40vh;
    width: 90vw;
  }
  [class*="model1"] {
    height: 40vh;
    width: 90vw;
  }
}

@media screen and (min-width: 400px) {

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

.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;
}


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


}