/*----------------------------------------------------------------------------- 
Bob Rome Screen Stylesheet 
version:   1.0 
date:      5/01/2020 
version history: 1.0
@import url("style.css");
-----------------------------------------------------------------------------*/ 

@import url('https://fonts.googleapis.com/css?family=Proza+Libre&display=swap');

html {
    margin: 0;
    padding: 0; 
}

body { 
	font-family: 'Proza Libre', sans-serif;
	font-size: .8rem;
    background-color: #000000;  
    color: #ffffff; 
    text-align:left;
  	letter-spacing: 1px;
    margin: 0;
    padding: 0; 
    line-height:23px;
}

.dark {background-color: #000000; }
.white {background-color: #ffffff;  color: #222222; }
.white a {color: #bbbbbb; }
.white a:hover {text-decoration: none; cursor:pointer; color: #000000; }
.white h1 a {color: #000000; }
.white h1 a:hover {text-decoration: none; cursor:pointer; color: #222222; }

.container-fluid {
	z-index:5;
	position:absolute;	
}


a {transition: all 0.5s; color: #666666; } 
a:hover {text-decoration: none; cursor:pointer; color: #ffffff; }

header {
	margin: 50px 80px 80px 90px;
	padding: 0;
    text-align:left;
    font-family: 'Proza Libre', sans-serif;
	letter-spacing: 1px; 	
}

.nav-link {	
	font-size: 1rem;
	padding: 0;
	margin: 0 0 0 20px;
	width: 100px;
}

.bio {
	width:416px;
	margin: 0 90px;
}

.bio a {transition: all 0.5s; color:#000000;}
.bio a:hover {transition: all 0.5s; border-bottom: 1px solid #000000;padding-bottom:3px;}   


h1 {
	font-size: 1rem;
	color: #ffffff;
	margin: 0;
	padding: 0;
}

h1 a {color: #ffffff;}
h1 a:hover {color:#ffffff;}

.link {
	height:32px;
	font-size: 2rem;
	padding:0;
	margin:0;	
}

.contact {
	min-height:555px;
	padding: 55% 0 0 0;	
}


/*--------IMG-----------*/ 

img {
	border:1px solid #000000;
	margin: auto;
	padding: 0;
} 

a:hover img {
	transition: all .5s ease-in-out;
	border: 1px solid #732800;
}

.thumb {
	max-width:132px;
	max-height:132px;
	margin:8px;
	padding:0;
}

.grid {
	max-width:740px;
	margin: auto;	
	padding: 50px 0;
}

.art {
	max-width: 800px;
	max-height: 600px;
	margin: 0 auto;
	padding: 0;
}


.scale {
	padding:0 20px;
}

.biothumb {
	width:160px;
	height:160px;
	margin:0 0 40px 90px;
	padding:0;
}

/*--------ANIMATION-----------*/

.logo {	
	z-index:1; 
	position:absolute;
	width:100%;
	margin:0 auto;
	padding:0;
}

.fadeOutAnimation { 
    animation: fadeOutAnimation ease 10s;
	animation-fill-mode: forwards; 
} 
@keyframes fadeOutAnimation { 
    0% { 
        opacity: 1; 
    } 
    100% { 
        opacity: 0; 
    } 
} 

.fadeInAnimation { 
    animation: fadeInAnimation ease 10s; 
} 
@keyframes fadeInAnimation { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
    } 
} 

.fadeInArt { 
    animation: fadeInArt ease .7s; 
} 
@keyframes fadeInArt { 
    0% { 
        opacity: 0; 
    } 
    100% { 
        opacity: 1; 
    } 
}




/*--------QUERIES-----------*/

@media (max-width: 768px) {
header {margin: 50px 40px 80px 20px; padding:0;}
.nav-link {margin:0; padding:0;max-width:50px; }
.grid {margin: 0 auto; width:336px;}
.art {max-width:100%; max-height:500px;}
.thumb {max-width:94px; max-height:94px;}
.biothumb {margin: 0 0 20px 20px;}
.bio {max-width:300px; margin: 0 40px 0 20px;}
.scale (max-width:300px; margin: 0 40px 0 20px; padding:0;)
.contact {min-height:100px; padding: 1% 0 0 0;}
}

@media (max-width: 375px) {
header {margin: 50px 0 0 10px;}
.nav-link {margin:0; padding:0;max-width:50px; }
.grid {margin: 0 auto; width:300px;}
.thumb {max-width:80px; max-height:80px;}
.biothumb {margin: 20px 0 0 10px;}
.bio {max-width:300px; margin: 20px 40px 20px 10px;}
.art {max-height:400px;}
}