/********************************************************************************************/
/*                Stylesheet for smoothie.html                                              */
/*                Autora: Ruyi Xia Ye                                                       */
/*                Version: 1.0                                                              */
/*                Fecha: Octubre 2023                                                       */
/*                Comentario: Trabajo lenguajes de marcas para portfolio                    */
/********************************************************************************************/

@font-face {
    font-family: smoothie;
    src: url(../fonts/Agbalumo-Regular.ttf);
}

@font-face {
    font-family: extralight;
    src: url(../fonts/PlaypenSans-ExtraLight.ttf);
}

* {box-sizing: border-box;
} 

body {background-image: url(../img/background\ image\ 1.png);
    background-size: 28%;
    margin: 0;
    padding: 0;
}

#wrapper {width: 80%;
    margin: auto;
    background-color: rgb(255, 245, 252);
    font-family: extralight;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 2%;
    padding-top: 1%;
}

blockquote {font-style: italic;
    color: rgb(36, 35, 35);
    text-align: center;
    font-family: extralight;
    padding: 2%;
    border-left: 5px solid rgb(221, 29, 141);
    box-shadow: 5px 10px rgb(248, 199, 233) ;
    background-color: rgb(251, 249, 246);
}

h1 {color: rgb(221, 29, 141);
    font-family: smoothie;
    text-align: center;
    font-size: 70px;
    text-shadow: 1px 1px 0px black,
                -1px 1px 0px black,
                1px -1px 0px black,
                -1px -1px 0px black;
}

h2 {color:rgb(221, 29, 141) ;
    border: 2px solid rgb(250, 193, 233) ;
    border-radius: 12px;
    background-color: rgb(251, 249, 246) ;
    text-align: center;
}

img {background-position: 66%;
padding: 2%;
width: 100%;
}

ul {list-style-image: url(../img/raspberry_1791310.png);}


/****************************************RESPONSIVE********************************************/
@media only screen and (width<800px) {
    #wrapper{width: 100%}
    img{width:100%}
    h1{font-size: 3.5em;}
}