/*
GLOBAL STYLESHEET
This stylesheet is common to all features (although each has a separate copy -- fixing that would be great)
you shouldn't have to change anything, but if you need to feel free but be careful
*/

html {
  line-height: 1;
  font-family: Superscratchy;
}

@font-face {
  font-family: "Audrey";
  src: url("../fonts/Audrey/Audrey-Bold.otf") format("opentype");
  font-weight: bold;
}
@font-face {
  font-family: "Founder";
  src: url("../fonts/Founders\ Grotesk/reg.otf") format("opentype");
  font-weight: normal;
}
@font-face {
  font-family: "Founder";
  src: url("../fonts/Founders\ Grotesk/bold.otf") format("opentype");
  font-weight: bold;
}



body {
  font-family: serif !important;
}

.header {
  position: fixed;
  background: black;
  z-index: 5;
  top: 0;
  width: 100%;
}

.green {
  background-color: green;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.purple {
  background-color: purple;
}
.orange {
  background-color: orange;
}
.white {
  background-color: white;
}
.black {
  background-color: black;
}
.fullheight {
  height: 100vh;
}
.xheight {
  height: 1000px;
}
.xxheight {
  height: 1300px;
}
.center {
  text-align: center;
}

.scaff {
  font-size: 80px;
  font-weight: bold;
  padding-top: 40vh;
}

.title {
  color: rgb(224, 58, 78);
  font-family: "Audrey";
  font-weight: bold;
  font-size: 140px;
  margin-top: 40px;
  line-height: 160px;;
}

.subtitle {
  color: rgb(224, 58, 78);
  font-family: "Audrey";
  font-weight: bold;
  font-size: 50px;
  margin-top: 600px;
  line-height: 160px;
}
.title-art{
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding:15px;
}


.atallah1{
  padding-top: 10vh;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.atallah2{
  margin-top: 17vh;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.atallah {
  text-align: right;
  padding-right: 15px;
  margin-top: 30px;
  padding-bottom: 15px;
}
.blackcaption{
  font-size: 30px;
  color: black;
  font-family: "Founder";
  padding-left: 300px;
}

.emptyvessel {
  color: black;
  font-family: "Founder";
  padding-left: 50px;
  margin-top: 30px;
}
.mom{
  color: white;
  font-family: "Founder";
  margin-left: 80px;
  margin-top: 30px;
}

.scrollable {
  overflow-x: scroll;
}

.toc {
  color: #1C165C;
  font-family: "Audrey";
  text-align: right;
  margin-top: 40vh;
  font-weight: bold;
  font-size: 80px;

}

.table {
  font-family: "Founder";
  text-align: left;
  margin-top: 20vh;
  font-size: 20px;
}
.cap{
  font-size: 20px;
  color: rgb(224, 58, 78);
  font-family: "Founder";
  padding-left: 40px;
}

.lucas {
  color: black;
  font-family: "Founder";
  margin-top: 30px;
  text-align: center;
}
.bold {
  font-weight: bold;
}

.lucart {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carey{
  font-size: 25px;
  color: black;
  font-family: "Founder";
}

.lucap {
  font-size: 35px;
  color: black;
  padding-bottom: -20px;
  font-family: "Founder";
  margin-left: 0px;
  text-align: center;
  z-index: 10;
}
.inbetween{
  height: 100px;
}

.dualcap {

  font-size: 30px;
  color: black;
  font-family: "Founder";
  margin-top: 625px;
  text-align: center;
}
.dual{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nick {
  background-image: url('../visual-art/raffoul-nick.png');
  background-size: contain;
}

.shelly {
  color: black;
  font-family: "Founder";
  margin-top: 30px;
  text-align: left;
}
.nicky {
  color: black;
  font-family: "Founder";
  margin-top: 710px;
  text-align: left;
  padding-left: -100px;
}
.title-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.daria {
  font-size: 30px;
  color: black;
  font-family: "Founder";
  text-align: center;
}

.transition {
  background-image: url(../visual-art/gradient.jpg);
  background-size: contain;
}
.lightblue {
  background-color: rgb(130, 204, 216);
}

.half-height {
  height: 500px;
}
.serene{
  font-size: 30px;
  color: white;
  font-family: "Founder";
  text-align: left;
}

.zeina {
  color: white;
  font-family: "Founder";
  margin-top: 30px;
  text-align: left;
}

.sek {
  font-size: 35px;
  color: black;
  font-family: "Founder";
  text-align: right;
}