/**************************************
Joel A. Tropp / Caltech website
home.css: Style for home page elements
June 2021
**************************************/

@charset "UTF-8";

/* Import overall look and feel */

@import url("main.css");

/* Responsive Design */

@media screen and (max-width:480px) {
  .goals { display: none; }
}

/* Hero picture for homepage /*

/* Context for image + goals */

.hero {
  position: relative;

  width: 100%;
  max-width: var(--maxcontwidth);
}

.hero-image {
  margin: 0 0 3em 0;
  padding: 0;

  width: 100%;
  max-width: var(--maxcontwidth);
  height: max(25em,40vh);

  background-image:
    /* linear-gradient(rgba(255,127,0,0), rgba(255,127,0,0)), */
    url("../images/jat-chalk.jpg");

  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;

  position: relative;

  clip-path: polygon(0 0,0 85%, 25% 100%, 85% 85%,88% 0);
}

/* .hero-text {
  padding: 1em 2em;
  width: 100%;
  font-size: calc(1em + min(2vw,1em));
  text-align: center;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-60%, -30%);
  color: rgba(0,0,0,0);
  line-height: calc(1.5em + min(3vw,1.5em));
} */

.goals {
  position: absolute;

  top: 1em;
  right: 0%;
}

/* .goals h2 {
  background-color: MidnightBlue;
  color: white;

  font-family: var(--displayfont), sans-serif;
  text-transform: uppercase;

  margin: 0.5em;
  padding: 0.25em 1em 0.25em 0.25em;

  font-size: 1.25em;
  text-align: left;

  clip-path: polygon(0 0, 0 100%, calc(100% - 0.5em) 100%, 100% 0);
} */

.goals li {
    list-style-type: none;
    /* list-style-position: inside; */
    background-color: var(--CaltechOrange);

    margin: 0.5em;
    padding: 0.25em 1em 0.25em 0.25em;

    font-size: 1.25em;
    font-family: var(--bodytext), sans-serif;

    clip-path: polygon(0 0, 0 100%, calc(100% - 0.5em) 100%, 100% 0);
  }

.goals .mission {
    list-style-type: none;
    background-color: MidnightBlue;
    color: white;

    font-size: 1.25em;
    font-family: var(--headfont);
    text-transform: uppercase;
}