* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
color: white;
background: black;
/*	background-image: url('img-tns/tns-background.jpg'); */
}

.background {
text-align: center;
padding:20px;
}

.logo {
display: flex;
flex-direction: row;
width:100%;
min-height: 100px;
justify-content: center;
align-items: center;
gap:10%;
padding-bottom: 40px;
}

hr {
margin-top:20px;
}

.title {
font-size: 34px;
font-weight: bold;
}

h1,h2,h3,h4 {
padding-top: 6%;
padding-bottom: 2%;
text-align: center;
}

p {
padding:10px;
}


img {
width: 320px; /* init. 300, original pic width 640 */
/*  height: 143px;  200, then */
object-fit: cover;
object-position: bottom;
transition: transform 0.3s ease-in-out;
padding: 5px;
}

img:hover {
cursor: pointer;
transition: 0.5s;
transform: scale(1.05);
}

#kuenstler, #technik {
margin:10px;
}

.logo > img {
cursor:default;
transform:none;
width:60px
}

.logo > a {
padding:10px;
}

.container {
display: flex;
max-width: 1200px; /* 1200, then */
width: 100%;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 100px;
}

figcaption {
margin-bottom:10px;
text-align: center;
}

.footer {
width: 100%;
text-align: center;
margin: 0 auto;
padding-bottom: 2%;
}

a:link {
color:grey;
}

a:hover,
a:visited:active {
color:white;
}

a:visited{
color:grey;
}

.copyright {
text-align: center;
width:90%;
}


@font-face {
font-family: Tequila;
src: url(Tequila.ttf);
}

h1 {
font-family: Tequila;
font-weight: 200;
font-size: 60px;
padding:10px;
}

#technik h2 {
margin-bottom:10px;
}

#technik p {
max-width: 600px; /* Задаем ширину, равную длине самого длинного предложения */
margin: 0 auto; /* Центрируем текст */
text-align: justify; /* Равномерное выравнивание текста по ширине */
}

#technik {
margin-bottom: 150px; /* Увеличиваем расстояние между блоком Technik и Your Thoughts на 50% */
}

.footer {
padding-top: 100px; /* Увеличиваем расстояние между формой и строкой Kirill Starikov на 200% */
}


#thoughts {
text-align: center; /* Центрируем содержимое внутри секции "Your THOUGHTS?" */
}

#thoughts form {
display: inline-block; /* Форма должна быть блочным элементом, но не занимать всю ширину */
text-align: left; /* Выровнять текст внутри формы по левому краю */
}

#thoughts input, #thoughts textarea, #thoughts button {
display: block; /* Каждый элемент формы с новой строки */
margin: 10px auto; /* Центрируем поля ввода и кнопку */
width: 80%; /* Ширина полей ввода и текстовой области */
}

html {
scroll-behavior: smooth;
}

.back-to-top {
position:fixed;
bottom:1rem;
right:1rem;
display: inline-flex;
justify-content: center;
background-color: darkgrey;
border-radius: 0.5rem;
padding: 15px 15px;
text-decoration: none;
transition: 0.2s ease-out;
}

.back-to-top img {
width:2rem;
}

.back-to-top:hover span{
transform: translateY(-4px);
}