html {
font-family: 'Hind', sans-serif;
font-size: 15px; /* komentar */
}

body {

background-color: rgb(255,255,255);

}

h1 {
font-size: 20px;
text-align: left;
margin-left: 10px;
margin: 0;
font-weight: 500;
padding: 20px 0;
color:  rgb(0,0,0);
line-height:28px;
text-transform: uppercase;
}
h2 {
font-size:14px;
text-align:right;
color: rgb(0,0,0);
line-height: 17px;
font-weight= 700;
text-transform: lowercase;
}
h3 {
font-size:20px;
text-align: left;
color:rgb(0,0,0);
font-weight: 300;
}

h4 {
font-size: 16px;
line-heigth: 2;
letter-spacing: normal;
font-weight= 700;
color: rgb(0,0,0);
text-align:center;
}

p,li {
font-size: 16px;
line-heigth: 2;
letter-spacing: normal;
}

a {
  color: inherit;
  text-decoration: inherit;
}


a:hover {
    text-decoration: underline;
}

.grid-container {
display: grid;
grid-template-rows: 90px auto;
-ms-grid-rows: 90px auto;
grid-template-columns: auto 100px 500px auto;
-ms-grid-columns: auto 100px 500px auto;
/* background-color: rgba(50,50,250,0.1); */
  padding: 5px;
}

.grid-container>div {
/*  background-color: rgba(255, 255, 255, 0.1); */
  text-align: center;
  padding: 5px 0;
}

.sidebar {
position: fixed;
left: calc(100% / 2 - 450px);
top: 255px;


/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

}

.main {
grid-column-start: 3;
-ms-grid-column: 3;
grid-row-start: 2;
-ms-grid-row: 2;
}

.topbar {
grid-area: 1 / 3 / span 1 / span 1;
}