/* CSS for temporary longkruse.com homepage (index.html)
   originally done November 2019, since then most of these
   styles are commented out of index.html so this is a bunch
   of unused definitions at this point! */

/* global color variables */
:root {
  --main-color: #9e3a13; /* clay red */
  --accent-color: #0b5154; /* dark aqua */
  --body-text-color: #0b1c48; /* dark blue */
  --inverted-text-color: white;
  --opaque-white: rgba(255, 255, 255, .6);
  --bold-text-color: black; /* black */
  --link-text-color: #444444;  /*  gray */
  --hover-text-color: #0b5154; /* dark aqua */
}

body {
		padding: 0;
		margin: 0;
		font-family: 'Markazi Text', sans-serif;
        font-size: 1.1em;
        color: var(--body-text-color);
        /*  background-image: url(images/graphPaper.png);
        background-attachment: fixed;  */
        background-size:100vw;
    
	}

img {
     margin-bottom: 1em;
}

strong {
     color: var(--bold-text-color);
     font-size: 1.15em;
     font-weight:bolder;
}

h2, h3 {
    font-family: 'Montserrat', sans-serif;
}

.border {
		display: flex;
		flex-direction: column;
		margin: 1em;
	}

   .border img{
        position: relative;
        width: 100%;
        height: auto;
    }

.headerImage {
    position: relative;
    top:-1.7em;
}

.nonMenuContainer {
		display: flex;
		flex-direction: row;
		margin: 1em 0 1em 0;
        /* specify width? will subordinates stay within it? */
	}

	.nonMenuContainer .leftColumn{
		width: 20vw;
		flex-shrink: 0;
        display: flex;
        flex-direction: column;
	}

	.nonMenuContainer .rightColumn{
		flex-grow: 1;
		flex-basis: 100%;
		padding-left: 1em;
	}

.leftMenu {
        height: auto;
        padding: 1em;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
		background-color: var(--main-color);
        color: var(--inverted-text-color);
        font-size: 1.2em;
		text-align: right;
        padding-bottom: 2em;
		margin-bottom: 2em;
        
        position: sticky;
        top: 7em;
	} 

	.leftMenu a{
		float: right;
        display: block;
        text-decoration: none;
        color: var(--inverted-text-color);
        font-size: .9em;
        padding-bottom:0.2em;
        font-family: 'Montserrat', sans-serif;  
		margin-left: 0;
		text-align: right;
        cursor: pointer;
	}

    .leftMenu a:hover {
        color: var(--link-text-color);
        background-color: var(--accent-color);
     }

.logo{
    width: 10vw;
	flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0 1em 0 1em;
    background-color: var(--opaque-white); 
    position: fixed;
    margin-left: 1em;
    top: 1em;
    z-index: 0;
	}

    .logo img {
        /* width: 20vw; */
        margin-bottom: 0;
    }

.menu{
        position: sticky;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        top: 0;
		background-color: var(--main-color);
		flex-grow: 1;
        height:auto;
        padding: 2px 0 3px 0;
        margin-left: 20%;
        overflow: hidden;
        z-index:999;
	}

	.menu a{
		float: left;
        display: block;
        text-decoration: none;
        color: var(--inverted-text-color);
        font-size: 1.2em;
        font-family: 'Markazi Text', serif;  
		margin-left: 0;
		text-align: center;
        padding: 0 4% 0 4%;
        flex-shrink: 0;
	}

    .menu .chosen {
        background-color: var(--accent-color);
        color: var(--link-text-color);
    }

    .menu a:hover {
        color: var(--link-text-color);
        background-color: var(--accent-color);
     }

    .menu .spacer{
        flex-grow: 1;
    }

.HomePage .menu{
    /* bring menu below image on home page */
}

.HomePage .logo{
    /* make logo larger on home page */
    width: 15vw;
    top: 1em;
    background-color: var(--opaque-white);
}

.mainBox{
        height: auto;
        padding: 1em;
        border-width: 1em;
        border-color: var(--main-color);
        border-style:solid;
		background-color: var(--inverted-text-color);
        color: var(--body-text-color);
		text-align: left;
		margin-bottom: 2em;
        display: flex;
        
	}

    .mainbox .1column {
        /* no messing with it! */
    }

	.mainBox .2column{
        flex: 50%;
	}

.boxes {
		display: block;
		margin-bottom: 2em;
	}

	.boxes .onebox{
        width: 28%;
		background-color: lightcyan;
		margin-bottom: 2em;
	}

	.boxes .onebox img{
		width:100%;
	}

	.boxes .onebox .text{
		padding: 1em;
	}

	.boxes .onebox .text h2{
		margin: 0;
		padding: 0;
	}

.boxes .skillbox {
    width: 26%;
    background-color: var(--opaque-white);
    padding: 1em;
    margin-bottom: 2em;
    height: 3em;
    border-color: var(--main-color);
    border-width: 1em;
    border-style: solid;
    font-family: 'Montserrat', san-serif;'
    color: var(--body-text-color);
    font-size:0.8em;
}

.footer {
		padding: 0.2em; 
        color: var(--opaque-white);
		background-color: var(--accent-color);
		text-align: center;
        font-family: 'Montserrat', san-serif;
        font-size: 0.9em;
	}

.color1 {
    color: var(--inverted-text-color);
    }

@media all and (max-width: 700px)
/******************* desktop ****************/
   {
       
       .HomePage .logo {
           position: relative;
           top: 0;
           padding: 0;
           margin-bottom: 1em;
       }
      
       
       .headerImage {
           display: none;
       } 
       
       .nonMenuContainer {
		flex-direction: column;
	   }

       	.menu{
			height: auto;
			margin-bottom: 2em;
		}
       
		.border{
			flex-direction: column;
		}

		.nonMenuContainer  .leftColumn{
			display: flex;
            position: relative;
			width: auto;
            margin-left: 40%;
		}

	   .logo{
           width: 8em;
           z-index: 999;
           top: 4em;
           left: 0;
		}
       
       .footer {
        font-size: 0.6em;
	    }
    }

@media all and (max-width: 600px)
/******************* tablet ****************/
   {
       	.menu{
			padding: 1em;
			margin-left: 0;
			text-align: center;
            height:auto;
		}
       
		.border{
			padding: 0em;
		}
       
		.nonMenuContainer  .rightColumn{
			padding-left: 0;
		}

		.boxes{
			padding-left: 1em;
            padding-right: 1em;
		}
		.boxes .onebox{
			flex-basis: 49%;
		}
	}


@media all and (max-width: 400px)
/******************* phone ****************/
   {
		.boxes .onebox{
            /* since each box must take up 100% width, that
               assures one per row, 1 long column */
			flex-basis: 100%;
		}
       
       	.menu a{
        font-size: 1em;
        padding: 0;
	    }

	}