/* This is the CSS for https://brandeis.zoom.us/
 * Added 2021-07-29 by jag.
 * Most of the styling is also duplicated in the Zoom landing page page. 
 * This is here because Zoom's branding doesn't support @media queries.
 */

:root { 
  --brandeis-blue: rgb(0, 52, 120);
  --lite-grey:  rgb(244, 242, 238); 
  --mid-grey:  rgb(78, 79, 81);
  --dark-grey:  rgb(41, 41, 42);
}

body {
  margin:  0;
  background: var(--mid-grey);
  font-family:  'Catamaran', sans-serif;
  background-image: url('https://zoom.us/account/branding/p/f77aeaf9-df9a-48b9-97d7-c99656035a3d.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

header, footer { width: 100%; }

#header-brandeis {
  background: var(--brandeis-blue);
  color:  white;
  font-family: 'Merriweather', serif;
  text-align: center;
  height: 3.5rem;
}

img#img-brandeis {
  float: left;
  margin-left: 1rem;
  height: 60px;
}    

#header-zoom {
  background: white;
  margin: 0;
  color:  var(--dark-grey);
  font-family: 'Catamaran', sans-serif;
  text-align: right;
  padding: 0.8rem 0;
}

#header-zoom-links { margin: 0 2rem; }

#header-zoom-links a {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--dark-grey);
}

img#img-zoom {
  float: left;
  height: 25px;
  margin-left: 1.8rem;
}

h1 {
  margin:0 auto;
  padding: 5rem 1rem 2rem;
  color: white;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  text-shadow: 1px 1px 1px var(--dark-grey);
  width: 55%;
}

section { width: 50%; margin: auto; }

a { color: var(--brandeis-blue); }
hr { border: none; }
ul { list-style-type: none; }
li { display: inline-block; margin-left: 2rem; }

.tiny { font-size: 0.8rem; }

.button {
  font-family: 'Merriweather', serif;
  font-size: 1.4rem;
  text-align: center;
  color: white;
  background-color: var(--brandeis-blue);
  margin: auto;
  border-radius: 0.4rem;
  padding: 0.5rem;
}

.button-text { display: block; width: 100%; }

footer a { color: white; }

footer {
  background: var(--mid-grey);
  color: white;
  position: absolute;
  bottom: 0;
}

footer img { height: 60px; float: left; }
footer p { display: inline-block; margin-left: 12rem; }
#footer-links { float: right; margin-right: 2rem; }

@media (max-width: 640px) {
  #img-zoom { height: 15px; }
  #header-zoom-links { font-size: 0.7rem; }
  h1 {
    padding: 3rem 1rem;
    width: 95%;
    font-size: 1.3rem;
  }
  .button { width: 85%; }
  section { width: 100%; }
  footer img { height: 40px; }
  footer { font-size: 0.8rem; }
}