style.css

html {
  font-family: sans-serif;
  background-color: rgb(198, 216, 223);
  color: rgb(7, 45, 59);
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#header {
  /* min-height: 10vh; */
  margin-bottom: 10vh;
  padding: 0 3vw;
  background-color: rgb(39, 95, 109);
  color: rgb(198, 216, 223);
}

/* #content refers to the lower portion of the screen (anything that's not the header) */
#content {
  display: flex;
}

/* #left: the left portion of #content containing profile pic + contact details*/
#left {
  background-color: rgb(212, 226, 231);
  width: 30vw;
  text-align: center;
  margin: 0 4%;
  padding: 0 1vw;
  /* color: black; */
}

#contact {
  text-align: left;
}

#contact .contact-info {
  display: flex;
}

#contact .contact-icon {
  width: 1vw;
}

#contact .contact-text {
  margin-left: 2vw;
}

.profile-picture {
  /* border-radius: 50% makes the image a circle */
  border-radius: 50%;
  /* Negative margin top to get that circle to overlap the div boundaries */
  margin-top: -5vh;
  max-width: 50%;
  height: auto;
}

.icons {
  /* The social media icons are in their own flexbox */
  display: flex;
  justify-content: center;
  gap: 1vw;
  height: 2vw;
  margin-bottom: 2vh;
}

.icons .icon {
  height: 100%;
}

#contact {
  text-align: left;
}

/* #right: the left portion of #content including information about me */
#right {
  margin: 0 4%;
  padding: 1% 2%;
  background-color: rgb(212, 226, 231);
  width: 70vw;
}

#more-about-me {
  display: flex;
}

/* Setting flex: 1 on both containers in the flexbox makes them an equal size */
#skills-container {
  flex: 1;
  /* background: yellow; */
}

#secret-container {
  flex: 1;
}

.button {
  background-color: rgb(135, 190, 209);
  color: rgb(255, 255, 255);
  border: none;
  padding: 1vh 1vw;
  text-align: center;
  border-radius: 4px;
}

.button:hover {
  background-color: rgb(85, 141, 160);
}

.button:active {
  background-color: rgb(42, 98, 117);
}

/* secret is originally hidden with 'display: none', can be toggled with a button */
#secret {
  margin-top: 1vh;
  display: none;
}