*{
	padding: 0;
	margin: 0;
	border: 0;
}
*,*:before,*:after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
	height: 100%;
	width: 100%;
	line-height: 1;
	font-size: 14px;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;

    background-color: hsl(0, 0%, 8%);
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}

.social {
  display: flex;
  align-items: center;     /* вертикально */
  height: 100vh;           /* высота экрана */
}

.container {
    width: 100%;
}

.social__item {
    margin: 0 auto;
    padding: 40px;
    width: 380px;

    border-radius: 20px;
    background-color: hsl(0, 0%, 12%);
}

.social__item-profile {
    text-align: center;
}

.social__item-img {
    max-width: 88px;

    border-radius: 50px;
}

.social__item-name {
    margin-top: 15px;
    font-size: 24px;

    color: #fff;
}

.social__item-location {
    margin: 10px;

    color: hsl(75, 94%, 57%);
    font-size: 14px;
}

.social__item-profession {
    margin: 20px auto;
    font-size: 14px;

    color: #fff;
}

.buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    font-weight: 700;
}

.btn {
    padding: 15px;

    color: #fff;

    text-decoration: none;
    background-color: hsl(0, 0%, 20%);
    border-radius: 5px;
}

.btn:hover {
    background-color: hsl(75, 94%, 57%);
    color: hsl(0, 0%, 12%);
}

.attribution {
    position: relative;
    max-width: 340px;
    margin: 30px auto;
    padding: 10px;

    text-align: center;

    border-radius: 15px;
    background-color: hsl(0, 0%, 12%);
}

.attribution__text {
    font-size: 14px;
    color: rgb(170, 170, 170);
}

.attribution a {
  color: hsl(75, 94%, 57%);

  text-decoration: none;
}


@media (max-width: 380px) {
    .social__item {
        width: 320px;
    }

    .social__item-profession {
        font-size: 12px;
    }

    .btn {
        font-size: 12px;
    }

    .attribution {
        max-width: 280px;
        padding: 15px;
    }

    .attribution__text {
        font-size: 12px;
    }
}