@font-face {
    font-family: 'BlenderPro';    
	src: url('./font/BlenderPro-Thin.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'BlenderPro';    
	src: url('./font/BlenderPro-Book.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'BlenderPro';    
	src: url('./font/BlenderPro-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'BlenderPro';    
	src: url('./font/BlenderPro-Bold.ttf') format('truetype');
    font-weight: 700;
}

@font-face {
    font-family: 'BlenderPro';    
	src: url('./font/BlenderPro-Heavy.ttf') format('truetype');
    font-weight: 900;
}

* {
	font-family: 'BlenderPro';		
	font-size: 20px;
    /* color: rgb(151, 127, 72); */
    color: #caa954;    
}

html, body {
    height: 100%;
    margin: 0;
}

body {    
    background-color: rgb(255, 251, 239);
    /* background-color: #eae1d7; */
    /* background-color: rgb(239, 224, 195); */

    /* background-image: url('1.jpg');
    background-size: cover;
    background-position: center; */

	/* background-size: 400% 400%;
	animation: gradient 10s ease infinite;
    background-position: 100% 50%; */
}

h1, h2, h3, h4{    
    margin: 0;
    /* background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #fff 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);   */
    /* background: radial-gradient(ellipse farthest-corner at right bottom, #ffe25f 0%, #ffcd6a 8%, #e4b652 30%, #d8b460 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #ffe3ae 0%, #FFFFAC 8%, #e2c36d 25%, #c2a35b 62.5%, #c5b89c 100%); */
    /* background-image: url("img/gold.jpg"); */
    /* -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;   */
    /* background-size: cover;  */
    /* color: #E1C88A;  */
    color : #caa954;
}

h4 {
    margin: 8px 0px;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}	
    100% {
		background-position: 0% 50%;
	}
}

.zoom {
    cursor: pointer;
    transition: transform .2s;
}

.zoom:hover {
    transform: scale(1.5);
}

@media (max-width: 400px)
{
    h1 {
        font-size: 150px;        
    }
    h2 {
        font-size: 45px;
    }
    h3 {
        font-size: 30px;
        letter-spacing: 10px;
        margin-right: -10px;
    }

    .icons {
        gap: 16px;
    }
    .icons > a > img {
        width: 32px;
    }
}

@media (min-width: 401px) and (max-width: 800px) 
{
    h1 {
        font-size: 200px;        
    }
    h2 {
        font-size: 60px;
    }
    h3 {
        font-size: 30px;
        letter-spacing: 20px;
        margin-right: -20px;
    }

    .icons {
        gap: 16px;
    }
    .icons > a > img {
        width: 32px;
    }
}

@media (min-width: 800px) 
{
    h1 {
        font-size: 300px;        
    }
    h2 {
        font-size: 160px;
    }
    h3 {
        font-size: 50px;
        letter-spacing: 30px;
        margin-right: -30px;
    }

    .icons {
        gap: 16px;
    }
    .icons > a > img {
        width: 32px;
    }
}