@font-face {
 font-family: 'rarefont';
 src: url('fonts/NewFont-Regular.otf');
}
@font-face {
 font-family: 'infrequentfont';
 src: url('fonts/OTMiniature-Extralight.otf');
}
@font-face {
 font-family: 'frequentfont';
 src: url('fonts/ProximaNova-Thin.ttf');
}


body {
  font-family: frequentfont;
  color: black;
  padding-right:56px;
  width: 70%
}

h1 {
  color: black;
}

p {
  font-family: frequentfont;
  font-size:24px;
  color:black;
  padding-left:32px;
  padding-top:10px;
}

#Word_mark{
background-image: url("Web_Wordmark.svg");
background-repeat: no-repeat;
width:75%;
height:80px;
position:absolute;
top:36px;
left:37px;
}

.header{
  padding-top:37px;
  padding-left:39px;
  padding-bottom:56px;
}


#menu_black{z-index:1;}
.menu_black{position:absolute;right:32px;top:32px;}
.menu_white{position:absolute;right:32px;top:32px;}
.menu_icon{position:absolute;right:32px;top:32px;z-index:101;}
.menu_black img{width:32px; height:32px;}
.menu_white img{width:32px; height:32px;}


.big{font-size:48px;}

.medium{font-size:48px;}

.small{font-size:48px;}

.frequent{font-family: frequentfont;
	  display:inline;
          font-size:1.2em;
          font-weight:lighter;
          color: #000000;
         }

.infrequent{font-family: infrequentfont;
            display:inline;
            font-size:0.9em;
            font-weight:lighter;
            color: #000000;
           }

.rare{font-family: rarefont;
      display:inline;
      font-size:1.2em;
      vertical-align:-1px;
/*      color: brown; */
      text-transform: lowercase;
     }



.menu{
  visibility:hidden;
  position:absolute;
  right:0px;
  top:0px;
  background-color:rgba(0,0,0,1);
  width:25%;
  height:200%;
  z-index:100;
}

.menu ul{
  padding-top:100px;
  color:white;
  list-style-type: none;
  z-index:100;
}

.menu li{
  padding-top:25px;
  padding-bottom:25px;
  padding-right:25px;
  font-size:24px;
}


.menu a{
  text-decoration:none;
}

.menu a:visited{
  color:white;
}
.menu a:link{
  color:white;
}

#inputText:focus {
    outline: none;
    border: none; 
}

#inputText{
  color:rgba(255,255,255,0);
  background-color:rgba(255,255,255,0);
  border-style:none;
  position:absolute;
  top:200px;
  left:39px;
  width:80%;
  height:100%;
  z-index:100;
}

#nameDisplay{
  position:absolute;
  top:200px;
  left:39px;
  width:65%;
  height:50%;
  z-index:0;
  word-wrap: break-word;
/*  border: 2px solid grey; border-radius: 10px; */
  padding: 10px;
}

/*@media only screen and (max-width: 600px)  { */
@media only screen and (orientation: portrait)  { 
  #Word_mark{
  background-image: url("Double Line Wordmark.svg");
  background-repeat: no-repeat;
  width:80%;
  height:100px;
  position:absolute;
  top:15px;
  left:20px;
  }
  .menu_icon{z-index:101;right: 0px;}
  .menu{
    visibility:hidden;
    position:absolute;
    right:0px;
    top:0px;
    background-color:rgba(0,0,0,1);
    width:100%;
    height:100%;
    z-index:100;
    padding-top:50px;
    padding-bottom:5px;
  }

.header{
  padding-top:35px;
  padding-left:5px;
  padding-bottom:85px;
}

body {
  font-family: frequentfont;
  color: black;
  padding-right:56px;
  width: 90%
}

p {
  font-family: frequentfont;
  font-size:20px;
  width:90%; 
}


.menu ul{
  padding-top:50px;
  color:white;
  list-style-type: none;
  position:relative; 
  padding-top:25px;
  padding-bottom:5px;
  z-index:100;
}

.menu li{
  padding-top:25px;
  padding-bottom:5px;
/*  padding-right:25px; 
  font-size:36px; */
}


.big{font-size:36px;}

.medium{font-size: 36px;}

.small{font-size: 36px;}


#inputText{
  color:rgba(255,255,255,0);
  background-color:rgba(255,255,255,0);
  border-style:none;
  position:absolute;
  top: 80px;
  left:20px;
  width:80%;
  height:25%;
  z-index:100;
}


#nameDisplay{
  position:absolute;
  top:140px;
  left:30px;
  width:80%;
  height:50%;
  z-index:0;
  word-wrap: break-word;
/*  border: 2px solid grey;
  border-radius: 10px; */
  padding: 10px;
}


}