@font-face {
    font-family: 'Gilroy';
    src: url('/Gilroy-Regular.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}
@font-face {
    font-family: 'Gilroy';
    src: url('/Gilroy-Bold.ttf') format('truetype');
    font-weight: bold; font-style: normal;
}

*{ padding: 0; margin: 0; font-family: Gilroy; }

body{ background-color: #FFFFFF; }

.container{ position: absolute; width: fit-content; margin-top: 50px;
    left: 50%; transform: translateX(-50%); }
.main{ width: 1000px; margin-bottom: 100px; }
.white{ color: white; }

.cryptoinfos{ font-weight: bold; text-align: center; }

.coin{ width: 100%; height: auto; margin-bottom: 20px; }
.coin .icon{ height: 200px; }
.coin .name{ font-size: 50px; margin-top: -2px; }
.coin .icon img{ height: 100%; width: auto; border-radius: 50%; }
.cryptoinfos .text { font-weight: normal; width: 100%; font-size: 20px; }

.button{ text-decoration: none; color: black; padding: 10px; border: 2px solid red; font-weight: bold; border-radius: 10px; }

.things{ display: grid; grid-template-columns: 1fr 1fr 1fr; 
	grid-gap: 10px; margin-top: 30px; }
.thing{ height: 120px; background-color: white; border-radius: 12px;
	box-shadow:  20px 20px 60px #bebebe; position: relative;
	padding-left: 15px; padding-right: 15px; padding-top: 15px;
	background-size: cover; background-position: center;  }
.thing .title{ width: 100%; font-size: 30px; font-weight: 900; }
.thing .text{ margin-top: 10px; line-height: 1.3rem; }

.me{ margin-top: 20px; height: 200px; }
.goal{ background-image: url('/img/onecent.png'); }
.fee{ background-image: url('/img/fee.png'); }
.myinvest{ background-image: url('/img/low.png'); }
.kind{ background-image: url('/img/heart.png'); }

@media screen and (max-width: 1100px){
	.main{ width: 800px; }
	.things{ grid-template-columns: 1fr 1fr; } 
}

@media screen and (max-width: 890px){
	.main{ width: 700px; }
}

@media screen and (max-width: 780px){
	.main{ width: 500px; }
	.coin .icon{ height: 150px; }
	.things{ grid-template-columns: 1fr; } 
}

@media screen and (max-width: 580px){
	.main{ width: 80%; margin-left: 10%; }
	.thing .title{ font-size: 25px; }
	.thing .text{ font-size: 16px; }
	.me .text{ font-size: 14px; }
}