@font-face {
    font-family: 'rajdhaniregular';
    src: url('rajdhani-regular-webfont.woff2') format('woff2'),
         url('rajdhani-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rajdhanibold';
    src: url('rajdhani-bold-webfont.woff2') format('woff2'),
         url('rajdhani-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rajdhanilight';
    src: url('rajdhani-light-webfont.woff2') format('woff2'),
         url('rajdhani-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rajdhanimedium';
    src: url('rajdhani-medium-webfont.woff2') format('woff2'),
         url('rajdhani-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rajdhanisemibold';
    src: url('rajdhani-semibold-webfont.woff2') format('woff2'),
         url('rajdhani-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.gridHeader{grid-area: header;}
.gridMenu{grid-area: menu; background-color: #969A97; font-family: rajdhani; font-weight: bold; color: #53599A; text-shadow: 1px 1px black; font-size: 175%; height: auto; margin-bottom: 5px; flex-grow: 1; min-height: 60px;}
.gridMain{grid-area: main; background-color: #bfbfbf; padding: 10px; height: auto; width: 100%; box-sizing: border-box;}
.gridRight{grid-area: right; margin-right: 5px; height: auto;}
.gridFooter{grid-area: footer; background-color: black; text-align: center; margin-top: 5px;}
.gridIcon{grid-area: icon; text-align: right;}

.grid-container-header{
    display: grid;
    grid-template-areas: 
        'header header header header icon'
        'header header header header icon'
        'header header header header icon';
    
}

.grid-container{
    display: grid;
    grid-template-areas: 
        'menu menu menu menu menu menu'
        'right main main main main main'
        'footer footer footer footer footer footer';
    grid-template-columns: repeat(6, 1fr);
}

body{background-color: #252422;}

h1{text-align: center; color: #EE1623; font-size: 300%; font-family: rajdhani; font-weight: normal; font-style: normal; text-shadow: 3px 3px black;}

h2{text-align: center; color: black; font-family: rajdhani; font-weight: lighter; font-style: normal; text-decoration: underline; font-size: 220%; text-decoration-color: white;}

p{font-family: rajdhani; font-weight: bold; font-style: normal;  font-size: 150%;}

a{text-decoration: none; color: white;}
a:visited{color: white;}
a:hover{text-decoration: underline; background-color: lightgray;}

h3{font-family: 'rajdhani'; font-size: 175%; text-shadow: .5px .5px black;}

.dropdown{position: relative; display: inline-block;}

.dropdown-content{display: none; position: absolute; background-color: lightgray; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 10px 12px; z-index: 1; border: 2px solid black; margin-top: 60px; margin-left: 80px; width: 75%; overflow: auto;}

.dropdown:hover .dropdown-content{display: block;}

ul{list-style-type: none; color: white; margin: 4px; }

li{float: left;}

li a {display: inline-block; text-align: center; padding: 16px; margin-left: 120px;}