/* Main CSS Document for Itinerant Tau index */

:root {
    --primary: #011A27;
    --primary_lt: #063852;
    --secondary: #F0810F;
    --secondary_lt: #E6DF44;
}

/*** color codes  ***/
/***
	blue from shadows:     #011A27  rgb(1,26,39);
	blue from shorts:      #063852  rgb(6,56,82);
	orange from shirt:     #F0810F  rgb(240,129,15);
	yellow from shirt:     #E5DF44  rgb(230,223,68);
***/

/***  General Styles   ***/
* {
    box-sizing: border-box;
}

body {
    font-size: 16px;
    background: var(--primary);
    color: var(--secondary_lt);
    display: grid;
    gap: 20px;
}

h1,
h2,
h3,
h4 {
    font-family: Arvo, serif;
    color: var(--secondary);
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.25rem;
}

p,
ul,
li {
    font-family: Raleway, sans-serif;
    margin: .25rem 0;
}

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

a:hover {
    font-size: 110%;
}

/* Header */

header {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
}

header h1 {
    font-size: 5rem;
    margin-bottom: 0;
}

header h2 {
    color: var(--secondary_lt);
    margin-top: 0;
}

/* Main Content */

main {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    gap: 20px;
    grid-template-columns: 2fr 1fr;
}

main img {
    max-width: 100%;
    background-size: cover;
}

nav li {
    list-style: none;
    padding: 10px 0;
}

li img,
p img {
    width: auto;
    height: 25px;
    filter: invert(100%);
    padding-right: 10px;
}

li li {
    font-size: .7rem;
    margin-top: 0;
    color: lightslategrey;
}

/* Footer */

footer {
    grid-column: 1;
    grid-row: 3;
}

#myInfo {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

aside {
    background: var(--secondary);
    color: var(--primary_lt);
    min-width: 50%;
    max-width: 67%;
    border-radius: 10%;
    padding:  .25rem;
}

aside h3 {
    color: var(--primary);
    margin: 0;
}

.attr {
    font-size: .75rem;
    color: lightslategrey;
    margin-top: 3rem;
    text-align: center;
}

/* Media Queries */

@media screen and (max-width: 600px) {
    main {
        grid-template-columns: 1fr;
    }
    header h1 {
        font-size: 3rem;
    }
    header 2 {
        font-size: 1.5rem;
    }
    aside {
        margin: auto;
    }
    #myInfo {
        flex-direction: column;
    }
}