@font-face { font-family: Shh; src: url('OldNewspaperTypes-Regular.ttf'); } 
*, *::before, *::after {
  box-sizing: border-box;
}
 p{
    font-family: Shh;
}
body {
    background-color: rgb(15, 3, 5);    /*FOR USER TO CHANGE*/
    color: aliceblue;                   /*FOR USER TO CHANGE*/
} 
img{
    width:100%;
    max-width:600px;
}
/*Later change to dynamic that the user chooses in JS.*/
.upperSection{
    height: 110px; /* Always + 1.5% bigger than avatar and name section*/
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    
}
.upperSection div {
    background-color: rgb(32, 9, 14);
}
.avatarSection {
    height: 100px;
    width: 100px;
    flex-shrink: 0;
    border: 1px solid salmon;
    margin: 5px;
    overflow: hidden;
}
.nameSection {
    height: 100px;
    width: 300px;
    flex-shrink: 0;
    border: 1px solid salmon;
    margin: 5px;

    display: flex;
    justify-content: space-between; 
    align-items: center; 
}

.nameSectionLeft {
    display: flex;
    flex-direction: column;
}
.nameSectionRight {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}
.nameSection p {
    margin-left: 20px; /*FOR USER TO CHANGE*/
}





/* СЕКЦИЯ АНИМАЦИИ АЛЁРТА*/
.announcementSection {
    height: 100px;
    width: 200px;
    flex-grow: 1;
    border: 1px solid salmon;
    margin: 5px;

    overflow: hidden; 
    white-space: nowrap; 
}


.marquee-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
}


.marquee-wrapper span {
    display: inline-block;
    padding-left: 100%;
    animation: scrollLeft 10s linear infinite;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-size: 20px;
}

/* Анимация движения */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%); /* Уезжает полностью за левый край */
    }
}







/*BOTTOM SECTION*/
.bottomSection {
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}
.bottomLeftSection {

    box-sizing: border-box;
    display: block;
    
    width: 414px; 
    height: 500px;
    border: 1px solid rgba(250, 128, 114, 0.226);
    flex-shrink: 0;
    margin: 5px;
    background-color: rgb(32, 9, 14);
    padding: 20px;
    font-family: Shh;
    font-size: 25px;
    text-align: center;
}

.bottomLeftSectionUpper {
    box-sizing: border-box;
    
    display: block;
    
    width: 414px; 
    height: auto;
    border: 1px solid rgba(250, 128, 114, 0.226);
    flex-shrink: 0;
    margin: 5px;
    background-color: rgb(32, 9, 14);
    padding: 20px;
    font-family: Shh;
    font-size: 25px;
    text-align: center;
}

.bottomLeftSectionUpper li{
    text-align: left;
}
.bottomLeftSection li{
    text-align: left;
}


                                                                    /*NEWS*/
.bottomRightSection {
    width: 800px;
    height: auto;
    flex-grow: 1;
    margin: 5px;

}
.bottomRightSection div{
    background-color: rgb(32, 9, 14);
}

                                                                    /*Контейнер 1*/
.bottomRightSectionContainer1 {
    text-align:center;
    width:90%;
    height: 100%;
    flex-grow: 1;
    padding: 5px;
    margin-left: 60px;
    margin-right: 30px;
    margin-bottom: 15px;
  
}
.bottomRightSectionHeader1 {
    font-family: Shh;
    text-indent: 5%;
    text-align:center;
    height: 100%;
    width:auto;
    flex-grow: 1;
    border: 1px solid salmon;
    margin-bottom: 5px;
    margin: 15px;
}
.bottomRightSectionContent1 {

    box-sizing: border-box; 
    text-align:left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 25px;
    width:auto;
    height: auto;
    flex-grow: 1;
    border: 2px solid rgba(250, 128, 114, 0.226);
    padding: 10px;
    margin: 1%;
}
.bottomRightSectionContent1 p {
    text-indent: 15px;

}
.bottomRightSectionContentImageTop1 {

    box-sizing: border-box; 
    
    width: 50%;
    height: 50%;
    flex-grow: 1;
    padding: 10px;
    margin-left: 60px;
    margin-right: 30px;
}
.bottomRightSectionContentImageBottom1 {

    box-sizing: border-box; 
    
    width: 50%;
    height: 50%;
    flex-grow: 1;
    padding: 10px;
    margin-left: 60px;
    margin-right: 30px;
}


                                                                    /*Контейнер 2*/
.bottomRightSectionContainer2 {
    display: flex;
    width:90%;
    height: 100%;
    flex-grow: 1;
    padding: 5px;
    margin-left: 60px;
    margin-right: 30px;
    margin-bottom: 15px;
  
}
.bottomRightSectionHeader2 {
    font-family: Shh;
    font-size: 20px;
    text-indent: 15%;
    display: inherit;
    text-align:center;
    height: auto;
    width: 0.5%;
    flex-grow: 1;
    border: 1px solid salmon;
    margin-bottom: 5px;
    margin: 15px;
    padding-right: 15px;
    padding-left: 15px;
}
.bottomRightSectionContent2 {

    text-align:left;
    display: inherit;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 25px;
    width:10%;
    height: auto;
    flex-grow: 1;
    border: 2px solid rgba(250, 128, 114, 0.226);
    padding: 10px;
    margin: 1%;
}
.bottomRightSectionContent2 p {
    text-indent: 15px;
    font-family: Shh;
    font-size: 20px;
}

.bottomRightSectionContentImageBottom2 {
    box-sizing: border-box; 
    display: inherit;
    width:auto;
    height: auto;
    flex-grow: 1;
    padding: 10px;
    margin-left: 60px;
    margin-right: 30px;
}