/* GENERAL */

img {
	width: 100%;
	display: block;
}

h1, h2, h3, h4 {
	font-family: 'Fira Sans', sans-serif;
}

p { 
    font-family: 'Open Sans', sans-serif;
}

b, em {
    font-weight: 600;
}

i, em {
    font-style: italic;
}

.imgHairline {
	border: solid .75px #808080;
}





/* Header */
.headerBar{
    padding: 30px 0;
}

.headerBar img {
    width: 50%;
    margin: 0 auto;   
}





/* Main */
.yellowBorder, .orangeBorder, .pinkBorder, .blueBorder {
    padding: 7.5vw;
    border-style: none solid none solid;
    border-width: 2.5vw;
}

h2, h3, h4, p {
    text-align: center;
}

h2 {
    font-weight: 500;
	font-size: 26px;
	line-height: 1.1;
	margin: 5px 0 25px 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 3px solid;
    color: rgb(0,142,176);
}

h3 {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.25;
    color: rgb(0,142,176);
    margin-top: 110px;
}

h4 {
    font-weight: 500;
    font-style: italic;
    font-size: 18px;
}

p, .button, ul, ol {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 14px;
    color: rgb(0,84,106);
}

p em {
    color: rgb(0,142,176);
}

li {
    margin-bottom: 10.5px;
}

ul, ol {
    margin-top: 0;
}

.listStarter {
    margin-bottom: 0;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(0,142,176);
}

.button {
    display: block;
	margin: 0 auto 14px auto;
	padding: 10px 10px;
	width: fit-content;
	background-color: grey;
	color: white;
	text-decoration: none;
	font-weight: 600;
    letter-spacing: .5px;
	transition: all 0.5s ease;
}

.button:hover {
	background-color: black;
    color: mintcream;
    padding: 10px 25px;
}





/* Colors */
.yellowBorder {
    border-image: linear-gradient(to bottom, rgb(253,185,19), rgb(245,236,48)) 1;
}
.yellowBorder h2 {
    border-color: rgb(253,185,19);
}
.yellowBorder h4 {
    color: rgb(253,185,19);
}
.yellowBorder .button {
	background-color: rgb(253,185,19);
	color: rgb(0,84,106);
    transition: all 0.5s ease;
}
.yellowBorder .button:hover {
	background-color: rgb(245,130,32);
    color: white;
}

.orangeBorder {
    border-image: linear-gradient(to bottom, rgb(245,130,32), rgb(253,185,19)) 1;
}
.orangeBorder h2 {
    border-color: rgb(245,130,32);
}
.orangeBorder h4 {
    color: rgb(245,130,32);
}
.orangeBorder .button {
	background-color: rgb(245,130,32);
	color: white;
}
.orangeBorder .button:hover {
	background-color: rgb(241,90,34);
    color: white;
}

.pinkBorder {
    border-image: linear-gradient(to bottom, rgb(194,48,67), rgb(239,64,85)) 1;
}
.pinkBorder h2 {
    border-color: rgb(239,64,86);
}
.pinkBorder h4 {
    color: rgb(239,64,86);
}
.pinkBorder .button {
	background-color: rgb(239,64,86);
	color: white;
}
.pinkBorder .button:hover {
	background-color: rgb(194,48,67);
    color: white;
}

.blueBorder {
    border-image: linear-gradient(to bottom, rgb(0,84,106), rgb(0,142,176)) 1;
}
.blueBorder h2 {
    border-color: rgb(98,175,201);
}
.blueBorder h4 {
    color: rgb(249,183,25);
}
.blueBorder .button {
	background-color: rgb(0,142,176);
	color: white;
}
.blueBorder .button:hover {
	background-color: rgb(0,84,106);
    color: white;
}





.celebrateColors {
    background-image: linear-gradient(to top, rgb(253,185,19), rgb(245,236,48));
}

.celebrateColors .footerText p {
    color: rgb(0,84,106);
}

.celebrateColors .footerText a {
    color: rgb(284,48,67);
}

.celebrateColors .footerText a:hover {
    color: rgb(149,33,49);
}

.factsColors {
    background-image: linear-gradient(to top, rgb(245,130,32), rgb(253,185,19));
}

