html {
    min-height: 100%;
}
	
body{	
		
		background-image:linear-gradient(to bottom, rgba( 39.6,26.3,12.9,0.7), rgba(255,255,255,0.4)), url('../img/sf.jpg');
		background-size:cover;
}
	


header h1 {
		text-align:right;
		font-family: verdana, sans-serif;
		padding:5px;
		Color:OldLace;
}

.company {
		text-align:Left;
		font-family: verdana, sans-serif;
		padding:10px;
		Color:Ivory;
}

.contact{
		text-align:Center;
		font-family: verdana, sans-serif;
		padding:10px;
		Color:white;
}
	
.header-img {
		width:9%;
		height:9%;
		float:left;
		padding-left:30px;
}

.kepala {
		color:#FFEBCD;
		font-family: verdana, sans-serif;
		padding : 10px;
}	

.img1{
	grid-area:a;
}

.img1:hover
{
	opacity:0.9;
}

.img2{
	grid-area:b;
}

.img2:hover
{
	opacity:0.9;
} 

.img3{
	grid-area:c;
}

.img3:hover
{
	opacity:0.9;
} 
.img4{
	grid-area:d;
}

.img4:hover
{
	opacity:0.9;
}
.img5{
	grid-area:e;
}
.img5:hover
{
	opacity:0.9;
}
.img6{
	grid-area:f;
}
.img6:hover
{
	opacity:0.9;
}
.img7{
	grid-area:g;
}
.img7:hover
{
	opacity:0.9;
}
.img9{
	grid-area:i;
}
.img9:hover
{
	opacity:0.9;
}
.grid-container{
	display: grid;
	grid-template-areas:
		"a a a"
		"b c d"
		"e f g"
		". i .";
	gap: 1rem;
	grid-template-columns: 1fr 1fr 1fr;
	grid-auto-rows: minmax(100px, auto);
	text-align:center;
	color:ivory;
}

.grid-container > div {
  padding: 5px 0;
}

a {
		padding:15px; 
		font-weight:bold; 
}
a:link { 
		color:#FFEBCD; 
}
a:visited { 
		color:#FFEBCD;  
}
a:hover { 
		color:red; background-color:yellow; 
}

a:active { 
		color:#FFEBCD ; background-color:transparent;
}

.link:hover{
	padding:10px;
	color: Ivory;
	background-color:none;
}

td{
	padding:10px;
	color: Ivory;
}



div.transbox {
  margin: 30px;
  }

div.transbox p {
  margin: 5%;
  font-weight: bold;
}

#baca {
		color:#FFFACD;
		font-family: 'times new roman', serif;
		padding : 20px;
		border-color:coral;
		border-width:1px;
		border-style:solid;
		text-align:justify;
}

.profile{
		border: 1px solid #FFD700;
		border-collapse: collapse;
}

.cphead{
	border: 1px dotted #FFD700;
	padding:10px;
	color: white;
}

.cpchild{
	border: 2px outset #FFD700;
	padding:40px;
	color:white;
}
.cpchild2{
	border: 2px outset #FFD700;
	padding:30px;
	color:white;
}
.profileisi {
		border: 1px dotted #FFD700;
		border-collapse: collapse;
		color:white;
}



.parent{
	display: grid;
	grid-template-columns: repeat(4, 30fr);
	grid-template-rows: 200px;
	column-gap: 40px;
	margin : 0 auto;
	padding: 15px;
	grid-auto-rows: 200px;
    justify-content: center;
	border-image-width: 30px;
}

.parent >div{
	border: 1px solid yellow;
	background-color: white;
	border-image-width: 30px;
}

.child {
        display: grid;
        align-items: center;
        justify-items: center;
} 

.child:hover{
	opacity:0.7;
}     


  
address{
		color:#FFFFF0;
		font-family: georgia, serif;
		padding : 30px;
		color:white;
}