/*load in web fonts*/
/* @import statement must be at the top of the CSS. only have 1 @import statement */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@200&family=Rubik:wght@300&display=swap');

/*  global reset to eliminate differences in default spacing between different browsers*/

* {
    margin: 0;
    padding: 0;
}

/*    fix up for older browsers to correclty show the new semantic tags*/

header,
main,
nav,
section,
article,
aside,
footer,
figure,
figcaption {
    display: block;
}

/*    basic text sizes & font*/

html {
/*    for use of REM, add an initial size here - on the root element */
    font-size: 10px;
    font-family: "Rubik", "Helvetica Neue", Arial, sans-serif;
    font-weight: normal;
    color: #000000;
}

/*    Use REM to set font-size, line-height and padding for basic text styling*/
p {
    font-size: 1.6rem;
    line-height: 1.2;
/*    shorthand  top&bottom  left&right*/
    padding: 1rem 0;
}

h1,
h2 {
    font-family: "Azeret Mono", "Helvetica Neue", sans-serif;
/*    shorthand  top right bottom left*/
    padding: 1rem 0 0 0;
}

h2 {
    font-size: 3rem;
}

h1 {
    color: rgba(207, 215, 244, 0.84);
    font-size: 12vw;
}

body {
    background-color: rgb(255, 255, 255);

}

img{
    max-width: 100%;
    height: auto;
}

/*    header/feature styling*/
#feature{
    padding: 10vh 0 5vh 0;
    text-align: center;

}

#image{
    padding: 2vh 0 4vh 0;
    text-align: center;

}

/* wrapper div to have fluid width and a maximum width*/

#wrapper {
    width: 90%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/*------------------------------*/
/*------------------------------*/
/*MEDIA QUERY for window wider than 600px*/
@media only screen and (min-width:600px) {
/*change heading sizes and colours*/
    h1{
        font-size: 4rem;
    }
    
    h2{
        color: #ffccf9;
    }
        
}
/*close media query*/

/*media query for windows wider than 800px*/
@media only screen and (min-width: 800px) {
    p{
        max-width: 65rem;
        margin:0 auto;
    }
}