@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 2.5rem;
    background-image: linear-gradient(to bottom, rgba(223, 216, 216, 0.25) 0%,rgba(236, 226, 226, 0.25) 100%), url("./background/0.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Courgette', cursive;
}

i {
    padding: 1rem;
}

#main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#quote-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1rem auto;
    padding: 3rem;
    width: 70%;
    height: 78%;
    border-radius: 4px;
    text-align: center;
    text-shadow: 0 0 9px white;
}

#text-box {
    height: 24rem;
    max-height: 24rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#author {
    font-size: 1.8rem;
}

/* new quote button */

#button-and-social-wrapper {
    margin-bottom: 0.5rem;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: 
      "social . button";
}

#new-quote {
    margin: auto 1rem auto auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12rem;
    height: 3rem;
    padding: 1.5rem;
    font-size: 1.2rem;
    border-radius: 4px;
    border: 2px ridge rgba(13, 13, 77, 0.897);
    background-color: rgba(155, 253, 220, 0.849);
    cursor: pointer;
    outline: none;
    grid-area: button;
}

#new-quote:hover {
    box-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

/* social media  */

#social-wrapper {
    display: flex;
    grid-area: social;
}

.share-quote {
    padding: 0;
    cursor: pointer;
    font-size: 4rem;
    text-shadow: 0 0 15px white;
}

#i-twitter {
    color: rgba(29,161,242,1.00);
}

#i-facebook {
    color: #385898;
}

#i-twitter:hover, #i-facebook:hover {
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(119, 119, 189), 0 0 5px rgb(105, 105, 150);
}

/* media queries */

@media only screen and (max-width:1350px){
    #text {
        font-size: 1.9rem;
    }
}

@media only screen and (max-width:1000px){
    #quote-box {
        width: 100%;
        height: 100%;
    }

    #new-quote {
        width: 7rem;
        font-size: 1rem;
    }

    .share-quote {
        font-size: 3rem;
    }

    #text {
        font-size: 1.7rem;
    }

    #author {
        font-size: 1.3rem;
    }

    #button-and-social-wrapper {
        grid-template-columns: 1fr 1rem 2fr;
    }
}

@media only screen and (max-width: 550px){
    #quote-box {
        width: 100%;
        height: 100%;
    }
    
    #new-quote {
        width: 5rem;
        font-size: 0.8rem;
    }

    .share-quote {
        font-size: 3rem;
    }

    #text {
        font-size: 1.1rem;
    }

    #author {
        font-size: 0.9rem;
    }
}