*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
width:100%;
height:100%;
overflow:hidden;
font-family:Roboto,sans-serif;
}
body{
background:url("fond.jpg") center center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #000;
/*background-size:cover;*/
background-repeat:no-repeat;
}
.overlay{
width:100%;
height:100%;
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:20px;
}
.title{
position:absolute;
left:40px;
top:30px;
width:320px;
}
.title img{
width:100%;
}
.events{
margin-top:18vh;
width:390px;
height:520px;
background:url("eventsList.png") no-repeat center;
background-size:100% 100%;
padding:35px 35px 30px 35px;
display:flex;
flex-direction:column;
}
.events h2{
flex:0;
text-align:center;
margin-bottom:20px;
}
#eventsScroll{
flex:1;
overflow-y:auto;
}
.calendar{
flex:0;
margin-top:20px;
justify-content:center;
}
.events ul{
list-style:none;
}
.events li{
margin-bottom:12px;
}
.events a{
text-decoration:none;
color:#7a2f00;
font-weight:500;
}
.events a:hover{
text-decoration:underline;
}
#eventsScroll{
height:220px;
overflow-y:auto;
}
.calendar{
margin-top:20px;
display:flex;
align-items:center;
gap:10px;
}
.calendar a{
color:#333;
text-decoration:none;
font-weight:bold;
}
.social{
position:absolute;
top:30px;
right:30px;
display:flex;
gap:18px;
}
.social a{
color:white;
font-size:32px;
text-shadow:0 0 10px rgba(0,0,0,.5);
}
@media(max-width:800px){
.events{
width:55vw;
max-height:240px;
font-size:.9rem;
}
.social a{
font-size:28px;
}
}
