*{margin:0; padding: 0; box-sizing: border-box;}


.header {
  imgback-align: center; { width:100%; padding: 3;};
  imglogo-align: center; { width: 100%; height: 100%};
}

.content{display:flex; margin: auto;}

.rTable{width: 100%; text-align: center;}	
	.rTable tbody tr:nth-child(2n)
	.rTable td{padding: 7px 2px;}
	
@media screen and (max-width: 480px){
	.content{width: 40%;}
	.rTable tbody td{display: flex; flex-direction: column;}
	footer{display: flex; flex-direction: column;}
	#about {display: flex; flex-direction: column; width: 100%}
	
	}

@media only screen and (min-width: 1200px){
	.content{width: 60%;}
	#about {display: flex; height: 100%;}
	
	.rTable tbody tr td:nth-child(1){width:16%;}
	.rTable tbody tr td:nth-child(2){width:16%;}
	.rTable tbody tr td:nth-child(3){width:16%;}
	.rTable tbody tr td:nth-child(4){width:16%;}
	.rTable tbody tr td:nth-child(5){width:16%;}
	.rTable tbody tr td:nth-child(6){width:16%;}
}

body {
    background-color: rgb(198, 198, 199);
    font-family:Verdana, Geneva, Tahoma, sans-serif; color: #443d3c;
    
}

#imgback {
	position: top; 
	left: 50%;
	top: 50%
	}

#imglogo {
    position: absolute;
    top: 5;
    bottom: 0;
    left: 0%;
    right: 0%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: auto;
    opacity: 100;
    transition: .5s ease;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    }

    main {
        max-width: 1148px;
        margin: 0 auto;
        display: grid;
        align-content: stretch;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-template-rows: auto; 
        grid-template-areas:
        "main-title main-title main-title main-title"
        "about about about about"
        "quote quote quote quote"
        "job-experiences job-experiences job-experiences job-experiences"
    }
    
    #main-title {
        grid-area: main-title;
    }
    
    #about {
        grid-area: about;
        display: flex;
        flex-flow: now nw-resize;
		align-items: center;
    }
    
    .resume {
        background-color: white;
		display: grid;
		align-content: center;
		flex-wrap: wrap;		
        padding: 15px;
        height: 100%;
        align-items: stretch;
		grid-area: resume;
        }
		
				
    
    #quote {
        background-color: rgb(94, 91, 100);
        color: white;
        padding: 20px;
        margin-top: 10px;
        text-align: center;
        grid-area: quote;
    }
    
    #job-experiences {
        background-color: rgb(236, 236, 236);
        padding: 5px 5px 5px 5px;
        margin: 0 0;
        grid-area: job-experiences;
        display: grid;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
        grid-template-rows: auto; 
        grid-template-areas:
        "experiences-title experiences-title  experiences-title experiences-title experiences-title experiences-title"
        "exp1 exp1 exp2 exp2 exp3 exp3"
        
    }
    
    #experiences-title {
        grid-area: experiences-title; 
    }
    
    .job-exp1 {
        border-radius: 20px;
        background-color: rgb(152, 182, 247);
        padding: 2;
        text-align: center;
        display: grid;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-rows: auto;
        
    }
     
    .job-exp2 {
        border-radius: 20px;
        background-color: rgb(152, 182, 247);
        padding: 2;
		text-align: center;
        display: grid;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-rows: auto;
    }
	
	.job-exp3 {
        border-radius: 20px;
        background-color: rgb(152, 182, 247);
        padding: 2;
		text-align: center;
        display: grid;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-rows: auto;
    }
    
    .job-description {
        padding-left: 0;
		padding-right: 0;
    }
    
    #exp1 {
        grid-area: exp1;
    }
    
    #exp2 {
        grid-area: exp2;
    }
    
    #exp3 {
        grid-area: exp3;
    }    
     
    .company-logo {
		display: block;
		position: center;
		margin-left: auto;
		margin-right: auto;
		max-width: 150px; min-width: 50px;
        max-height: 100px; min-height: 33px;
        
    }
    
    footer {
        background-color: #3e3e3e;
        color: lightgray;
        padding: 20px 15px;
        display: flex; 
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .social-media {
        display: flex;
        flex-flow: row wrap;
		align-items: center;
    }
    
    .social-icon {
        max-width: 80px; 
        max-height: 80px; 
        padding: 5px;
		align-items: center;
    }