:root {
    --background: #5F95BF;
    --header-bg: #99E1D9;
    --container-bg: #F0F7F4;
    --container-col: #252635;
    --first: #32C3B2;
    --second: var(--first);
    --third: #35766E;
    --grd1: #DEF7F3;
    --grd2: #99E1D9;
    --grd3: #5F95BF; /* header grd start */
    --grd4: #17223B; /* header grd end */
    --bottom-border:transparent;
}

html {
    scroll-behavior: smooth;
	/*max-height: 100vh;
	min-height: 100vh;*/
}

    body {
        background-image: linear-gradient(to bottom right, var(--grd1), var(--grd2));
    /*background-image:url("../images/white.png");*/
    background-color: var(--background);
    margin: 0px;
    padding: 0px;
    font-family:Helvetica;
	/*max-height: 100vh;
	min-height: 100vh;*/
}

h2 {
    color:var(--first);
}

h3 {
    color: var(--second);
}

b,h4,a {
    color:var(--third);
}
#header {
    background-image: linear-gradient(to bottom, var(--grd3), var(--grd4));
    padding: 1em 0px;
    width: 100%;
    background-color: var(--header-bg);
    /*background-color:rgb(52, 49, 65);*/
    /*background-image:url("../images/black.png");*/
    position: absolute; 
    top: 0;
	
    padding-left:1em;
    padding-right:1em;
	
    /*text-align: right;*/
    border-bottom: 5px solid var(--bottom-border);
}
/*
#header nav {
    margin-right:2em;
}



#header li a {
    color:aliceblue;
    font-size:1.3em;
    text-decoration:none;
}
*/
#title {
	text-align:left;
    color:aliceblue;
    font-size:1.3em;
    text-decoration:none;
}

#container {
    /*background-image: linear-gradient(to bottom right, white, white);*/
    background-color: var(--container-bg);
    color:var(--container-col);
    padding:2em;
    padding-top: 150px; /* why 150px? */
    margin-top: 150px;
    margin-bottom: 100px;
    margin-left:7em;
    margin-right:7em;
}

#landing {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:fit-content;
    font-family:'Courier New', Courier, monospace;
    margin-top:150px;
    margin-bottom: 200px;
}

#landing h1{
    font-size:2.5em;
}
#landing h2 {
    color:var(--third);
}


#about {
    margin-bottom: 150px;
}


#portfolio {
    margin-bottom: 150px;
    padding:1em;
}

#contact {
    text-align: center;
    margin-bottom: 150px;
}
.aboutgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    padding: 1em;
}

.skillgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
    padding: 1em;
    padding-top: 0;
}

.portfoliogrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1em;
    padding: 1em;
  }

  .griditem {
    /* background-color:aliceblue; */
    /*background-image: linear-gradient(to bottom right, var(--grd1), var(--grd2));*/
    border-radius: 1em;
    text-align: center;
    padding: 1em;
  }

  #portfolio1 {
      grid-column: 0/span 1;
  }

  #portfolio2 {
    grid-column: 2/span 1;
}

#portfolio3 {
    grid-column: 3/span 1;
}

#portfolio4 {
    grid-column: 4/span 1;
}

#education {
    grid-column: 1/span 1;
    margin-right:1em;
}

#skills {
    grid-column: 2/span 1;
}

#skillsleft {
    grid-column: 1/span 1;
}

#skillsright {
    grid-column: 2/span 1;
}

.hideme
{
	display:none;
}

#content {
	opacity: 0;
}

form {
	max-width: 400px;
	margin: 50px auto;
}

.feedback-input {
	color:var(--container-col);
	font-weight:bold;
	font-size:16px;
	border-radius:0.5em;
	line-height:1em;
	background-color:transparent;
	border:2px solid var(--second);
	/* transition: all 2s; */
	padding: 0.5em;
	margin-bottom: 0.5em;
	width:100%;
	min-width:100%;
	max-width:100%;
	box-sizing: border-box;
	outline: 0;
}

.feedback-input:focus {
	border:2px solid var(--third); 
	transition: border-color 0.4s;
}

textarea {
	font-family: Helvetica;
	color:var(--container-col);
	font-weight:bold;
	font-size:16px;
	border-radius:0.5em;
	line-height:1em;
}


[type="submit"] {
  font-family: Helvetica;
  width: 100%;
  background:var(--second);
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:-4px;
  font-weight:700;
  transition: all 0.4s;
}


[type="submit"]:hover { 
	background:var(--third); 
}


/* 980px or less 
############################################# */
@media screen and (max-width: 1300px){


	
	
    .portfoliogrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
        padding: 1em;
      }

      #portfolio1 {
        grid-column: 1/span 1;
        grid-row: 1/span 1;
    }
  
    #portfolio2 {
        grid-column: 2/span 1;
        grid-row: 1/span 1;
    }
    
    #portfolio3 {
        grid-column: 1/span 1;
        grid-row: 2/span 1;
    }
    
    #portfolio4 {
        grid-column: 2/span 1;
        grid-row: 2/span 1;
    }
}


/* 700px or less 
############################################# */
@media screen and (max-width: 980px){
    .portfoliogrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
        padding: 1em;
      }

      #portfolio1 {
        grid-column: 1/span 2;
        grid-row: 1/span 1;
    }
  
    #portfolio2 {
        grid-column: 1/span 2;
        grid-row: 2/span 1;
    }
    
    #portfolio3 {
        grid-column: 1/span 2;
        grid-row: 3/span 1;
    }
    
    #portfolio4 {
        grid-column: 1/span 2;
        grid-row: 4/span 1;
    }

    #education {
        grid-column: 1/span 2;
        margin-right:1em;
    }
    #skills {
        grid-column: 1/span 2;
    }
    
    #skillsleft {
        grid-column: 1/span 2;
        grid-row: 1/span 1;
    }
    
    #skillsright {
        grid-column: 1/span 2;
        grid-row: 2/span 1;
    }

}

                /* 680px or less 
############################################# */
@media screen and (max-width: 680px){
	
	body {
		background-color: var(--container-bg);
		background-image: none;
	}
	#container {
		/*background-image: linear-gradient(to bottom right, white, white);*/
		
		background-color: var(--container-bg);
		color:var(--container-col);
		padding:2em;
		margin-left:0;
		margin-right:0;
	}
	
	/*
	#header {
		background-image: linear-gradient(to bottom, var(--grd3), var(--grd4));
		padding: 1em 0px;
		width: 100%;
		background-color: var(--header-bg);
		position: absolute; 
		top: 0;
		text-align: right;
		border-bottom: 5px solid var(--bottom-border);
	}
	*/


	#header {
		    padding-left:1em;
    padding-right:1em;
	}
	
/*
	#header li {
		display: inline-block;
		padding-left:1em;
	}

	#header li a {
		color:aliceblue;
		font-size:1em;
		text-decoration:none;
	}
*/
		#portfolio {
		padding: 0;
	}
}