@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("page13.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;    

}

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

.absolution {
  background: url("page13-absolution.png");
  position: absolute;
  text-indent: -9999px;
  width: 174px;
  height: 88px;
  transform: scale(.29); 
  top: 136px;
  left: 6px;     
}

.totem {
  background: url("page13-totem.png");
  position: absolute;
  text-indent: -9999px;    
  width: 142px;
  height: 140px;
  transform: scale(.29);    
  top: 108px;
  left: 136px; 
}

.rock {
  background: url("page13-rock.png");
  position: absolute;
  text-indent: -9999px;    
  width: 267px;
  height: 214px;
  transform: scale(.29);    
  top: 60px;
  left: 172px; 
}


.back {
    font-family: 'GFS Didot';
    font-size: 13px; 
    position: absolute;
    top: 198px;
    left: 276px;  
}

/* 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(.6)}     
    
.absolution {
      transform: scale(.35);    
      top: 166px;
      left: 20px;
    }   
    
.totem {
      transform: scale(.35);    
      top: 138px;
      left: 170px;
    } 
    
.rock {
      transform: scale(.35);    
      top: 88px;
      left: 220px;
    }      
        
    
.back {
    font-size: 16px; 
    top: 228px;
    left: 320px;    
}
  
}


/* 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(.9)}     
    
.absolution {
      transform: scale(.45);    
      top: 244px;
      left: 60px;
    }   
    
.totem {
      transform: scale(.45);    
      top: 214px;
      left: 260px;
    } 
    
.rock {
      transform: scale(.45);    
      top: 160px;
      left: 360px;
    }      
    
.back {
    font-size: 18px; 
    top: 316px;
    left: 460px;    
}     
    
} 

/* 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(1)}     
    
.absolution {
      transform: scale(.55);    
      top: 292px;
      left: 90px;
    }   
    
.totem {
      transform: scale(.55);    
      top: 264px;
      left: 316px;
    } 
    
.rock {
      transform: scale(.55);    
      top: 206px;
      left: 436px;
    }     

.back {
    font-size: 20px; 
    top: 370px;
    left: 530px;    
}
    
}

/* 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.1)}     
    
.absolution {
      transform: scale(.7);    
      top: 390px;
      left: 140px;
    }   
    
.totem {
      transform: scale(.7);    
      top: 356px;
      left: 428px;
    } 
    
.rock {
      transform: scale(.7);    
      top: 290px;
      left: 600px;
    } 

.back {
    font-size: 24px; 
    top: 480px;
    left: 800px;    
}
     
}

/* 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.3)}     
    
.absolution {
      transform: scale(.8);    
      top: 482px;
      left: 186px;
    }   
    
.totem {
      transform: scale(.8);    
      top: 450px;
      left: 530px;
    } 
    
.rock {
      transform: scale(.8);    
      top: 380px;
      left: 760px;
    }      

.back {
    font-size: 30px; 
    top: 578px;
    left: 900px;    
}
    
}

/* 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.35)}     
    
.absolution {
      transform: scale(1);    
      top: 614px;
      left: 252px;
    }   
    
.totem {
      transform: scale(1);    
      top: 580px;
      left: 682px;
    } 
    
.rock {
      transform: scale(1);    
      top: 500px;
      left: 980px;
    }     

.back {
    font-size: 36px; 
    top: 724px;
    left: 1200px;    
}
	
        
}