/*CSS*/


body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #ece8e1;
    display: grid;
    grid-template-columns: 13% 87%;
    grid-template-rows: 7% 87% 6%;
    height: 100vh;
    overflow: hidden;
} 

header {
   text-align: center;
   font-size: 40px;
   margin-top: 5px;
}

.topbar {
    background-color: #FF4655;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
 }


.sidenav {
    background-color: #0F1923;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
 }

 .sidenav a {
    font-size: 20px;
    text-decoration: none;
    color: #bdbdbd;
    display:block;
    padding: 20px;
 }


 .sidenav a:hover {
    color:white;
    background-color: #474747;
 }


 
 .content { 
   grid-column: 2 / 3;
   grid-row: 2 / 3;
   font-size: 18px;
   overflow-y: auto;
 }

 .agentnav {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   background-color: #0F1923;
 }

 .agentnav a {
   color: white;
   text-decoration: none;
   text-align: center;
   padding: 25px 0px;
   font-weight: bold;
 }

 .agentnav a:hover {
   background-color: #474747;
   color:white;
 }

 .nadpisy {
    font-size: 45px;
 }

 footer{
    background-color: #FF4655;
    text-align: center;
    color: #ece8e1;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    font-size: 18px;
    padding-top: 8px;
    border-top:solid #0F1923 4px;
}

.karta1 {
   background-color:#FF4655;
   color: white;
   padding: 30px;
   margin: 20px 140px;
}

.karta1 strong {
   color:#0F1923
}

.karta2 {
   background-color: #0F1923;
   color: white;
   padding: 30px;
   margin: 20px 140px;
}

.karta2 strong {
   color:#FF4655
}

.karta3 {
   background-color: white;
   color: black;
   padding: 30px;
   margin: 20px 140px;
}

.obrazkyagentu {
   width: 22%;
   height: 22%;
   border: solid 5px white;
   float: left;
   margin-right: 20px;
   margin-bottom: 5px;
}

.blokagenta {
   color: white;
   margin-bottom: 60px;
   padding: 20px;
}


.blokagenta h2 {
   font-size: 34px;
}