html {
    height: 100%;
    width: 100%;
}

#header {
    display: flex;
    background-image: url(assets/background.jpg);
    flex-flow: column;
    background-size: cover;
    height: 100vh;
    
}

#bottom {
    display: flex;
    background-image: url(assets/roullette.png);
    flex-flow: column;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    align-content: center;
    align-items: center;
}

.section {
    background: black;
    display: flex;
    flex-flow: column;
    padding-top: 10vh;
    padding-bottom: 10vh;


}

#bottombuttons {
  display: flex;
  flex-flow: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1023px) {
  #bottombuttons {
    flex-flow: column;
  }
}


#headerplaceholder {
    height: 43vh;
    width: 25vw;
}

.navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: 'Exo 2', sans-serif;
  }

.icon {
    color: white;
}
.navbar a:hover {
    background-color: #c3073f;
    color: black;
  }
  
@media screen and (max-width: 1023px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
      display: block;
    }
  }
  
  @media screen and (max-width: 1023px) {
    .navbar.responsive {position: relative;}

    .navbar.responsive {
        background-color: black;
        flex-direction: column;
    }
    .navbar.responsive a {
      float: none;
      display: block;
      text-align: center;
    }
  } 

  
#logo {
    font-size: calc(16px + 1vw);
    color: white;
    font-family: 'Alumni Sans Inline One', sans-serif;
    text-shadow: 2px 0 #ff001b, -2px 0 #ff001b, 0 2px #ff001b, 0 -2px #ff001b,
        1px 1px #ff001b, -1px -1px #ff001b, 1px -1px #ff001b, -1px 1px #ff001b;
}

.textheader {
    margin-top: 5vh;

    text-align: center;
    width: 45vw;
    align-self: flex-end;

}

.arrow {
    align-self: center;
}

.textcontainer {
    display: flex;
    flex-direction: row;
    width: 65vw;
    justify-content: end;
    margin-bottom: 5vh;
}
@media screen and (orientation:portrait) {
    .textcontainer {
        align-self: center;
        justify-content: center;
    }

    .textheader {
        width: 100%;

    }

}

.coverbold {
    font-family: 'Exo 2', sans-serif;
    font-size: calc(16px + 2vw);
    margin: 5px;
    text-align: center;

}

.bigbold {
    font-weight: 900;
}

.littlebold {
    font-weight: 700;
}

.white {
    color: white;
}

body {
    background-color: black;
    margin: 0px;
}

.downarrow {
    height: 96px;
    width: 96px;
    filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}


#mapbox {
    height: 80%;
    width: 80%;
    display: inline-block;
    margin-top: 2vh;
    align-self: center;
}

.headers {
    font-size: calc(16px + 3.5vw);
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    margin-bottom: 0px;
    padding-left: 2vw;
    padding-right: 2vw;
}

.smallerheaders {
    font-size: calc(16px + 2vw);
    align-self: center;
    font-family: 'Exo 2', sans-serif;
    text-align: center;

}

.smallheadersindex {
    margin-top: 0;
    margin-bottom: 0.5vh;
    width: 90vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

.defaulttext {
    align-self: center;
    width: 80vw;
    font-size: calc(16px + 0.5vw);
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    margin-bottom: 0px;
    margin-top: 2vh;
}

.pink {
    color: #c3073f;
}

#pills {
    margin-top: 10vh;
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 10vh;
}

.pillsplaceholder {
    width: 15vw;
}

#bottomplaceholder {
    height: 27vh;
    width: 1vh;
}

#endsaying {
    align-self: center;
    width: 60vw;
    padding-bottom: 5vh;
}

.verticalline {
    fill: grey;
    border: 1px solid grey;
    height: 30vh;
}

.pinkbright {
    color: #c3073f;
    fill: none;
    filter: brightness(1.75);
    text-shadow: #c3073f 1px 0 10px;
}

pinky {
    color: #c3073f;
    fill: none;
    filter: brightness(1.75);
    text-shadow: #c3073f 1px 0 10px;
}

whity {
    color: white;
    fill: none;
    filter: brightness(1.75);
    text-shadow: white 1px 0 10px;
}

.pillimg {
    width: 15vw;
    height: 25vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#pillimgleft {
    background-image: url(assets/pillleft.png);


}

#pillimgright {
    background-image: url(assets/pillright.png);

}

