/* styles.css 
   Project: 
   Author: 
   Date: 
   
   Helpful links: 
      Web colors: 
         https://en.wikipedia.org/wiki/Web_colors#X11_color_names
   Color picker tool:
      https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
      http://colorpicker.com

*/

/*Header*/

* {
   box-sizing: border-box;
}

img {
   /*width: 100%;*/
   display: block;
}

body {
   /*background-color: #f3f3eb;*/
   background-color:black;
   color: white;
/*   font-family: 'Lato', sans-serif;*/
/*   font-family: 'Montserrat', sans-serif;*/
/*font-family: "Schibsted Grotesk", serif;*/
font-family: "Schibsted Grotesk", serif;
}

a {
   color: black;
}

.profiletext a {
   color: #960f0f;
}

.footer a, .vote a {
   color: white;
}

.mobileheader {
   display: none;
   width:100vw;
}

.header img, .mobileheaderimg img {
   width: 100%;
}

.annenbergmedia {
   position: absolute;
   width: 100%;
}

.annenbergmedia img {
   margin: auto;
   margin-top: 0.5%;
   width: 250px;
}

.content {
   margin: auto;
   box-sizing: border-box;
   display: block;
   unicode-bidi: isolate;
   width:70vw;
   z-index:2;
}

.introtext{
   width:70vw;
   margin:auto;
   margin-top:50px;
}

.centered{
   text-align:center;
   font-weight:bold;
}

.categorybox{
   display: grid;
   grid-template-columns: 1fr;
   position: relative;
   background-color: #c62c27;
   width:80vw;
   margin:50px auto;
   /*height: 300px;*/
   text-align: center;
   color: white;
   font-family: "Bowlby One SC", serif;
}

.unclicked:hover{
   cursor:pointer;
}

.expandbox{ 
   display: none;
   background-color: #c62c27;
   color: black;
   padding:0% 10%;
   font-size: 1em;
   font-family: "Bowlby One SC", serif;
   text-align: left;
}

.expandbox img{
   float:left;
   height:120px;
   width:80px;
   margin-right:10px;
}
.text {
   width: 100%;
   font-size:2em;
   padding: 10px 30px;
}

.option{
   background-color:white;
   width:100%;
   height:130px;
   margin-bottom:5px;
   display: flex;
   align-items: center;
   border:5px solid #c62c27;
   position:relative;
   font-size:1.3em;
}

.option:hover,.selected{
   border:5px solid white;
   cursor:pointer;
}

.option img, .option p{
   z-index:2;
}

.bar{
   position:absolute;
   left:80px;
   top:0px;
   height:100%;
   width:0px;
   background-color:#d6b34f;
   z-index:1;
}

button{
   margin:auto;
   margin-top:15px;
   width:150px;
   display: block;
   margin-bottom:20px;
   padding:10px;
}

button:hover{
   cursor:pointer;
}

form{
   width:100%;
   margin:auto;
   display:none;
}

/*FOOTER*/

.footer {
   position: absolute;
   background-color: black;
   color: white;
   margin: auto;
   text-align: center;
   padding: 0.5%;
   font-size: 0.75em;
   line-height: 1.5em;
   z-index:-1
}

.footer img {
   width: 15%;
   margin: auto;
   margin-top: 1%;
}

@media only screen and (max-width: 600px) {

   .mobileheader {
      display: block;
   }

   .header {
      display: none;
   }

   #container h2 {
      font-size: 1.75em;
      width:90vw;
   }

   .footer img{
      width:75%;
   }

   .categorybox{
      width:90vw;
   }

   .option{
   font-size:1.2em;
   }


}