/* import google fonts: source sans pro, zen dots, rubik, courier prime */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&family=Zen+Dots&display=swap');

/* 
font-family: 'Courier Prime', monospace;
font-family: 'Rubik', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Zen Dots', sans-serif;
*/

* {
    box-sizing: border-box;

    position:relative;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}

nav {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;

    margin-top:8px;
    margin-bottom:8px;
    padding-left:8px;
    padding-right:8px;

    width:100%;
    height:72px;
}
#title {
    display:flex;
}
#title-a {
    height: 64px;

    color:black;
    text-decoration: none;
}
#title h1 {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 8px;
    margin-right: 8px;

    width: 290px;

    font-size:24px;
    font-family: 'Zen Dots', sans-serif;
    text-align: left;
}
#title img {
    margin-top: auto;
    margin-bottom: auto;

    width: 72px;
    height: 64px;
}
#nav-links {
    display:flex;
    justify-content:space-between;

    margin-top: auto;
    margin-bottom: auto;
    margin-left: 8px;
    margin-right: 8px;
}
#nav-links a {
    background-color: #ab220d;
    background-image: url("buttons/navbuttonbg.png");
    background-repeat:no-repeat;
	background-size: 100% 100%;

    padding: 12px 32px;
    margin-left:5px;
    margin-right:5px;
    border-radius: 10px;

	color: white;
    font-family: 'Rubik', sans-serif;
	font-weight:500;
	text-decoration:none;

    transition-duration: 0.25s;
}
#nav-links > *:hover {
    background-color: #561106;
	background-image: url("buttons/navbuttonbg-hover.png");
	background-size: 100% 100%;

	padding: 12px 38px;
    font-weight:700;
}
#nav-links #pressed {
    background-color: #ffc20f;
    background-image: url("buttons/navbuttonbg-pressed.png");

    color:black;
}
#nav-links #pressed:hover {
    background-color: #ffc20f;
    background-image: url("buttons/navbuttonbg-pressed.png");
    background-size: 100% 100%;

    padding: 12px 32px;
}

h1 {
    font-size: 2rem;
    margin:20px;
    text-align: center;
}

.subtitle {
    font-size: 1.2rem;
    margin:20px;
    text-align: center;
}

footer {
    margin-top:40px;
    padding:40px;
    line-height: 1.5;
    text-align: center;
    background-color: #632123;
    color: white;
    font-family: 'Rubik', sans-serif;
}

/* index.html */
main {
    position:relative;
    height: calc(75vh - 88px);

    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;

    background-color: gray;
    background-image: url('images/main.jpg');
    background-position: center;
	background-repeat: no-repeat;
	background-size:cover;

    color:white;
    font-size: 1.5rem;
}
#main-cover {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: calc(75vh - 88px);

    background-color: rgba(0, 0, 0, 0.6);
}
main h2 {
    animation-name: main-anim;
    animation-duration: 10s;
    transition-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
}
main p {
    animation-name: main-anim;
    animation-duration: 10s;
    transition-timing-function: ease-in-out;
    animation-delay: 1.2s;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
}
main a {
    color: white;
}

#about {
    font-size: 1.25em;
}
#about div {
    margin:20px;
    text-align: center;
}
#about h2 {
    margin-bottom:20px;
}
#about-pictures {
    display: flex;
    justify-content: space-evenly;
    flex-wrap:wrap;
}
#about-pictures img {
    margin:20px;

    width:20%;
    height:20%;
}


/* tech-tips.html */
.tip-left, .tip-right {
    width:60%;

    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    margin-bottom:20px;

    font-size: 1.5rem;
}
.tip-left p:nth-of-type(odd), .tip-right p:nth-of-type(odd) {
    font-style: italic;
}
.tip-right {
    text-align:right;
}

#blue-smoke {
    color: black;
    text-decoration: none;
}

