/*Globals*/
* {
  --sidebar-width-lg: 175px;
  --sidebar-width-sm: 45px;
  --padding-none: 0px;
  --padding-sm: 10px;
  --padding-md: 20px;
  --border-radius-default: 25px;
  /*https://hookagency.com/blog/website-color-schemes/*/
  --dark-blue: #12232e;
  --lighter-blue: #007cc7;
  --lightest-blue: #4da8da;
  --shadow-of-dark-blue: #203647;
  --shadow-of-light-blue: #eefbfb;
  --side: var(--dark-blue);
  --back: var(--shadow-of-dark-blue);
  --text: var(--shadow-of-light-blue);
}

/*Media Queries*/
@media only screen and (max-width: 414px) {
  .sidebar {
    width: var(--sidebar-width-sm);
  }

  #toggle {
    display: block;
  }

  .content {
    margin-left: var(--sidebar-width-sm);
  }

  .about {
    grid-template-areas:
      "head head"
      "image image"
      "text text";
  }

  .classes {
    grid-template-areas:
      "head"
      "upper"
      "lower"
      "elec";
  }

  .skills {
    grid-template-areas:
      "head"
      "tech"
      "pers";
  }

  .desc {
    height: 500px;
  }

  .form {
    padding: var(--padding-none);
  }

  .form-inner {
    grid-template-areas:
      "head head"
      "name name"
      "email email"
      "message message"
      "submit submit";
  }
}

@media only screen and (min-width: 415px) and (max-width: 768px) {
  .sidebar {
    width: var(--sidebar-width-sm);
  }

  #toggle {
    display: block;
  }

  .content {
    margin-left: var(--sidebar-width-sm);
  }

  .about {
    grid-template-areas:
      "head head head"
      "blank1 image blank2"
      "text text text";
  }

  .classes {
    grid-template-areas:
      "head head"
      "upper lower"
      "elec elec";
  }

  .skills {
    grid-template-areas:
      "head"
      "tech"
      "pers";
  }

  .desc {
    height: 350px;
  }

  .form {
    padding: var(--padding-none);
  }

  .form-inner {
    grid-template-areas:
      "head head"
      "name email"
      "message message"
      "submit submit";
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .sidebar {
    width: var(--sidebar-width-lg);
  }

  #toggle {
    display: none;
  }

  .content {
    margin-left: var(--sidebar-width-lg);
  }

  .about {
    grid-template-areas:
      "head head"
      "text image";
  }

  .classes {
    grid-template-areas:
      "head head head"
      "upper lower elec";
  }

  .skills {
    grid-template-areas:
      "head head"
      "tech pers";
  }

  .desc {
    height: 300px;
  }

  .form {
    padding: var(--padding-none);
  }

  .form-inner {
    grid-template-areas:
      "head head"
      "name email"
      "message message"
      "submit submit";
  }
}

@media only screen and (min-width: 1025px) {
  .sidebar {
    width: var(--sidebar-width-lg);
  }

  .content {
    margin-left: var(--sidebar-width-lg);
  }

  #toggle {
    display: none;
  }

  .about {
    grid-template-areas:
      "head head head"
      "text text image";
  }

  .classes {
    grid-template-areas:
      "head head head"
      "lower upper elec";
  }

  .skills {
    grid-template-areas:
      "head head"
      "tech pers";
  }

  .proj {
    padding: 20px 10% 20px 10%;
  }

  .desc {
    height: 250px;
  }

  .form {
    padding: 10%;
  }

  .form-inner {
    grid-template-areas:
      "head head"
      "name email"
      "message message"
      "submit submit";
  }
}

/*Body*/
html,
body {
  height: 100vh;
  width: 100vw;
  background-color: var(--back);
  color: var(--text);
}

/*Main Wrapper*/
.main-wrapper {
  height: 100%;
  display: flex;
}

/*Sidebar*/
/*https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp - Inspiration*/
.sidebar {
  position: fixed;
  height: 100vh;
  z-index: 999;
  background-color: var(--side);
  overflow-x: hidden;
  transition: 0.5s;
}

.sidebar-content {
  width: var(--sidebar-width-lg);
  list-style-type: none;
  text-align: center;
  margin: auto;
  padding: var(--padding-none);
}

.toggle-container {
  display: block;
  height: 46px;
}

.sidebar-content li a {
  display: block;
  width: 100%;
  color: var(--text);
  padding: var(--padding-md);
  font-size: 20px;
  text-decoration: none;
}

