@import "styles/keyframes.css";
@import "styles/boxes.css";
@import "styles/modals.css";
@import "styles/skills.css";
@import "styles/contactMe.css";
@import "styles/digitalPresence.css";

:root {
  --center: calc(50% - 105px);
  --locked: 2%;
  --containerH: 700px;
  --expandTop: 245px;

  /* Colors */
  --lightBlue: rgb(28, 158, 223);
  --lightBlue50: rgba(28, 158, 223, 0.5);
  --hoverLightBlue: rgba(28, 158, 223, .125);

  --borderBlue: rgba(8, 50, 113);
  --borderBlue50: rgba(8, 50, 113, 0.5);

  --orange: rgb(227, 97, 32);
  --orange60: rgba(227, 97, 32, 0.6);
  --orange30: rgba(227, 97, 32, 0.5);

  /* input field size variable for growing / shrinking */
  /* 2rem final for regular fields */
  --inputHeight: 0.3rem;
  /* 20rem final for messages*/
  --inputHeightMsg: 4.5rem;
  /* --blowingUp: transition: top 2s ease 0.2s, left 2s ease 0.2s, right 2s ease 0.2s, bottom 2s ease 0.2s, opacity 0.5s ease 0.2s, width 2s ease 0.2s, height 2s ease 0.2s, height 2s ease 0.2s, font-size 2s ease 0.2s; */
  /* --shrinking: transition: top 0.45s, left 0.45s, right 0.45s, bottom 0.45s, opacity 0.6s, width 0.45s, height 0.45s, visibility 0.6s, font-size 0.45s; */
  --inputResizing: top 2s ease 0.2s, left 2s ease 0.2s, right 2s ease 0.2s, bottom 2s ease 0.2s, opacity 0.5s ease 0.2s, width 2s ease 0.2s, height 2s ease 0.2s, height 2s ease 0.2s, font-size 2s ease 0.2s, padding 2s;
  --inputPadding: 0.05rem 0.1rem;
  --inputSM-MarginBot: 0.5rem;
  --inputLG-MarginTop: -0.05rem;
  --inputLG-MarginBot: 0.325rem;
  --inputSubmit-ht: 0.275rem;
}

body {
  background-color: #222222;
  display: flex;
  justify-content: center;
}

.button {
  background-color: var(--lightBlue);
  color: #222222;
  border-radius: 0.5rem;
  padding: 0.25em 0.5em;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background-color: rgba(28, 158, 223, .125);
  color: var(--lightBlue);
}

h3 {
  margin: 0;
}

h4 {
  margin: 0;
}

p {
  margin: 11px 0;
}

.yScroll {
  overflow-y: scroll;
}

/* ############### */
/* Who am I images */
/* ############### */
.wai-img-thought {
  height: 27.5%;
  float: left;
  border-radius: 10px;
  margin-right: 2%;
  transition: height 2s ease 0.2s;
}

.wai-img-clouds {
  height: 30%;
  float: right;
  margin-left: 2%;
  transition: height 2s ease 0.2s;
  border-radius: 10px;
}

/* ########## */
/* Resume Img */
/* ########## */
.resume {
  /* margin-top: 0.5%; */
  width: 100%;
}