.psabutton {
	background-color:transparent;
	border-radius:28px;
	border:3px solid #c3073f;
    width: fit-content;
	cursor:pointer;
	color:#ffffff;
    font-family: 'Exo 2', sans-serif;
	font-size:16px;
	font-weight:700;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px black;
    text-align: center;
}

.psabutton:hover {
	background-color:black;
}

.otherbutton:hover {
    background-color: #c3073f;
}
.psabutton:active {
	position:relative;
	top:1px;
}

#faces {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@keyframes fadeIn {  
    from {  
        opacity:0;  
    }  
 
    to {  
        opacity:1;  
    }  
 }

 @keyframes fadeOut {  
    from {  
        opacity:1;  
    }  
 
    to {  
        opacity:0;  
    }  
 }

.newstext {
    font-family: 'DM Serif Display', serif;
    font-size: 16px;
    text-align: center;
}

.row {
    display: flex;
}

#narcanimg {
    background-image: url(assets/hand.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    align-self: center;
    height: 80vh;
    width: 50vw;
    background-position: 25%;
    
}

#narcanbackground {
    display: flex;
    background-color: black;
    height: 100vh;
    flex-flow: column;
}


#narcaninfo {
    align-items: center;
    justify-content: center;
    display: flex;
    height: 80vh;
    width: 50vw;
}

#narcanrow {
    display: flex;
    flex-flow: row;
    
}

#narcantextbox {
    width: 100%;
    display: flex;
    align-items: center;
    align-self: center;
    flex-direction: column;
    padding-bottom: 2vh;
}

.narcantext {
    width: 80%;
    font-size: calc(16px + 0.5vw);
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    padding-bottom: 2vh;
}

#paddingbutton {
    margin-bottom: 2vh;
}

#whatis {
    padding-bottom: 2vh;
}

@media screen and (max-width:767px) {
    #narcanrow {
        flex-flow: column;
        height: 98vh;
    }

    #narcanimg {
        height: 50vh;
        width: 100%;
    }

    #narcaninfo {
        height: 50%;
        width: 100%;
    }
}

#savelives {
    display: inline-block;
    margin-top: 2vh;
}

#defaultface {
    width: 5.8vw;
    height: 8.66vw;
}
@media screen and (max-width:767px) {
    #defaultface {
        width: 11.6vw;
        height: 17.33vw;
    }
}
@media screen and (max-width:1023px) {
    #defaultface {
        width: 7.54vw;
        height: 11.27vw;
    }
}


.face {
    animation: fadeIn 10s;
    visibility: hidden;
    background-size: 150%;
    background-position: center;
    background-repeat: no-repeat;
}

.typetext {
    text-align: left;
    align-self: center;
    width: fit-content;
    font-family: monospace;
    font-size: 30px;
    font-weight: 700;
    color:#0000;
    background:
      linear-gradient(-90deg,#c3073f 5px,#0000 0) 10px 0,
      linear-gradient(#c3073f 0 0) 0 0;
    background-size:calc(var(--n)*1ch) 200%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;
    animation: 
      b .7s infinite steps(1),   
      t calc(var(--n)*.1s) steps(var(--n)) forwards;
  }
  @keyframes t{
    from {background-size:0 200%}
  }
  @keyframes b{
    50% {background-position:0 -100%,0 0}
  }

.typingtextbox {
    width: 80vw;
    align-self: center;
    text-align: center;
}


.stattext {
    color: #c3073f; 
    width: 90%;
    font-size: calc(16px + 0.5vw);
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    align-self: center;
}

.statanimation {
    color:#0000;
    background:
      linear-gradient(#c3073f 0 0) 0 50%/150% 95%,
      linear-gradient(#c3073f 0 0) 0 0  /100% 100%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: 
     t var(--n) forwards,
     b var(--n) 1.2s forwards;
  }
  
  @keyframes t{
    from {background-size:0 95%,0 100%}
  }
  @keyframes b{
    100% {background-position:-200% 50%,0 0}
  }

.sourcestext {
    margin: 0;
    color: white;
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    overflow-wrap: break-word;
}

#sources {
    display: flex;
    flex-direction: column;
}

#sourcetextbox {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 90vw;
    padding-top: 2vh;

}

#infotext {
    width: 90vw;
    text-align: center;
    animation: fadeOut 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    margin-bottom: 3vh;
    justify-self: flex-start;
}