* {
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 0.6px;
}

body {
    overflow: hidden;
}

.announce {
    font-size: 20px;
    color: #f00;
    font-weight: 700;
}
button {
    display: flex;
    justify-self: flex-start;
    align-self: center;
    width: 155px;
    height: 35px;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    border-radius: 5px;
    background-color: rgb(93, 93, 241);
    color: #fff;
    font-weight: 400;
    transition: background-color 0.15s linear;
}
button:hover {
    background-color: rgb(84, 84, 209);
}
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}
.header-heading {
    font-size: 30px;
    margin-bottom: 20px;
}
.search {
    display: flex;
    flex-shrink: 0;
}
#search-input {
    width: 300px;
    height: 35px;
    font-size: 18px;
    outline: none;
    box-shadow: none;
    border: 0.5px solid #888;
    border-radius: 4px;
    padding-left: 11px;
}
main {
    margin-top: 55px;
}
.main-btns-container {
    display: flex;
    gap: 45px;
}
.add {
    margin-left: 55px;
}
.input-block-element {
    margin-top: 25px;
    border: none;
    transition: border 0.3s ease-in;
}
.input-block, .input-block-element {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 0.5px solid #888;
    width: fit-content;
    padding: 25px 55px;
    border-radius: 6px;
}
.input-block-element.red-border {
    border: 3px solid #f00;
}
.input-block {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    margin: 35px auto;
    transition: opacity 0.15s linear, visibility 0.15s linear;
}
.input-block.input-block-visible {
    opacity: 1;
    visibility: visible;
}
.input-block input, .input-block-element input {
    width: 255px;
    height: 35px;
    font-size: 18px;
    outline: none;
    box-shadow: none;
    border: 0.5px solid #888;
    border-radius: 4px;
    text-align: center;
}
.input-block-element input {
    background-color: transparent !important;
}
.save-changes {
    width: 0;
    visibility: hidden;
    opacity: 0;
    font-size: 0;
    transition: width 0.3s linear, opacity 0.3s linear, visibility 0.3s linear, font-size 0.3s linear;
}
.save-changes.visible {
    width: 175px;
    opacity: 1;
    visibility: visible;
    font-size: 15px;
}
.input-block input + input,
.input-block input + button,
.input-block button + button,
.input-block-element input + input,
.input-block-element input + button,
.input-block-element button + button {
    margin-left: 15px;
}
.input-block .translation, .input-block-element .translation {
    width: 500px;
}
.list-container {
    padding-left: 35px;
    width: calc(100% - 37px);
    height: fit-content;
    display: flex;
    flex-direction: column;
}
.modal-window__container {
    width: 300px;
    height: 0;
    border: 0.5px solid #888;
    border-radius: 6px;
    display: flex;
    justify-self: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 15px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s linear, opacity 0.15s linear, height 0.15s linear;
}
.modal-window__container.modal-window__container_visible {
    height: 150px;
    visibility: visible;
    opacity: 1;
}
.modal-window__content {
    font-size: 20px;
}
.modal-window__submit-btn {
    margin-top: 25px;
}

@media (max-width: 411px) {
    
}