.sidebar-content li a:hover {
  color: var(--lightest-blue);
}

.menu-toggle {
  font-size: 30px;
  text-decoration: none;
  color: var(--text);
  padding: 0px 9px 0px;
  float: right;
}

.menu-toggle:hover {
  color: var(--lighter-blue);
}

/*Main*/
.content {
  height: 100%;
  flex-grow: 1;
  overflow: auto;
  transition: 0.5s;
}

.default-padding {
  padding: var(--padding-sm);
}

.default-grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.center {
  text-align: center;
}

.full {
  width: 100%;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section {
  margin-bottom: 100px;
}

.head-main {
  grid-area: head;
  font-size: 40px;
}

/*About Section*/
.about-text {
  grid-area: text;
  margin: auto;
  padding: var(--padding-md);
  font-size: 20px;
}

.profile-container {
  grid-area: image;
  max-width: 100%;
  max-height: 100%;
  padding: var(--padding-md);
}

.profile {
  border-radius: var(--border-radius-default);
  max-width: 100%;
  max-height: 100%;
  border: 10px solid var(--dark-blue);
}

.prev {
  grid-template-areas:
    "head"
    "work";
}

.work {
  grid-area: work;
  padding: 50px var(--padding-md);
}

.work-block {
  display: none;
  border: 5px solid var(--dark-blue);
  text-align: left;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion */
.accord {
  background-color: var(--dark-blue);
  color: var(--shadow-of-light-blue);
  border: 2px solid var(--dark-blue);
  font-size: 20px;
}

.accord:hover {
  background-color: var(--lightest-blue);
}

.classes {
  text-align: left;
}

.upper-div {
  grid-area: upper;
}

.lower-div {
  grid-area: lower;
}

.elec {
  grid-area: elec;
}

.skills {
  text-align: left;
}

.pers {
  grid-area: pers;
}

.tech {
  grid-area: tech;
}

/*https://www.w3schools.com/howto/howto_css_skill_bar.asp*/
.skill-container {
  background-color: var(--dark-blue);
  border-radius: var(--border-radius-default);
  margin-bottom: 10px;
}

/*https://www.w3schools.com/howto/howto_css_skill_bar.asp*/
.skill {
  display: flex;
  justify-content: space-between;
  height: 25px;
  border-radius: var(--border-radius-default);
  background-color: var(--shadow-of-dark-blue);
  padding: 0px var(--padding-sm);
}

/*https://www.w3schools.com/howto/howto_css_skill_bar.asp*/
.html {
  width: 80%;
}

.css {
  width: 70%;
}

.javascript {
  width: 65%;
}

.cpp {
  width: 90%;
}

.java {
  width: 80%;
}

.python {
  width: 85%;
}

.multi {
  width: 90%;
}

.organ {
  width: 95%;
}

.team {
  width: 85%;
}

.comm {
  width: 80%;
}

.atte {
  width: 90%;
}

.projects {
  padding: var(--padding-md);
  grid-template-areas:
    "head"
    "proj";
}

.proj {
  grid-area: proj;
}

.proj-slide {
  grid-template-areas:
    "head"
    "link"
    "description";
  background-color: var(--dark-blue);
  border-radius: var(--border-radius-default);
}

.carousel-control-prev {
  grid-area: prev;
}

.carousel-control-next {
  grid-area: next;
}

.link {
  grid-area: link;
}

.awesome {
  color: var(--shadow-of-light-blue);
  font-size: 24px;
}

.desc {
  grid-area: description;
  padding: 0px 15%;
}

.contact {
  padding: var(--padding-md);
  grid-template-areas:
    "head"
    "form";
}

.form {
  grid-area: form;
}

.form-inner {
  background-color: var(--dark-blue);
  border-radius: var(--border-radius-default);
}

.form-section {
  padding: var(--padding-md);
}

.form-control {
  border: 2px solid var(--lightest-blue);
  border-radius: var(--border-radius-default);
}

.form-name {
  grid-area: name;
}

.form-email {
  grid-area: email;
}

.form-message {
  grid-area: message;
}

.form-submit {
  grid-area: submit;
}

.form-button {
  border-radius: var(--border-radius-default);
  border: 2px solid var(--lightest-blue);
  background-color: var(--shadow-of-dark-blue);
  color: var(--shadow-of-light-blue);
}