@font-face {
    font-family: AryaRegular;
    src: url("../fonts/Arya-Regular.ttf");
}

@font-face {
    font-family: Aparajita;
    src: url('../fonts/Aparajita.ttf');
}

@font-face {
    font-family: Akshar_Unicode;
    src: url('../fonts/Akshar_Unicode.ttf');
}

@font-face {
    font-family: lohit-Devanagari;
    src: url('../fonts/lohit-Devanagari.ttf');
}

@font-face {
    font-family: MANGAL;
    src: url('../fonts/MANGAL.ttf');
}

@font-face {
    font-family: Sanskrit_text;
    src: url('../fonts/Sanskrit_text.ttf');
}

.font1 {
    font-family: AryaRegular;
}

.font2 {
    font-family: Aparajita;
}

.font3 {
    font-family: Akshar_Unicode;
}

.font4 {
    font-family: lohit-Devanagari;
}

.font5 {
    font-family: MANGAL;
}

.font6 {
    font-family: Sanskrit_text;
}

.text1 {
    font-size: 25px;
}

.text2 {
    font-size: 20px;
}

.text3 {
    font-size: 17px;
}

.text4 {
    font-size: 16px;
}

.img_round_border1 {
    border: darkred solid 5px;
    height: 260px;
    width: 260px;
    border-radius: 50%;
    display: block;
    margin: auto;
    box-shadow: gold 2px 2px 2px 3px;
}

.head_border1 {
    border: brown solid 3px;
    padding-top: 5px;
    padding-bottom: 5px;
    background:yellow;
    border-radius: 50%/15%;
    box-shadow: gold 2px 2px 2px 3px;
    text-align: center;
    color: darkred;
    font-weight: bold;
    text-shadow:darkorange 1px 1px 2px;
}

.head_border2 {
    border: indigo solid 3px;
    padding-top: 8px;
    padding-bottom: 5px;
    background:greenyellow;
    border-radius: 50% 20%/10% 40%;
    box-shadow: aqua 2px 2px 2px 3px;
    text-align: center;
    color:darkblue;
    font-weight: bold;
    text-shadow:yellow 1px 1px 2px;
}

.div_border1 {
    text-align: justify;
    border: darkgreen solid 2px;
    background:azure;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    box-shadow: lightgreen 2px 2px 2px 3px;
}

.border8 {
    border: indigo solid 7px;
    border-radius: 50%/15%;
    padding: 20px;
    margin: auto;
    box-shadow: darkturquoise 8px 8px 8px,
        purple 18px 18px 16px;
    align-items: center;
    display: flex;
    text-align: center;
    background-color: mediumturquoise;
    width: 80%;
}

.border9 {
    border: indigo solid 7px;
    border-radius: 50% 20%/10% 40%;
    padding: 20px;
    margin: auto;
    box-shadow: darkturquoise 8px 8px 8px,
        purple 18px 18px 16px;
    align-items: center;
    display: flex;
    text-align: center;
    background-color: mediumturquoise;
    width: 80%;
}

.border10 {
    border: indigo solid 7px;
    border-radius: 2000px 5000px/7000px 8000px;
    padding: 20px;
    margin: auto;
    box-shadow: darkturquoise 8px 8px 8px,
        purple 18px 18px 16px;
    align-items: center;
    display: flex;
    text-align: center;
    background-color: mediumturquoise;
    width: 80%;
}

nav a {
    display: inline;
    padding: 8px;
    background-color: red;
    color: white;
    border-radius: 15px;
    text-decoration: none;
}

nav a:hover,
nav a:focus {
    background-color: brown;
    text-decoration: underline;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*width: 300px;*/
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    font-size: 15px;
    /*font-weight: bold;*/
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: #086140;
    color: white;
    text-shadow: black 1px 1px 1px;
}

li a:hover:not(.active) {
    background-color: black;
    color: white;
}

.mediaImg {
    border:solid 2px red;
    height:50px; width:50px;
    cursor:pointer;
    background:lightgray;
    border-radius: 10px;
}

.dropbtn {
    background-color: #148ddd;
    color: white;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    border: 1px solid #555;
    border-radius: 15px;
    cursor: pointer;
    font-size: 20px;
    font-style: italic;
    width: 115px;
}

.dropbtn:hover,
.dropbtn:focus {
    background-color: #147dc4;
}

.dropdown {
    font-size: 20px;
    top: 1px;
    left: 2px;
    position: fixed;
    display: inline-block;
}

.header {
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    text-shadow: black 1px 1px 3px;
    top: 1px;
    left: 120px;
    position: fixed;
    display: inline-block;
    background-color: green;
    color: yellow;
    border-radius: 15px;
    width: 190px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    border: 1px solid #555;
    box-shadow: darkorange 2px 2px 1px 1px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 250px;
    overflow: auto;
    border: 1px solid #555;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    border-bottom: 1px solid #555;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown a:hover {
    background-color: #ddd;
}

.show {
    display: block;
}

/* Style the sidenav links and the dropdown button */
.sidenav a {
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 15px;
    text-decoration: none;
    color: lightgrey;
    display: block;
    border-bottom: 1px solid black;
    background: darkslategray;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.dropdown-btn {
    padding: 5px 4px 6px 10px;
    text-decoration: none;
    font-size: 20px;
    color: black;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}

/* On mouse-over */
.sidenav a:hover {
    background-color: black;
    color: #f1f1f1;
}

.dropdown-btn:hover {
    background-color: #ddd;
    color: black;
}

/* Add an active class to the active dropdown button */
.active {
    background-color: green;
    color: white;
}

/* Dropdown container (hidden by default). 
Optional: add a lighter background color and some left padding 
to change the design of the dropdown content */
.dropdown-container {
    display: none;
    background-color: #262626;
    padding: 0px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* Optional: Style the caret down icon */
.fa-caret-down {
    float: right;
    padding-right: 0px;
    padding-top: 4px;
    padding-left: 0px;
}