@import url("https://fonts.googleapis.com/css?family=Montserrat:700,900&subset=cyrillic");
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i&subset=cyrillic');

body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100%
}

/*****************************************************/
/* ТЕКСТ */
/* заголовки */
h1 {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-size: 4em;
  font-weight: 400;
  text-align: center;
  color: rgb(26, 95, 122);
}
h2 {
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 2em;
  font-weight: 100;
  text-align: center;
  color: rgb(0, 0, 0);
}
h3 {
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: center;
  color: rgb(0, 0, 0);
}
h4 {
  text-align: center;
  color: rgb(0, 0, 0);
}

/* обычный текст */
p {
  font-family: "Open Sans", sans-serif;
  font-size: 0,5em;
  font-weight: 100;
  text-align: center;
}

/* основной текст про транскриптор на странице home */
#hi {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: center;
}

#explanation {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: justify;
}
/* настройки текста hints */
small { 
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

#list-letters {text-align: left}

/* списки */
ul { 
  align-items: center;
}


/*****************************************************/
/* ВВОД И ВЫВОД */
#inputTextarea { /* настройки самих форм */
  height: 100%;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: left;
  background-color: rgb(255, 255, 255);
}

#outputTextarea { /* настройки самих форм */
  height: 100%;
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: left;
  background-color: rgb(255, 255, 255);
}

.form-control:focus {/* удаление синего выделения */
  border-color: rgb(26, 95, 122);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 255, 255, 0.6);
}

.lang-input {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
}

.lang-output {
  height: 100%;
}

.form-group {
  height: 100%;
}

form {
  height: 100%;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 40px;
  color: rgb(182, 181, 181)!important;
  border: 0px solid transparent; /* прозрачная граница */
  background-color: rgb(255, 255, 255); /* полупрозрачный фон */
  padding: 0.25rem 0.4rem;
}

.clear-btn {
  position: absolute;
  top: 8px;
  right: 5px;
  color: rgb(182, 181, 181)!important;
  border: 0px solid transparent; /* прозрачная граница */
  background-color: rgb(255, 255, 255); /* полупрозрачный фон */
  padding: 0.25rem 0.4rem;
}

.copy-btn:hover,
.clear-btn:hover,
.copy-btn:focus,
.clear-btn:focus,
.copy-btn:active,
.clear-btn:active {
  color: rgb(182, 181, 181)!important;
  background-color: rgb(255, 255, 255) !important; /* фиксируем фон всегда */
  box-shadow: none !important; /* убираем тень */
}
/*****************************************************/
/* КНОПКИ И ССЫЛКИ */

/* кнопка "Получить транскрипцию"*/
#button {
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: center;
  color:  rgb(26, 95, 122);
  background-color:rgb(255, 255, 255);
  border-color: rgb(26, 95, 122);
}
#button:hover {/* наведение курсора на ссылки */
  color: rgb(255, 255, 255);
  background-color: rgb(26, 95, 122);
  border-color: rgb(26, 95, 122);
}

.card { /* карточка статьи*/
  font-family: "Open Sans", sans-serif;
  padding: 14px;
  background-color: rgb(255, 255, 255);
}

.card-text{
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: left;
  color: rgb(0, 0, 0);  
}

.btn{
  position: relative;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 100;
  text-align: center;
  color:  rgb(26, 95, 122);
  background-color:rgb(255, 255, 255);
  border-color: rgb(26, 95, 122);
}
.btn:hover {/* наведение курсора на ссылки */
  color: rgb(255, 255, 255);
  background-color: rgb(26, 95, 122);
  border-color: rgb(26, 95, 122);
}

/* ссылки (кнопки языкового меню) */
a {
  list-style-type: none;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  font-weight: 200;
  color: rgb(26, 95, 122);
  align-items: center;
  border-color: rgb(26, 95, 122);
}

a:hover {/* наведение курсора на ссылки */
  background-color: rgb(26, 95, 122);
  color: rgb(255, 255, 255);
  text-decoration: none;
}


/*****************************************************/
/* ФУТЕР */
footer {
  background-color: rgb(255, 255, 255);
  position: fixed;
  width: 100%;
  text-align: center;
}
footer:hover {
  background-color: rgb(255, 255, 255);
  text-align: center;
}
#copyright {
  color: rgb(14, 53, 68);
  font-size: 1em;
  text-align: center;
}


/*****************************************************/
/* ОСТАЛЬНОЕ */
img {
  height: 700;
  width: 50;
}
main {
  padding-bottom: 100px;
}

table {
    border-collapse: collapse; /* Убирает двойные границы */
}
table, th, td {
    border: solid transparent; /* Прозрачные границы */
    /* Или border: none; для полного отсутствия */
}