style.css

html {
  scroll-behavior: smooth;
  --accent1: #25c5ff;
  --accent1_o: #00bbff60;
  --accent2: #c7acb8;
  --a1comp: #674fff70;
}

body {
  font-family: monospace;
  color: #222; /* lighter on eyes */

  display: flex;
  flex-direction: column;

  font-size: larger;
  font-family: "Open Sans", sans-serif;
}

h1, h2, h3, .subtitle, .proj-title {
  font-family: monospace;
}

#welcome-section {
  background-image: url("https://images.unsplash.com/photo-1473800447596-01729482b8eb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
  background-repeat: no-repeat;
  background-size: cover;

  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row {
  margin: 10px;
}

#welcome-section h1,
#welcome-section h3 {
  margin-left: 10%;
  margin-right: 10%;
}

#projects {
  /* display: grid */
  margin: 2em;

  /* both margins/paddings seem to distort the thumbnail aspect ratio */
}

.project-item {
  /* todo figure out scaling height to width so that thumbnail image maintains aspect ratio */
  /* padding-bottom: 50%; */
  /* height: 200px; */
  padding: 0px 2%;
  /* this is used to control spacing between project item but tbh a margin property would make better sense? */

  /* using these to ensure the project-item container height stretches to fit both the thumbnail and the caption */
  display: flex;
  flex-direction: column;

  height: max-content;
}

.thumbnail {
  margin: 0;
  padding: 0;
  border-radius: 0%;
}

.caption {
  text-align: center;
}

/* reduce line spacing between p elements */
.caption p {
  margin: 1%;
}

.thumbnail {
  /* ensure image doesn't overflow thumbnail div */
  overflow: hidden;
  transition: 0.3s;
}

.thumbnail:hover {
  opacity: 50%;
}

.thumbnail img {
  margin: 0px;
}

.proj-title {
  font-weight: bold;
  font-size: 19px;
  text-transform: lowercase;
}

.section-header {
  text-align: center;
  margin: 1em;
  padding: 0;
  /* margin-top: 2em; */
  font-weight: bolder;
  text-transform: lowercase;
}

.section {
  padding: 2.5em 0em 4em;
}

@keyframes fadeinout {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-stuff {
  animation: fadeinout 1s linear forwards 10;
}

.body-sections {
  margin-left: 10%;
  margin-right: 10%;
}

.tech-used {
  text-align: center;
  bottom: 0;
  padding: 0.5em;
}

.tech-used img {
  height: 2.1em;
}

#footer img {
  height: 1.5em;
}

#footer {
  text-align: center;
  display: block;
}

#about-me {
  max-height: max-content;
  display: flex;
}

#about-me p {
  text-align: justify;
  font-family: "Open Sans", sans-serif;
  line-height: 1.4;
  margin-bottom: 17px;
}

/* for testing */
/* 
button {
  z-index: 1;
}

.thumbnail button {
    transition: 0.1s;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    padding: 12px 24px;
    color: transparent
    
}

.thumbnail:hover button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* -ms-transform: translate(-50%, -50%); ? why is this line needed */

/*
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
} */

/* make sure img in the thumbnail div fits perfectly in the div, no margin */
.thumbnail img {
  margin: 0;
}

/* FONT SIZING FOR WEB */

p {
  font-size: 16px;
}

.accent-background {
  background-color: var(--accent1);
  /* color: white; */
}

.accent-background-translucent {
  background-color: var(--accent1_o);
}

.complement {
  background-color: var(--a1comp);
}

.has-subtitle {
  margin-bottom: 10px;
}

.divider {
  text-align: center;
}

.center {
  text-align: center;
  margin: 30px;
}

.more-details {
  padding: 2em;
}

.skills-column h4 {
  /* text-align: center; */
}

/* temporary until you use buttons or other cool stuff */
.skills-column li {
  /* text-align: center; */
}

.gradient-bg {
  background: rgb(205,228,255);
  background: linear-gradient(90deg, rgba(205,228,255,1) 0%, rgba(230,207,254,1) 100%);
}

.offwhite-bg {
  background: rgb(252, 251, 251);
}

#skills-section {

}

#skills-section h4 {
  font-weight: 900;
  border-bottom: solid;
  padding-bottom: 1rem;
  font-family: monospace;
  text-transform: lowercase;
}

#skills-section li {
  font-size: 16px;
  font-weight: lighter;
  padding: 2px;
}

@media only screen and (max-width: 992px) {
    .skills-column {
        margin: 10px;
    }
  }


#down-caret a:link {
  color: white;
}

#down-caret a:visited {
  color: white;
  text-decoration: none;
}

#down-caret a:hover {
  color: #fff4;
  text-decoration: none;
  -webkit-text-stroke: 1px white;
}

#down-caret a:active {
  color: rgb(180, 202, 255);
  text-decoration: none;
}