@font-face {
    font-family: font;
    src: url(content/font/Poppins-Medium.ttf);
}

@font-face {
    font-family: fancy;
    src: url(content/font/Pacifico-Regular.ttf);
}
  
*{
    font-family: font;
} 

body {
    background-color: #4a505e;
    margin:0px;
    padding:0px;
}

.header {
    width:100%;
    height:200px;
    background-image:
    url('content/image/silhouette.svg'),
    linear-gradient(45deg,hsl(288deg 75% 37%) 0%,hsl(290deg 63% 45%) 20%,hsl(292deg 60% 52%) 40%,hsl(287deg 64% 55%) 60%,hsl(275deg 57% 54%) 80%,hsl(262deg 50% 52%) 100%);
    background-repeat: no-repeat, no-repeat;
    background-attachment:local, local;
    background-position: bottom center, center; 
    background-size: clamp(200px, 100%, 400px) auto, auto;
}

h1 {
    text-align:center;
    font-size:4em;
    padding: 0px;
    margin:0px;
}

h2 {
    font-family: fancy;
    text-align:center;
    font-size:1.5em;
    padding: 0px;
    color:#f0f0f0;
    margin:0px;
}

h3 {
    text-align:center;
    font-size:1em;
    padding: 0px;
    color:#f0f0f0;
    
}

.tilted {
    font-style:italic;
    font-weight:100;
}

.texteffect {
    font-family: fancy;
    color:#f0f0f0;
}

.linkgrid {
    color:#f0f0f0;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    width:256px;
}

.linkgrid img {
    color:#f0f0f0;
    width: 64px;
    height:64px;
    fill:#f0f0f0;
    margin:5px;
}

.content {
    width: 420px;
    margin-left: auto;
    margin-right: auto;
}