@import url('https://fonts.googleapis.com/css2?family=Amaranth:wght@700&family=Montserrat+Alternates&display=swap');
@font-face {
  font-weight: 400;
  font-family: Fraktur;
  src: url("/Fraktur.ttf");
}
* {
    margin: 0;
    font-family: 'Montserrat Alternates';
}
body {
    background: #eeeeee;
    width: 1100px;
    max-width: 100%;
    margin: auto;
}
img {
    max-width: 350px;
    width: 250px;
    height: 250px;
    border-radius: 100%;
    object-fit: cover;
    object-position: 50% 0%;
}
a {
    text-decoration: none;
    color: #000;
}
.block {
    background: #ffffff;
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: auto;
    padding: 50px 0;
}
.circle {
    background: #cc0000;
    padding: 15px;
    display: flex;
    width: 15px;
    height: 15px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: bold;
    box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);
}
.circle:hover {
    margin-top: -3px;
}
.circle svg {
    fill: #ffffff;
}
svg {
    position: absolute;
}

.tg {
    background: #0088cc;
    padding: 16px 16px 14px 14px;
}
.insta {
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.tw {
    background: #00ACEE;
}
.fb {
    background: #3b5998;
}
.pb {
    background: #17a086;
    background: linear-gradient(to top right, #17a086 50%, #34495e 100%);
    padding: 14px 15px 16px 15px;
}
.pb svg {
    overflow: inherit;
    width: 17px;
    height: 17px;
}
.gh {
    background: #000;
    padding: 22px 16px 8px 14px;
}
.yt {
     background: #ff0000;
     padding: 15px 14px 15px 16px;
}

.block, .info {
    transition: all .25s;
}
.pablik, .name, img, .circle {
    transition: all .45s;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
}
.name {
    font-family: 'Fraktur';
    font-size: 70px;
    background: #000000;
    background: linear-gradient(to top right, #000000 50%, #ff0000 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.allbutton {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.onebutton {
    display: grid;
    justify-items: center;
    gap: 5px;
    width: 20%;
}
.textbutton {
    font-size: 12px;
}
.pablik {
    font-family: 'Amaranth', sans-serif;
    font-size: 70px;
    text-transform: uppercase;
    background: #17a086;
    background: -webkit-linear-gradient(to top right, #17a086 50%, #34495e 100%);
    background: -moz-linear-gradient(to top right, #17a086 50%, #34495e 100%);
    background: linear-gradient(to top right, #17a086 50%, #34495e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.retreat {
    background: #eeeeee;
    width: 100%;
    height: 12px;
}
@media (max-width: 700px) {
    .pablik, .name {
        font-size: 50px;
    }
    img {
        width: 200px;
        height: 200px;
    }
}
@media (max-width: 500px) {
    .pablik, .name {
        font-size: 35px;
    }
    img {
        width: 150px;
        height: 150px;
    }
}
@media (min-width: 500px) {
    .info {
        padding: 10px;
    }
    .block {
        border-radius: 50px;
    }
}