* {


margin: 0;


padding: 0;


}



body {


font-family: "Roboto", Arial, Helvetica, sans-serif;


font-size: 18px;


background-color: rgb(4, 78, 4);


padding: 40px;


}



img {


width: 100%;


}



header {


display: grid;


grid-template-columns: 1fr 1fr 1fr ;


grid-template-areas: 


'depan depan komputer'


'depan depan perpus';


gap: 20px;


}


.depan {


grid-area: depan;


}


.komputer {


grid-area: komputer;


}


.perpus {


grid-area: perpus;


}



.perpus img,


.komputer img,


.depan img {


border-radius: 10px;


box-shadow: 0 0 2px black;


}



#profil {


display: grid;


grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


gap: 20px;


margin-top: 20px;


place-content: center;


}



.profil {


background-color: #aaa;


padding: 15px;


border-radius: 7px;


text-align: center;


}



.profil h3 {


margin-bottom: 10px;


letter-spacing: 0.5px;


font-weight: bold;


font-size: 1.2em;


}



.profil button {


margin: 10px;


font-size: 0.8em;


padding: 7px;


border-radius: 7px;


}



#vision {


display: grid;


grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


gap: 20px;


margin-top: 20px;


}



.visi,


.misi,


.tujuan,


.ortu{


background-color: #aaa;


padding: 35px;


border-radius: 7px;


}



.visi h3,


.misi h3,


.tujuan h3, 


.ortu h3{


margin-bottom: 10px;


letter-spacing: 0.5px;


font-weight: bold;


font-size: 1.2em;


text-align: center;


}



.visi p {


text-align: center;


}



#vision li {


padding: 5px;


}


.ortu p {

margin-bottom: 15px;

}


.ortu a {

background-color: green;

color: white;

padding: 7px 12px ;

margin-top: 50px;

text-align: start;

border-radius: 7px;

text-decoration: none;

cursor: pointer;

}


.ortu a:hover {

background-color: red;

}



#img {


display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

margin-top: 20px;



}



#img img {

border-radius: 7px;

max-width: 415px;

}



@media (max-width: 800px) {


body {


padding: 15px;


}



header {


grid-template-areas: 


'depan depan depan'


'komputer komputer komputer'


'perpus perpus perpus';


}


}