.factsColors .footerText p {
    color: rgb(0,84,106);
}

.factsColors .footerText a {
    color: rgb(245,236,48);
}

.factsColors .footerText a:hover {
    color: rgb(239,64,86);
}

.shareableColors {
    background-image: linear-gradient(to top, rgb(194,48,67), rgb(239,64,86));
}

.shareableColors .footerText p {
    color: rgb(253,221,215);
}

.shareableColors .footerText a {
    color: rgb(201,222,232);
}

.shareableColors .footerText a:hover {
    color: rgb(0,142,176);
}

.merchColors {
    background-image: linear-gradient(to top, rgb(0,84,106), rgb(0,142,176));
}

.merchColors .footerText p {
    color: rgb(253,221,215);
}

.merchColors .footerText a {
    color: rgb(245,236,48);
}





/* Footer */
footer {
    background-image: linear-gradient(to right, rgb(149,33,49), rgb(284,48,67));
	padding: 7.5vw;
}

.socialIcons {
	display: grid;
	width: 40%;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 15px;
	margin: 0 auto;
	align-items: center;
}

.socialIcons a img {
	opacity: 100%;
	transition: opacity 0.5s ease;
}

.socialIcons a img:hover {
	opacity: 50%;
}

.footerText {
    margin-top: 20px;
}

.footerText p {
	text-align: center;
    color: rgb(201,222,232);
    margin: 0;
}

.footerText p a {
    color: rgb(245,236,48);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.5s ease;
}

.footerText p a:hover {
    color: rgb(253,185,19);
}

.footerText .creditLine {
    margin-top: 14px;
}





/* Home */
.homeHeaderBar {
    background-image: linear-gradient(to right, rgb(0,84,106), rgb(0,142,176));
}

.heroImage {
    z-index: -10;
}

header {
    position: relative;
}

h1 {
    background-image: linear-gradient(to right, rgb(0,84,106), rgb(0,142,176));
    color: rgb(253,221,215);
    font-size: 36px;
    padding: 3.75vw 7.5vw;
    width: 50vw;
    position: absolute;
    bottom: 7.5vw;
    left: 17.5vw;
    text-align: center;
}

.ridgedBandGraphic {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
    align-items: center;
}

.rb1{
    animation: rotateCCW 20s infinite linear;
}

.rb2 {
    width: 75%;
    margin: auto;
    animation: rotateCW 15s infinite linear;
}

.rb3{
    animation: rotateCCW 10s infinite linear;
}

