@charset "utf-8";

/**
* style.css
* Author URL : https://artcode.com.ua
*/

:root {
    margin: 0;
    padding: 0;
    --background: #fff;
    --text-color: #000;
    --link-color: #0089c7;
    --primary-color: #165fb9;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: #1b1b1b;
      --text-color: #eaeaea;
      --link-color: #b76c10;
      --primary-color: #8916b9;
    }
  }

* html, body {
  margin:0;
  padding:0;
  box-sizing:border-box;
  -moz-box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  scroll-behavior: smooth;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;   
  }
}

header, footer, nav, article {
  display: block;
}

img {
  display: inline-block;
  height: 100%;
  max-width: 100%;
}

p {
  font-size: 1rem;
}

a {
  transition: 0.2s ease-out;
}

.container{
  max-width: 750px;
  min-width: 320px;
  margin: 0px auto;
  padding: 0px 15px;
}

@media (max-width:768px){
  .container{
    max-width: none;
  }
}

/* --- MAIN --- */

.main {
  font-size: 1rem;
}

.section {
  margin: 10px;
  padding: 10px;
}

.section_avatar {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

.section_description {
  padding: 20px;
  background-color: #f3fde6;
  border: 1px solid;
  border-color: #ccc;
  border-radius: 30px;
}

.section h1 {
  font-size: 2.0rem;
  color: #333;
}

.section h2 {
  font-size: 1.25rem;
  color: #999;
}

.avatar {
  height: 160px;
  width: 160px;
}

.avatar img {
  display: block;
  border-radius: 50%;
  margin: auto;
  height: 160px;
  width: 160px;
  max-width: 100%;
}

picture{
  margin:auto;
  max-width: 100%;
}

.section_social {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
/*  text-align: center; */
  margin: 0 auto;
}

/*
.social ul {
  padding: 0;
  margin: 0;
  display: flex;
}

.social ul li {
  list-style: none;
  margin: 0 15px;
}

.social ul li .fab {
  font-size: 30px;
  line-height: 60px;
  transition: .3s;
  color: #333;
}

.sociial ul li .fab:hover {
  color: #fff;
}

.social ul li a {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  transition: .6s;
  box-shadow: 0 5px 4px rgba(0,0,0,.5);
}

.social ul li a:hover {
  transform: translate(0, -5%);
}

.social li.facebook a:hover {
  background-color: #3b5998;
}

.social li.instagram a:hover {
  background-color: #cd486b;
}

.social li.twitter a:hover {
  background-color: #00b6f1;
}

.social li.telegram a:hover {
  background-color: #00a7f3;
}
*/

/*--------------------
Signup
--------------------*/
.signup {
/*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
*/
  width: auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 3px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*
.signup-connect {
  width: 50%;
  padding: 30px 50px;
}
*/

.signup-connect {
/*  width: 70%; */
/*  background: linear-gradient(134deg, #fbce50, #e08106); */
  color: white;
}
.signup-connect h2 {
  color: #333;
  font-size: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/*--------------------
Buttons
--------------------*/
.btn {
  display: block;
  background: #bded7d;
  color: white;
  text-decoration: none;
  margin: 20px 0;
  padding: 15px 15px;
  border-radius: 5px;
  position: relative;
}
.btn::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.btn:hover::after {
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2);
}

.btn-social {
  padding-left: 64px;
  position: relative;
  z-index: 1;
}
.btn-social .fab, .fas, .fa-solid {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 50px;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  line-height: 3.2;
  border-radius: 5px 0 0 5px;
}

.btn-phone {
  background-color: green;
}

.btn-telegram {
  background-color: #00a1db;
}

.btn-viber {
  background-color: #9936c9;
}

.btn-email {
  background-color: #999;
}

.btn-facebook {
  background-color: #3b5897;
}

.btn-instagram {
  background: #e4405f;
}

.btn-twitter {
  background-color: #53abee;
}

.btn-google {
  background-color: #de4e3b;
}

.btn-linkedin {
  background-color: #00a1db;
}

/* --- FOOTER --- */

footer {
  font-size:1.0em;
  text-align: center;
}

.hidden {
  display:none;
}

#map {
  height: 100%;
  width: 100%;
  border: 10px;
}