@import url('https://fonts.googleapis.com/css?family=Kavivanar');

/* css styles */

:root {
    --nav-color: rgb(230, 240, 255);
    --title-color: rgb(30, 110, 55);
    --tabs-color: rgb(235, 235, 235);
    --tabs-highlight-color: rgb(255, 245, 190);
    --body-color: rgb(255, 255, 255);
}


a.icon{
    /* icon links :) */
}

body{
    padding-bottom: 0px !important;
}

h1.title{
    color: var(--title-color);
    font-family: Kavivanar;
    margin: 0.75em 0em;
    text-align: center;
}

h2{
    font-size: large;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: center;
    text-transform: uppercase;
}

img{
    border-radius: 15px;
    border: thin solid black;
}

ul{
    padding-inline-start: 15px;
}







/* NAV - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.navbar-default .navbar-brand {
    color:var(--title-color);
}

.navbar-default {
    background-color: var(--nav-color);
    border-color: black;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: blue;
    /*background-color: transparent;*/
}

a.navbar-brand{
    padding: 5px 25px 0px 0px;
}

img.nav-name{
    border: none;
    border-radius: 0px;
}

/* BODY + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

body{
    background-color: var(--body-color);
}

/* FOOTER @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @  @ */

div.footer{
    border-top: thin solid black;
    background-color: var(--nav-color);
    margin-top: 3em;
    padding: 1em;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
}







/* WIDE ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
@media (min-width: 768px) {
  
    /* PAGE = ABOUT ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
    
    div.about-grid{
        display: grid;
        gap: 0% 8%;
        grid-template-columns: 19% 19% 19% 19%;
        grid-template-rows: max-content max-content max-content max-content;
        grid-template-areas:
          "about-pho about-edu about-edu about-int"
          "about-pho . . about-int"
          ". . . about-int"
          ". . . .";
        margin-top: 5%;
    }
    
    div.about img{
        display: block;
        margin: auto;
        width: 90%;
    }
    
    div.about-photo{
        grid-area: about-pho;
    }
    
    div.about-education{
        grid-area: about-edu;
    }
    
    div.about-interests{
        grid-area: about-int;
    }

    /* NAV TABS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    
    .nav-tabs {
        border-bottom: none;
    }
    
    .nav-tabs>li>a{
        background-color: var(--tabs-color);
        border-bottom: none;
        margin-right: 7px;
        padding: 10px 20px 15px 20px;
        top: 4px;
    }
    
    .nav-tabs>li>a,.nav-tabs>li>a:hover {
        border-color: black;
    }
    
    
    #navbar>ul.nav.navbar-nav.nav-tabs>li>a:focus, #navbar>ul.nav.navbar-nav.nav-tabs>li>a:hover{
        background-color: var(--tabs-highlight-color);
    }

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        border: thin solid black;
        border-bottom: thin solid white;
        cursor: default;
        padding-bottom: 16px;
    }
    
    #navbar>ul.nav.navbar-nav.nav-tabs>li.active>a:focus, #navbar>ul.nav.navbar-nav.nav-tabs>li.active>a:hover{
        background-color: var(--body-color);
    }

    /* OTHER NAV - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    
    .container {
        width: auto;
    }
    
    div.navbar {
        padding-left: 25px;
        padding-top: 10px;
    }
    
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        color: black;
        background-color: var(--body-color);
    }
    
    .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{
        /*margin-left: -35px;*/
    }
    
    
    .navbar-default .navbar-nav>li>a {
        color: black;
    }
    
    .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
        color: blue;
    }
    
    .nav>li>a.icon {
        font-size: 2.25rem;
        padding: 10px 15px;
    }
}





/* NARROW ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
@media (max-width: 767px) {
  
    /* PAGE = ABOUT ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */
    
    div.about-grid{
        margin-top: 5%;
    }

    div.about{
        margin-bottom: 20%; 
    }
    
    div.about img{
        display: block;
        margin: auto;
        width: 50%;
    }

    /* NAV TABS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    
    .nav-tabs>li>a {
        border: none;
        border-radius: 0px;
        margin: 0px;
    }
    .nav-tabs>li>a:hover {
        border: none;
        border-radius: 0px;
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        border: none;
        border-radius: 0px;
        cursor: default;
    }

    /* OTHER NAV - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
    
    img.nav-name{
        height: 75%;
        margin: 5%;
    }
    
    .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
        color: grey;
        background-color: transparent;
    }
    
    .navbar-default .navbar-nav>li>a {
        color: black;
    }
    
    .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
        color: blue;
    }
    
    .navbar-right>li{
        float: left;
        margin-left: 10px;
    }
    
    .navbar-default .navbar-toggle {
        border: none;
    }

    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: var(--tabs-highlight-color);
    }
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*/