/* about.html */
#profiles {
    width:720px;

    margin-left:auto;
    margin-right:auto;

    display: grid;
    grid-template-columns: 240px 240px 240px;
    grid-template-rows: 315px 315px 315px 315px 315px;

    font-size: 1.5rem;
}
#profiles img {
    width:200px;
    height:200px;

    margin-bottom:20px;
}
.profile-kris, .profile-kalei, .profile-cory {
    grid-column-start: 1;
    grid-column-end: 2;
}
.bio-kris, .bio-kalei, .bio-cory {
    grid-column-start: 2;
    grid-column-end: 4;
}
.profile-jacob, .profile-steve {
    grid-column-start: 3;
    grid-column-end: 4;
    text-align: right;
}
.bio-jacob, .bio-steve {
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: right;
}

.bio-kris, .profile-kris {
    grid-row-start: 1;
    grid-row-end: 2;
    margin: 20px;
    margin-bottom:40px;
}
.bio-jacob, .profile-jacob {
    grid-row-start: 2;
    grid-row-end: 3;
    margin: 20px;
    margin-bottom:40px;
}
.bio-kalei, .profile-kalei {
    grid-row-start: 3;
    grid-row-end: 4;
    margin: 20px;
    margin-bottom:40px;
}
.bio-steve, .profile-steve {
    grid-row-start: 4;
    grid-row-end: 5;
    margin: 20px;
    margin-bottom:40px;
}
.bio-cory, .profile-cory {
    grid-row-start: 5;
    grid-row-end: 6;
    margin: 20px;
    margin-bottom:40px;
}

/* submit.html */
form {
    width:60%;

    margin-left:auto;
    margin-right:auto;
}
#submit {
    margin-bottom:40px;
}

/* contact.html */
#contact div {
    width:60%;

    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    margin-bottom:40px;

    font-size:1.5rem;
}


/* media queries */

@media (orientation: portrait) {
    /* tech-tips.html */
    .tip-left, .tip-right {
        width:90%;
    }

    /* submit.html */
    form {
        width:90%;
    }

    /* contact.html */
    #contact div {
        width:90%;
    }
}

@media (orientation: portrait), (max-width: 1293px) {
    nav {
        height:144px;
    }
    #title {
        width:100vw;
    }
    #nav-links {
        margin-left: auto;
        margin-right: auto;
        margin-top:8px;
    }
}
@media (max-width: 899px) {
    #nav-links {
        font-size: 0.8em;
    }
    #nav-links a {
        padding: 10px 26px;
    }
    #nav-links > *:hover {
        padding: 10px 30px;
    }
    #nav-links #pressed:hover {
        padding: 10px 26px;
    }

    /* submit.html */
    form {
        width:80%;
    }
}
@media (max-width: 735px) {
    #nav-links {
        font-size: 0.6em;
    }
    #nav-links a {
        padding: 7px 19px;
    }
    #nav-links > *:hover {
        padding: 7px 23px;
    }
    #nav-links #pressed:hover {
        padding: 7px 19px;
    }

    /* about.html */
    #profiles {
        width:420px;

        margin-left:auto;
        margin-right:auto;

        display: grid;
        grid-template-columns: 140px 140px 140px;
        grid-template-rows: 215px 215px 215px 215px 215px;

        font-size: 1.2rem;
    }
    #profiles img {
        width:100px;
        height:100px;
    }

    /* submit.html */
    form {
        width:90%;
    }

    /* contact.html */
    #contact div {
        width:90%;
        font-size: 1.2rem;
    }
}
@media (max-width: 565px) {
    #nav-links {
        font-size: 0.4em;
    }
    #nav-links a {
        padding: 5px 13px;
    }
    #nav-links > *:hover {
        padding: 5px 15px;
    }
    #nav-links #pressed:hover {
        padding: 5px 13px;
    }

    /* about.html */
    #profiles {
        font-size: 1rem;
    }
}
@media (max-width: 432px) {
    #title h1 {
        font-size:20px;
    }
    #nav-links {
        font-size: 0.38em;
    }
    #nav-links a {
        padding: 4px 9px;
    }
    #nav-links > *:hover {
        padding: 4px 11px;
    }
    #nav-links #pressed:hover {
        padding: 4px 9px;
    }

    /* about.html */
    #profiles {
        width:360px;
        grid-template-columns: 120px 120px 120px;
    }
    #profiles img {
        width:80px;
        height:80px;
    }
}


/* animations */
@keyframes main-anim {
    25% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(20px);
    }
    75% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(20px);
    }
}