/*CSS RESET*/
html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td,  
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font: inherit;  
vertical-align: baseline;  
}
/*GENERAL STYLES*/
html{
    font-size:62.5%;
}
body{
    font-size:1.6rem;
    line-height: 1.5;
    font-family: 'Raleway', sans-serif;

    /* adding a max width so that when on huge screen the user doesnt have to span their eyes all throughout the screen width. Makes the site more functional */
    max-width: 1800px;
    margin: 0 auto;
}
h1, p, .name, .bio {	
    font-family: 'Raleway', sans-serif;	
    text-align: center;	
    margin: 4%;	
}	
h1{
    font-size:6rem;
    margin:0;
}
a {	
    text-decoration: none;	
    color: black;
    font-size:2.5rem;	
}	
a:hover {	
    font-weight: bold;	
}	
.name{	
    font-size: 150%;	
    font-weight: 200;	
}	
img {	
    height:39rem;	
    object-fit: cover;	
    display: block;	
    margin: 2%;	
    margin-top: 4%;	
    margin-left: auto;	
    margin-right: auto;	
    border-radius: 2%;	
}	
img:hover {	
    opacity: 80%;	
}	

/*HEADER STYLES */
header{
    display:flex;
    justify-content: center;
}
nav{
    width:30%;
    display:flex;
    justify-content:space-evenly;
    margin-top:5%;
}
nav a{
    color:#626262;
}
nav span{
    border-left:3px solid #626262;

}
/*Title Section Styles*/
.title-container{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.title-container div {	
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/John_Martin_-_The_Plains_of_Heaven_-_Google_Art_Project.jpg/1920px-John_Martin_-_The_Plains_of_Heaven_-_Google_Art_Project.jpg');		
    background-position: center;	
    color: white;	
    width:80%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:60vh;
    margin:5% 0;
}	
.title-container div:hover {	
    opacity: 80%;	
}	
.title-container hr{
    width:80%;
}
button{
    padding:1% 3%;
    font-size: 1.6rem;
    border-radius:6px;
    border:2px solid #626262;
    box-shadow: 2px 2px 1px #626262;
    transition: 2s;
}
button:hover{
    background-color:#626262;
    border:2px solid white;
    color:white;
    box-shadow: 2px 2px 1px white;
}
/*Artists Section Styles */
.artists-container{
    display:flex;
    justify-content: space-around;
    width:80%;
    margin:0 auto;
    /* added a bit of margin on the bottom of the artists container because it seems to match the desktop image more. It also makes the page look more consistent with the margin-top on the nav.*/
    margin-bottom: 5%;
}

.artist{
    width:40%;
    text-align:center;
}
.artist img{
    width:100%;
}


@media (max-width: 950px) {
    /* The Styles Below are meant for the 500px width as well. I was noticing that at 950 px which is smaller than a regular laptop (1024px) The page needed to have the same styling as the mobile view would at 500px. Either way they apply at 500px, I just wanted to mention why I did this. */

    /* header responsiveness */
    nav{
        width: 60%;
    }
    /* artists section responsiveness */
    .artists-container{
        flex-direction: column;
    }
    .artist{
        width: 100%;
    }

    /* Im using the contain value of this property so that the image is fully on display when scaling the site down to mobile. More respoect to the artists*/
    .artist img{
        object-fit: contain;
    }
}



    /* after 900px the title container image loses its rectangularness, basically starts becoming a square. This looks ugly and doesn't hold true to the desktop view which has an emphasis on rectangularness in it's design for the images. I'm adding a breakpoint at 900px to solve this problem and make the container be 100% width */

@media (max-width: 900px) {
    .title-container div{
        width: 100%;
    }

    /* since Im making the image container 100% screen width, this is where I will make the hr line be 100% width as well*/
    .title-container hr{
        width: 100%;
        /* making it thicker because it starts to look tacky, especially in comparison to the spans in the nav */
        border-width: 3px;
    }
}

/* Mobile Responsiveness at 500 px and lower */
@media (max-width:500px){
    .artists-container{
        width: 100%;
    }
    .artist{
      width: 70%;
      margin: 0 auto;
    }
    /* button looks too small on mobile. Also an accessibility issue */
    button{
        padding:3% 6%;
    }
    nav{
        width: 80%;
    }
}


/* The Nav Starts to look crowded again at 450px so I will make it wider. This will allow the site to scale down far below 500px */
@media (max-width:450px){
    nav{
        width: 90%;
    }
}