@keyframes rotateCCW {
 	0% {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}

@keyframes rotateCW {
 	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.merchSection {
    background-image: linear-gradient(to bottom, rgb(0,84,106), rgb(0,142,176));
}

.merchSection div {
    padding: 7.5vw;
}

.merchSection h2 {
    color: rgb(245,236,48);
    border: none;
}

.merchSection h2 span {
    color: rgb(284,48,67);
}

.merchSection p {
    color: rgb(201,222,232);
}

.merchSection .button {
    background-color: rgb(284,48,67);
	color: white;
    margin-bottom: 0;
}

.merchSection .button:hover {
	background-color: rgb(149,33,49);
    color: white;
}

.multiplyPhoto img {
    mix-blend-mode: multiply;
    transition: all 0.5s ease;
}

.multiplyPhoto img:hover {
    filter: brightness(75%);
}





/* Pop Up */
.popup {
    background-image: linear-gradient(to right, rgb(0,84,106), rgb(0,142,176));
    width: 300px;
    padding: 20px;
    position: fixed;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    font-family: "Open Sans", sans-serif;
    display: none; 
    text-align: center;
    z-index: 100;
    box-shadow: 0 0 0 100vh rgba(0,0,0,.75);
}

.popup div {
    display: grid;
}

.popup article {
    display: grid;
    grid-gap: 20px;
    margin-top: -20px;
}

.popup button {
    display: block;
    width: 100%;
    margin:  0 0 30px auto;
    padding: 0 0 0 90%;
    background-color: transparent;
    font-size: 40px;
    color: white;
    border: none;
    cursor: pointer;
    transition: filter 0.5s ease;
}

.popup button:hover {
    filter: brightness(.75);
}

.popup h2 {
    margin: -20px 0 -10px 0;
    border: none;
    color: rgb(245, 236, 48);
}

.popup p {
    margin: 0;
    color: rgb(201, 222, 232);
}

.popup img {
    width: 75%;
    margin: 0 auto;
}

.popup a {
    background-color: rgb(284,48,67);
	color: white;
}

.popup a:hover {
    background-color: rgb(149,33,49);
    color: white;
}





/* Interior Pages */
.celebrate section img {
    margin-top: 28px;
}

.pun {
    color: rgb(253,185,19);
    font-size: 18px;
    font-style: italic;
}

.facts img {
    margin: 100px 0 50px 0;
}

.cocktails img {
    margin: 100px 0 30px 0;
}

.cocktailStart {
    margin-top: 100px;
}

.facts h3, .cocktails h3 {
    margin-top: 0px;
}

.facts div {
    margin-top: 50px;
}

.facts a {
    color: rgb(0,142,176);
    text-decoration: none;
}

.jumpButtons, .playlistButtons {
    text-align: center;
}

.jumpButtons a, .playlistButtons a{
    display: inline-block;
    margin: 10px 5px;
}

.playlistButtons a:last-child {
    margin-top: 0!important;
}

html {
    scroll-behavior: smooth;
}

.cocktails .jumpButtons {
    margin-top: 30px;
}

.enjoyDrinks h2 {
    margin-top: 50px;
    border: none;
    background-color: rgb(245, 236, 48);
    padding: 15px;
}

#anchor_facts div:first-of-type, #anchor_fallacies div:first-of-type {
    margin-top: 30px;
}

#anchor_fallacies b{
    color: rgb(0,142,176);
}

#anchor_fallacies div {
    margin-top: 75px;
}

.recipe p, .recipe h3, .recipe ul, .recipe ol {
    text-align: left;
}

.shareable .pinkBorder h3 {
    margin: 5px 0 20px 0;
}

.shareable .pinkBorder h4 {
    margin-top: 80px;
}

.merchGrid a img, .shareableGrid a img, .cocktailGrid a img {
    transition: all 0.5s ease;
}

.merchGrid a img:hover, .shareableGrid a img:hover, .cocktailGrid a img:hover {
	transform: scale(1.05);
    filter: brightness(.9);
}

.merchGrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    margin-top: 30px;
}

.cocktailGrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    margin-top: 30px;
}

.cocktailGrid img {
    margin: 0;
}

.recipe a {
    text-decoration: none;
    font-weight: 600;
    color: rgb(0, 142, 176);
}

#anchor_shirt, #anchor_sweatshirt, #anchor_underwear, #anchor_hat {
    margin-top: 130px;
}

.shareableGrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    width: 75%;
    margin: 0 auto;
}

























