/*css*/

/*save as type1.css*/

body {background:white;
font-family: 'Roboto',sans-serif;
height: 300vw;
width:130vw;
margin:0 auto;}


main{display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-auto-rows:40vw;
    grid-auto-columns:90vw;
font-family: 'Roboto',sans-serif;}

nav{
    grid-column:2;
grid-row:1;
    height: 9vw;
width:10vw;
     color: #000000;
line-height: 3em;
font-weight: 300;
    font-size: 1em;
    font-family:'Roboto',sans-serif;}

ul{list-style: none;}

ul li{
  line-height: 3em;
font-weight: 300;
    font-size: 1em;
text-align: center;
border: 2px solid;}

ul li a{
    text-decoration: none;
    background-color:#d4ac0d;
    color: #000000;
    display: block;
    text-align: center;
    line-height: 2em;
}

ul li a:hover{
    background-color:white;}

ul li ul li{display: none;}

ul li:hover ul li{display: block;}

.active{background-color:#F8edc6;}


.about{font-family: 'Roboto',sans-serif;
grid-column:2;
grid-row:3;
    padding: 1em;
    font-size: 3em;
width: 90vw;
height:19vw;}

.characters{ text-align: center;
    font-family:'Roboto',sans-serif;
grid-column:2;
grid-row:4;
width: 90vw ;
font-size:4em;}

.title{font-family: 'Roboto',sans-serif;
grid-column:2;
grid-row:1;
font-size: 30em;}

.style{font-family: 'Roboto',sans-serif;
 display: grid; 
text-align: center;
grid-column:2;
grid-row:5;
font-size: 2em;
 height: 80vw;
    width: 60vw;}

h1{ display: grid;
    margin: 0;
    font-weight: 100;
    font-size: 1em;}

h2{display: grid;
     font-style: italic;
     margin: 0;
    font-weight: 100;
    font-size: 1em;}

h3{ display: grid;
     margin: 0;
    font-weight: 200;
    font-size: 1em;}

h4{ display: grid;
 margin: 0;
     font-style: italic;
    font-weight: 200;
    font-size: 1em;}

h5{  margin: 0;
    display:grid;
     font-weight: 400;
    font-size: 1em;}

h6{display: grid;
 margin: 0;
    font-style: italic;
    font-weight: 400;
    font-size: 1em;}

.p{font-size:1em;
    display: block;
font-family: 'Roboto';}


.font{font-family: 'Roboto',sans-serif;
 display: grid; 
text-align: center;
grid-column:2;
grid-row:7;
font-size: 2em;
 height: 80vw;
    width: 60vw;}

h7{display: grid;
     font-weight: 500;
    font-size: 1em;}

h8{display: grid;
 font-style: italic;
    width: 66vw;
     font-weight: 500;
    font-size: 1em;}

h9{display: grid;
   margin: 0;
   font-weight: 800;
   font-size: 1em;}

h10{display: grid;
  margin: 0;
    font-style: italic;
     font-weight: 800;
    font-style: 500;
    font-size: 1em;}

h11{display: grid;
     font-weight: 900;
   font-size: 1em;}

h12{display: grid;
    font-style: italic;
     font-weight: 900;
    font-style: 500;
    font-size: 1em;}


h13{font-family: 'Roboto', sans-serif;
font-size: 7em;
width: 1em;
font-weight: 800;}

.letter{display: grid;
    text-align: right;
   color: #ff6961;
    font-family: 'Roboto',sans-serif;
     font-size: 4em;
grid-column:2;
grid-row:1;
height: 9em;
width:10em;}

.lyrics{display: grid;
    font-family: 'Roboto',sans-serif;
grid-column:2;
grid-row:9;
font-size: 1em;
height: 90em;
width:30em;
line-height: 5em;
font-weight: 300;}

h14{font-size:7em;
    text-align: center;
    line-height: 2em;
font-weight: 900;
  font-style: italic;
width:62vw;}

h15{font-size:3em;
text-align: center;
font-weight: 100;
font-style:italic;
line-height: 1em;
grid-column:1;
}

h16{
padding:1em;
     grid-column: 1/span 2;
     font-size:1em;
font-weight: 200;
    height: 10vw;
font-style:italic;
width: 30vw;}

h17{font-size:2em;
      grid-column: 2/span 3;
text-align: right;
font-weight: 100;
font-style:italic;
width: 20vw;}

h18{font-size:2em;
      grid-column: 1/span 3;
  line-height: 2em;
font-weight: 400;
font-style:normal;
width: 30vw;}

h19{font-size:3em;
      grid-column: 2/span 3;
    line-height: 2em;
font-weight: 700;
width: 30vw;}

h20{  grid-column: 1/span 2;
    font-size:4em;
text-align: center;
       padding:1em;
    line-height: 2em;
font-weight: 900;
font-style:normal;
width: 47vw;}