@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'GFS Didot';
    src: url('GFSDidot-Regular.woff2') format('woff2'),
        url('GFSDidot-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Univers';
    src: url('Univers-Bold.woff2') format('woff2'),
        url('Univers-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Univers Condensed';
    src: url('Univers-BoldCondensed.woff2') format('woff2'),
        url('Univers-BoldCondensed.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Mobile First Small devices (phones, 414px and up) */

body {
    background: black;
    color: white;
}

.frame {
    background: url("page2.jpg");
    background-size: cover;  
    width: 414px;
    height: 276px;
    margin: 0px auto;
    position: relative;
}

h1 {
    font-family: 'Univers';
    font-size: 14px; 
    position: absolute;
    top: 124px;
    left: 18px;
}

a { 
    color: white;
    -webkit-transition: .3s;
    transition: .3s;
}

a:hover {
    transform: scale(.4);
    z-index:2;    

}

.miles {
  background: url("page2-miles.png");
  position: absolute;
  text-indent: -9999px;
  width: 339px;
  height: 280px;
  transform: scale(.29); 
  top: -100px;
  left: 100px;     
}

.art {
  background: url("page2-art.png");
  position: absolute;
  text-indent: -9999px; 
  width: 329px;
  height: 339px;
  transform: scale(.29); 
  top: -31px;
  left: 110px;     
}

.monk {
  background: url("page2-monk.png");
  position: absolute;
  text-indent: -9999px; 
  width: 330px;
  height: 318px;
  transform: scale(.29); 
  top: 74px;
  left: 112px;     
}

.back {
    font-family: 'GFS Didot';
    font-size: 14px; 
    position: absolute;
    top: 250px;
    left: 330px;  
}

.back:hover {
  transform: scale(1.3);  
}

/* Media Query */

/* Small devices (phones, 480px and up) */
@media screen and (min-width: 480px){

.frame {
    width: 480px;
    height: 320px;
}    
    
h1 {
    font-size: 16px; 
    top: 145px;
    left: 22px;
}

a:hover {
    transform: scale(.4);
}  
    
.miles {
  transform: scale(.32); 
  top: -94px;
  left: 146px;     
}

.art {
  transform: scale(.32); 
  top: -11px;
  left: 154px;     
}

.monk {
  transform: scale(.32); 
  top: 108px;
  left: 156px;     
}      
    
.back {
    font-size: 16px; 
    top: 270px;
    left: 390px;    
}
  
}


/* Small devices (tablets, 660px and up) */
@media screen and (min-width: 660px){
             
.frame {
    width: 660px;
    height: 440px;
}     

h1 {
    font-size: 22px; 
    top: 200px;
    left: 30px;
}

a:hover {
    transform: scale(.6);
}  
    
.miles {
  transform: scale(.44); 
  top: -78px;
  left: 264px;     
}

.art {
  transform: scale(.44); 
  top: 48px;
  left: 274px;     
}

.monk {
  transform: scale(.44); 
  top: 210px;
  left: 274px;     
}      
    
.back {
    font-size: 18px; 
    top: 400px;
    left: 540px;    
}     
    
} 

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
   
.frame {
    width: 768px;
    height: 512px;
}  
h1 {
    font-size: 27px; 
    top: 230px;
    left: 28px;
}

a:hover {
    transform: scale(.7);
}  
    
.miles {
  transform: scale(.52); 
  top: -68px;
  left: 332px;     
}

.art {
  transform: scale(.52); 
  top: 83px;
  left: 345px;     
}

.monk {
  transform: scale(.52); 
  top: 270px;
  left: 344px;     
}      
    
.back {
    font-size: 20px; 
    top: 470px;
    left: 650px;    
}
    
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
       
.frame {
    width: 992px;
    height: 661px;
}     
h1 {
    font-size: 34px; 
    top: 298px;
    left: 42px;
}
    
a:hover {
    transform: scale(1);
}  
    
.miles {
  transform: scale(.66); 
  top: -48px;
  left: 482px;     
}

.art {
  transform: scale(.66); 
  top: 160px;
  left: 496px;     
}

.monk {
  transform: scale(.66); 
  top: 393px;
  left: 496px;     
}     

.back {
    font-size: 28px; 
    top: 580px;
    left: 820px;    
}
     
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
            
.frame {
    width: 1200px;
    height: 800px;
}      
h1 {
    font-size: 40px; 
    top: 362px;
    left: 56px;
}
    
a:hover {
    transform: scale(1.2);
}    
    
.miles {
  transform: scale(.8); 
  top: -30px;
  left: 616px;     
}

.art {
  transform: scale(.8); 
  top: 225px;
  left: 633px;     
}

.monk {
  transform: scale(.8); 
  top: 512px;
  left: 636px;     
}    

.back {
    font-size: 30px; 
    top: 720px;
    left: 1000px;    
}
    
}

/* Large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {
	
.frame {
    width: 1500px;
    height: 1000px;
}

h1 {
    font-size: 52px; 
    top: 450px;
    left: 58px;
}
    
a:hover {
    transform: scale(1.5);
}    
    
.miles {
  transform: scale(1); 
  top: 0px;
  left: 816px;     
}

.art {
  transform: scale(1); 
  top: 322px;
  left: 832px;     
}

.monk {
  transform: scale(1); 
  top: 680px;
  left: 836px;     
}
    

.back {
    font-size: 36px; 
    top: 850px;
    left: 1300px;    
}
	
        
}