/* CSS variables */

:root {
    --main-bg-color: #1481BA;
    --secondary-color: #0CAADC;
    --light: #E0D68A;
    --contrast: #D1603D;
    --dark: #14110F;
}

* {
    margin: 0;
    /* text-align: center; */
}

html {
    background-color: var(--main-bg-color);
}

body {
    color: var(--light);
    font-family: 'Voltaire', sans-serif;
}

header {
    text-align: right;
    padding-right: 1%;
    font-size: 1.5rem;
    position: sticky;
    top: 0;
}

aside {
    position: fixed;
}


/* Line divider */

hr {
    color: black;
    height: 5px;
    background-color: var(--contrast);
    opacity: 1;
    margin: 3% 0 0 0;
    width: 100%;
}

img {
    padding: 0 3%;
}

h1 {
    font-size: 1.8rem;
}

h2 {
    font-size: 2rem;
    padding: 0rem 1rem;
}

aside {
    margin-left: 4%;
}


/* Input bars adjustment */

input {
    font-family: 'Voltaire', sans-serif;
    border-radius: .5rem;
    background-color: var(--dark);
    color: var(--contrast);
    width: 100%;
    outline: none;
}

/* Card results text coloring */
#results {
    display: none;
    color: var(--light);
}

#results2 {
    display: none;
}


/* .flex {
    display: flex;
    justify-content: right;
    align-items: right;
    flex-direction: column;
} */


/* Drink Cards Width */

.card {
    width: 60%;
    background-color: var(--dark);
    color: var(--light);
}


/* Drink titles styling */

#drinkName,
#drinkName1,
#drinkName2,
#drinkName3,
#drinkName4,
#drinkName5 {
    color: var(--light);
    font-size: 300%;
    margin: 0 0 0 3%;
    position: relative;
}


/* First result needs 1% more top padding to match */

#instructions {
    padding: 1% 3% 0 3%
}

#instructions1,
#instructions2,
#instructions3,
#instructions4,
#instructions5 {
    padding: 0 3% 0 3%
}


/* Center alignment and bottom padding of ingredients list */

#ingredients,
#ingredients1,
#ingredients2,
#ingredients3,
#ingredients4,
#ingredients5 {
    text-align: center;
    padding: 0 0 5% 0;
}


/* Fixed padding for product and form */

.is-one-fourth,
#product,
form {
    padding: 0 2%;
}


/* Hide bullet points of drinkHistory */

#drinkHistory ul {
    list-style-type: none;
    flex-direction: column;
}


/* Styling of drinkHistory button */

#drinkHistory button {
    font-family: 'Voltaire', sans-serif;
    font-size: 1.5rem;
    align-items: center;
    width: 80%;
    height: auto;
    margin: 1%;
    padding: 2%;
    border-color: var(--light);
    background-color: var(--light);
    color: var(--contrast);
    border-radius: 1.5rem;
}

#drinkHistory button:hover {
    background-color: var(--main-bg-color);
    color: var(--light);
}


/* Search & Clear btn styling */

#search {
    margin: 1% 0 0 .5%;
}
#clear {
    font-family: 'Voltaire', sans-serif;
    background-color: var(--contrast);
    margin-bottom: 2%;
}

#search,
#clear {
    border-radius: .5rem;
    width: 49%;
    height: 1.5rem;
}

#search:hover {
    background-color: var(--dark);
    color: var(--light);
}

#clear:hover {
    background-color: var(--main-bg-color);
    color: var(--light);
}


/* Header span class */

#anon {
    color: var(--dark);
}


/* Alcohol span class */

#alc {
    color: var(--contrast);
}

#mobile {
    color: var(--main-bg-color);
}

@media screen and (max-width: 1215px) {
    input {
        width: 100%;
    }
    h2 {
        font-size: 150%;
    }
}

@media screen and (max-width: 1040px) {
    h2 {
        font-size: 140%;
    }
}

@media screen and (max-width: 808px) {
    h2 {
        font-size: 140%;
    }
}

@media screen and (min-width: 320px) and (max-width: 768px) {
    html {
        background-color: var(--dark);
    }
    form {
        display: flex;
        flex-direction: column;
    }
    form button {
        margin: 0 2%;
    }
    input {
        height: 2rem;
        width: 75%;
    }
    hr {
        margin: 1% 0 0 0;
        width: 75%;
    }
    #drinkName,
    #drinkName1,
    #drinkName2,
    #drinkName3,
    #drinkName4,
    #drinkName5 {
        font-size: 200%;
    }
    #drinkHistory button {
        width: 70%;
    }
    .card {
        width: 70%;
    }
    #results {
        margin-left: 15%;
    }
    aside {
        position: relative;
    }
    #search,
    #clear {
        width: 36%;
        height: 2rem
    }
}