@font-face {
  font-family: "Allogist Regular";
  src: url(../fonts/AllogistRegular/font.woff);
  font-weight: bold;
}

@font-face {
  font-family: "BentonSans Book";
  src: url(../fonts/BentonSans-Book.woff);
  font-style: normal;
}

@font-face {
  font-family: "BentonSans Book";
  src: url(../fonts/BentonSans-BookItalic.woff);
  font-style: italic;
}

@font-face {
  font-family: "BentonSans Light";
  src: url(../fonts/BentonSans-Light.woff);
  font-style: normal;
}

@font-face {
  font-family: "BentonSans Light";
  src: url(../fonts/BentonSans-LightItalic.woff);
  font-style: italic;
}

@media only screen and (min-width: 1025px){

  #title {
    font-size: 5.5vw;
    line-height:2vw;
  }

  #subtitlealt {
    font-size: 2vw;
    line-height: 1vw;
  }

  .contentalt {
    top: 6%;
    width:100%;
  }

  .info {
    font-size:1.5vw;
  }

  input {
    font-size: 1.75vw;
    padding:1%;
    width: 40%;
  }

  button {
    font-size: 1.75vw;
    padding:1%;
  }

  .article {
    font-size: 1.75vw;
  }

  .left {
    position:relative;
    float:left;
    width: 65%;
    /* left: 2%; */
  }

  .right {
    position:relative;
    float:right;
    width: 65%;
  }

  .center {
    /* position:relative; */
    /* float: right;
    left: -25%; */
    margin: auto;
    width: 70%;
  }

  .title {
    font-size: 6vw;
  }

  #pieceTitleAlt {
    font-size: 3.5vw;
  }

}

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

  #title {
    font-size: 14vw;
    line-height:14vw;
  }

  #subtitlealt {
    font-size: 7vw;
    line-height: 8vw;
  }

  .contentalt {
    /* width:90%; */
    top: 1%;
    padding-left: 5%;
    padding-right: 5%;
  }

  .info {
    font-size:3.5vw;
  }

  input {
    font-size: 3.5vw;
    padding:3%;
    width: 60%;
  }

  button {
    font-size: 3.5vw;
    padding:3%;
  }

  .article {
    font-size: 3vw;
  }

  #pieceTitleAlt {
    font-size: 10vw;
  }

  .title {
    font-size: 12vw;
  }

}


body {
  margin: 0px;
  /* overflow: hidden; */
}

.menus {
  position: fixed;
  top: 0px;
  width: 100vw;
}

.menu-top {
  width: 100vw;
  height:8vh;
  /* line-height:10px; */
  display:table-cell;
  vertical-align: middle;
  background-color: rgba(55, 0, 75, 0.4);
  color:white;
  padding-left:1%;
  margin-bottom: 0px;
  /* display:none; */
}

.menu-top:hover {
  background-color: rgba(55, 0, 75, 1);
}

.submenu {
  /* float: right; */
  padding-right: 2%;
  padding-left:48%;
  display:inline;
}

#contributors-menu {
  width: 100vw;
  height: 7vh;
  margin-top:0px !important;
  background-color:white;
  display: table-cell;
  vertical-align: middle;
  display: none;
}

.authorMenu {

  color:black;
  /* display: table-cell;
  vertical-align: middle; */
  /* line-height:10px; */
  padding: 1%;
  /* padding-top:5%; */
  /* border-style:solid;
  border-radius: 10px; */
}

