@charset "UTF-8";
html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}


/* Generic */

body {
   --darkblue: rgb(0,82,136);
   --lightblue: rgb(63,191,233);
   --darkgrey: #444444;
   --lightgrey: #e5e5e5;
   display: flex;
   flex-direction: column; 
   align-items: center;
   font-family: verdana, arial, serif;
   font-size: 100%;
   background-color: var(--lightgrey);
   margin: 0;
}
   
body .textbox {
   padding: 1rem;
   width: 100%;
}

body > div {
   margin: 0;
   padding: 0 1rem;
   border: solid 0px purple;
}

body > div > p {
   padding: 0;
   margin: 0;
   border: black solid 0px;
}

p, dl, ul {
   line-height: 1.5em;
}

a:link, a:visited { color: #000000; }
a:focus, a:hover, a:active { color: var(--lightblue); }
a {
   text-decoration: underline var(--lightblue) double;
}

dt {
   font-size: large;
   font-weight: bold;
   border-left: solid black 0.6rem;
   padding: 0 1em 0 0.6em;
   margin: 0 0 1rem 0;
}

li {
   margin: 1rem 0;
   list-style-type: none;
}

ul a {
   text-decoration: none;
}

em {
   font-style: normal;
   background: yellow;
}

h2 {
   display: table;
   margin: 0;
   margin-bottom: 1rem;
   padding: 0;
   padding-bottom: 0.2rem;
   border-bottom: var(--darkblue) solid 0.6rem;
   width: content;
}

h3, dt {
   border-left: solid black 0.6rem;
   padding: 0 1rem 0 0.6rem;
   margin: 1rem 0;
}


/* Block */

.block {
   display: flex;
   flex-direction: row;
   margin-bottom: 1rem;
   padding: 0;
   background: white;
   border-left: var(--lightgrey) 1rem solid;
   border-right: var(--lightgrey) 1rem solid;
   width: 100%;
   max-width: 80em;
}

.block :last-child {
   margin-bottom: 0;
}

.block :first-child {
   margin-top: 0;
}


/* Grey color scheme */

.grey {
   background: var(--darkgrey);
}

.grey h2 {
   border-bottom: var(--lightblue) solid 0.6rem;
   color: white;
}

.grey p, .grey dd, .grey dt {
   color: white;
}


/* Blue color scheme */

.blue {
   background: var(--darkblue);
}

.blue h2 {
   border-bottom: lightgrey solid 0.6rem;
   color: white;
}

.blue dt {
   border-left: var(--lightblue) solid 0.6rem;
}

.blue p, .blue dd, .blue dt {
   color: white;
}

.fullwidth {
   display: flex;
   flex-direction: column; 
   align-items: center;
   width: 100%;
   background: white;
   margin-bottom: 0;
}

#paper18media {
   background: linear-gradient(165deg,white 45%,rgba(255, 255, 255, 0.5) 58%), url('images/nytimes.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 80%;
}

.fullwidth#postitnote {
   background: url('images/postit_note_web.jpg'), white;
   background-repeat: no-repeat;
   background-size: auto 100%;
   background-position: 50% 80%;
   margin-bottom: 1rem;
}

#postitnote #header {
   background: none;
}

.block#everyamerican {
   background: none;
   border: solid white 0rem;
   font-size: large;
   height: 20rem;
   margin-bottom: 0;
   align-self: center;
}

.block#everyamerican p {
   margin: 3rem 0;
   text-align: center;
}

/* Header */

.block#header {
   flex: 1 0 auto;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   text-align: center;
   padding: 0.5rem 0;
   max-width: 80em;
   border-left: solid white 1rem;
   border-right: solid white 1rem;
   margin-bottom: 0;
}

.block#header #logoandname {
   flex: 0 1 auto;
   display: flex;
   flex-direction: row;
   text-decoration: none;
}

.block#header #logo {
   background: url(images/logo_web.png) no-repeat center center;
   background-size: 7.5rem 7.5rem;
   min-width: 8rem;
   min-height: 8rem;
   padding: 0;
   margin: 0;
   border: solid green 0px;
}

.block#header ul {
   flex: 1 0 auto;
   font-family: futura, verdana, sans-serif;
   text-align: left;
   color: var(--darkblue);
   font-size: 1.8rem;
   border: solid red 0px;
   margin: 0;
   margin-left: 1rem;
   padding: 0;
}

#header ul li {
   margin: 0;
   padding: 0;
   list-style-type: none;
   border: solid black 0px;
   line-height: 2.0rem;
   letter-spacing: 1px;
}

#header ul#menu {
   flex: 1 1 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   font-family: futura, verdana, sans-serif;
   letter-spacing: normal;
   margin: 0;
   margin-left: 10%;
}

#header ul#menu li {
   margin-top: 0.3rem;
   margin-bottom: 0.3rem;
}

#header ul#menu li a {
   margin: 0;
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 0px;
   padding: 0 10px;
}

#header ul#menu li#donate {
   margin-left: 10px;
   margin-right: 10px;
}

#header ul#menu li#donate a {
   background-color: var(--darkblue);
   border-radius: 0px;
   padding: 0 10px;
   color: white;
}

#header ul#menu li a:hover {
   background-color: var(--lightblue);
   color: black;
}

#header ul#menu li#donate a:hover {
   background-color: var(--lightblue);
   color: black;
}

#header ul#menu li {
   color: black;
   font-size: 1.2rem;
   padding: 0;
}


/* Square video */

.squarevideo {
   min-width: 100px;
   max-width: 300px;
   display: flex;
   justify-content: start;
   margin: 0;
}

.squarevideo video, img {
   width: 100%;
   height: 100%;
}


/* Responsive web design */

@media (max-width: 745px) {
   #paper18media {
      background: linear-gradient(165deg,white 60%,rgba(255, 255, 255, 0.5) 75%), url('images/nytimes.jpg');
      background-size: 600px;
      background-position: 50% 65%;
   }
}

@media (max-width: 600px) {
   .block {
      flex-direction: column;
      align-items: stretch;
   }
   .squarevideo {
      max-width: 645px;
    }
   .block#header {
      flex-wrap: wrap;
      justify-content: center;
   }
   .block#header ul#menu {
      justify-content: center;
      margin: 0;
      margin-top: 1rem;
   }
   .block#header ul#menu li {
      margin: 0.5rem 0;
   }
   .block#header ul#menu li#donate {
      margin-left: 10px;
   }
   .fullwidth#postitnote {
      background-size: 90% auto;
      background-position: bottom;
   }
   .block#everyamerican {
      height: 23rem;
   }

@media (max-width: 480px) {
   #paper18media {
      background: white;
   }
   .block#everyamerican {
      height: 20rem;
   }
}

@media (max-width: 420px) {
   #paper18media {
      background: white;
   }
   .block#everyamerican {
      background: url('images/postit_note_web.jpg'), white;
      background-size: cover;
      width: auto;
      height: calc(80vw - 2rem);
   }
}

@media (max-width: 325px) {
   #header.block a#logoandname {
      flex-direction: column;
   }
   #header.block a#logoandname #logo {
      background-size: 100%;
      min-height: 9rem;
      min-width: 9rem;
      margin-bottom: 1rem;
   }
   #header.block a#logoandname ul#institutename {
      margin: 0;
   }
}