@media (min-width: 650px) {
    
    .deskHide {
        display: none;
    }
    
    
    
    
    
    /* Header */
    .headerBar img {
        width: 35%;
    }
    
    .headerLogo {
        width: 60%;
        margin: 0 auto;
    }
    
    
    
    
    
    /* Footer */
    footer {
        padding: 5vw 7.5vw;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .socialIcons {
        grid-gap: 10px;
        margin: 0 0 auto auto;
        grid-column: 2/3;
    }

    .footerText {
        margin-top: 0;
        grid-row: 1;
    }
    
    footer .creditLine {
        width: 200%;
    }

    .footerText p {
        text-align: left;
    }

    .footerText p b {
        color: rgb(245,236,48);
    }
    
    
    
    
    
    /* Home */
    .home .headerBar{
        padding: 3.75vw;
        width: 35%;
        top: 3.75vw;
    }

    .headerBar img {
        width: 100%;
    }
    
    .homeHeaderBar {
        position: absolute;
    }

    h1 {
        background-image: linear-gradient(to left, rgb(0,84,106), rgb(0,142,176));
        padding: 2vw 3.75vw;
        width: 60vw;
        bottom: 3.75vw;
        left: 32.5vw;
    }
    
    .ridgedBandGraphic {
        display: block;
    }
    
    .home .yellowBorder{
        position: relative;
        overflow: hidden;
    }

    .rb1{
        animation: rotateCCW 30s infinite linear;
        position: absolute;
        right: -10vw;
        width: 40%;
        bottom: 5vw;
        z-index: -10;
    }

    .rb2, .rb3 {
        display: none;
    }
    
    .home .yellowBorder, .home .orangeBorder, .home .pinkBorder, .home .blueBorder {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        align-items: center;
    }    
    
    .home .yellowBorder .homeText, .home .orangeBorder .homeText {
        grid-column: 1/3;
    }
    
    .home .blueBorder .homeText, .home .pinkBorder .homeText {
        grid-column: 2/4;
    }
    
    .home .blueBorder img, .home .pinkBorder img {
        grid-row: 1;
    }
    
    .merchSection {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
 
    .multiplyPhoto img {
        object-fit: cover;
        height: 100%;
    }
    
    
    
    
    
    /* Pop Up */
    .popup {
        width: 475px;
    }
    
    .popup div {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 40px;
        align-items: center;
    }
   
    .popup button {
        grid-column: 1/4;
    }
    
    .popup img {
        width: 100%;
    }
   
    
    
    
    
    /* Interior Page */
    .celebrate .centerText p, .celebrate .yellowBorder h2 {
        text-align: center;
    }
    
    .celebrate .yellowBorder section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        align-items: center;
    }
    
    .celebrate p, .celebrate h3, .celebrate h2 {
        text-align: left;
    }
    
    .celebrate h3, .celebrate section img {
        margin-top: 0;
    }
    
    .celebrate .button {
        margin-bottom: 0;
    }
    
    .celebrate .yellowBorder section {
        margin-top: 100px;
    }
    
    .celebrate .button {
        margin-left: 0;
    }
    
    .deskLeftImg {
        grid-column: 1/2;
        grid-row: 1;
    }
    
    .celebrate .yellowBorder article div, {
        width: 75%;
    }
    
    .playlistButtons {
        text-align: left;
    }
    
    .playlistButtons a:last-child {
        margin-top: 10px!important;
    }
    
    .facts .orangeBorder section div, .facts .orangeBorder article div, .shareable .pinkBorder article div, .merch .blueBorder article div, .cocktails .yellowBorder article div {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .merchGrid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .cocktailGrid {
        grid-template-columns: 1fr 1fr 1fr;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .cocktailStart {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #anchor_shirt, #anchor_sweatshirt, #anchor_underwear, #anchor_hat, .extraMargin {
        margin-top: 80px;
    }
    
    .shareableGrid {
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
    }
    
    .order1 {
        grid-column: 1/2;
        grid: 1;
    }
    
    .order2 {
        grid-column: 2/3;
        grid-row: 1;
    }
    
    .order3 {
        grid-column: 3/4;
        grid-row: 1;
    }
    
    .order4 {
        grid-column: 1/2;
        grid: 2;
    }
    
    .order5 {
        grid-column: 2/3;
        grid-row: 2;
    }
    
    .order6 {
        grid-column: 3/4;
        grid-row: 2;
    }
    
    .recipe img {
        width: 75%; 
        margin-left: auto;
        margin-right: auto;
    }
    
    .recipe div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .recipeIntro {
        grid-column: 1/3;
        margin-bottom: 14px;
    }
   
    
    
    
    
}

























@media (min-width: 800px) {
    
    .home .yellowBorder p, .home .orangeBorder p, .home .pinkBorder p {
        width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    
    
    
}

























@media (min-width: 1100px) {
    
    body {
        max-width: 1100px;
        margin: 0 auto;
    }
    
    .yellowBorder, .orangeBorder, .pinkBorder, .blueBorder {
        padding: 90px;
        border-width: 25px;
    }
    
    footer {
        padding: 30px 90px;
    }
    
    .socialIcons {
        width: 30%;
    }
    
    h1 {
        padding: 20px 40px;
        width: 450px;
        bottom: 40px;
        left: 570px;
    }
    
    .home .headerBar{
        padding: 40px;
        width: 350px;
        top: 40px;
    }
    
    .merchSection div {
        padding: 90px;
    }

     .rb1{
        right: -90px;
        width: 350px;
        bottom: 60px;
    }

    
    
    
    
}