.background {
  width: 100vw;
  height: 100vh;
  margin: 0px;
  /* background-color: black; */
  background: linear-gradient(to bottom, #001eff, #bd00ff);
  position: fixed;
}

.background::after {
  content: "";
  position: fixed;
  width: inherit;
  height: inherit;
  background: linear-gradient(to bottom, #00cc7f, black);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}

.backgroundalt {
  width: 100vw;
  height: 100vh;
  margin: 0px;
  /* background-color: black; */
  background: linear-gradient(to bottom, #001eff, #00ff9f);
  position: fixed;
}

.backgroundalt::after {
  content: "";
  position: fixed;
  width: inherit;
  height: inherit;
  background: linear-gradient(to bottom, #b2e9ff, #d600ff);
  -webkit-mask-image: linear-gradient(to left, transparent, #b2e9ff),
  url(../img/noise.svg);
}

.content {
  position:absolute;
  top: 5%;
  left: 3%;
  width:98%;
  height: 5000px;
  /* background-color: white; */
}

.input--hidden {
  display:none;
}

.contentalt {
  position:absolute;
  /* left: 5%; */
  /* height: 5000px; */
  /* background-color: white; */
}

#menuTitle {
  font-family: "Allogist Regular";
  font-weight: bold;
  font-size: 2vw;
}

#title {
  text-align: center;
  color:#ccf0ff;
  font-family: "Allogist Regular";
  font-weight: bold;

}

#subtitle {
  margin-left: 5%;
  color:#ccf0ff;
  font-family: "Gopher Mono";
  font-style: italic;
  font-size: 2.5vw;
}

#subtitlealt {
  /* margin-left: 5%; */
  text-align: center;
  color:#ccf0ff;
  font-family: "BentonSans Book";
  /* font-style: italic; */
}

.info {
  padding:1% 3% 1% 3%;
  font-family: "BentonSans Light";
  text-align: center;
  font-style: italic;
  color:#ccf0ff;
}

.section-right, .section-left {
  border-style: solid;
  border-width: 3px;
  border-color: #ccf0ff;
  width:35%;
  margin-top: 7%;
  /* margin-right:5%; */
}

.section-right {
  text-align: right;
  padding-right:4%;
  margin-left: 55%;
}

.section-left {
  text-align: left;
  padding-left:4%;
}

.piece-title {
  font-family: "Allogist Regular";
  font-size: 3.5vw;
}

input{
  margin-top:2%;
  margin-bottom: 2%;
  margin-right:2%;
}

button{
  background-color: black;
  border-style: solid;
  border-color: #00ff9f;
  color:#ccf0ff;
}

a {
  color: #00ff9f;
  text-decoration: none;
  font-family: "BentonSans Book";
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

button:hover {
  border-color: black;
  background-color: #00ff9f;
  color: black;
  cursor: pointer;
}

.menuLink {
  display:inline;
  padding-left:1%;
}

.mainText {
  background:rgba(0, 0, 0, 0.5);
  border-style: solid;
  border-color: white;
  border-radius: 10px;
  box-shadow: 0 0 50px #ffffff;
  display:flex;
  align-items: center;
  justify-content: center;
  /* opacity: 0.5; */
  width:80%;
  height:70%;
  line-height: 70%;
  position:fixed;
  top: 18%;
  left:10%;
  overflow-y: none;
}

.mainTextAlt {
  margin-top: 10%;
}

#pieceTitleAlt {
  font-family: "Allogist Regular";
  margin:auto;
  background:rgba(0, 0, 0, 0.5);
  border-style: solid;
  border-color: white;
  border-radius: 15px;
  box-shadow: 0 0 50px #ffffff;
  width:80%;
  /* padding-top:10%;
  padding-bottom: 15%; */
}

/* .imageDiv img {
  max-height: 500px;
} */

.totalArticle {
  margin-top: 10%;
}

.article {
  font-family: "BentonSans Book";
  padding-left: 3%;
  padding-right: 3%;
  color:white;
  display:none;
}

.articleAlt {

  padding: 3%;
  font-family: "BentonSans Book";
  color:white;
}

.middleAlign {

  line-height: normal;
  opacity: 0.8;
}

#pieceTitle {
  display: block;
  color:white;
}

.title {
  font-family: "Allogist Regular";
  color:white;
  line-height: normal;
  text-align: center;
  text-shadow: 3px 3px 5px black;
}

.author {
  color: white;
  font-family: "BentonSans Book";
  font-style: italic;
  font-size: 2.5vw;
  text-align: center;
}

.footnote {
  color:pink;
}