@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Noto+Serif:wght@700&display=swap');
@import url("DancingScript_VariableFont_wght/stylesheet.css");
.wholeDiv {
    width: 900px;
   
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    background-color: rgba(231,225,230,1.00);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
	overflow: hidden;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}


body {
   background: linear-gradient(to left ,#8942a8,#ba382f);
	
}
.wholeDiv {
    background-color: rgba(255,255,255,1.00);
}
.wholeDiv main .div1 {
    width: 180px;
    height: 180px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
    border-radius: 50%;
    background-color: rgba(224,94,96,1.00);
    text-align: center;
    border: 1px solid rgba(0,0,0,1.00);
    -webkit-box-shadow: 2px 2px rgba(134,133,133,1.00);
    box-shadow: 2px 2px rgba(134,133,133,1.00);
	cursor: pointer;
	float: left;
}
.wholeDiv main .div1.drawing {
    background-image: url(../images/drawing.jpg);
    font-size: large;
    text-align: center;
    text-shadow: 0 0 rgba(87,87,87,1.00);
}
.wholeDiv main .div1.oilpainting {
    background-image: url(../images/oil.png);
    font-family: alike;
    font-style: normal;
    font-weight: 400;
}





ul {
    color: rgba(255,255,255,1.00);
    padding-right: 200px;
    list-style-type: none;
    padding-left: 20px;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    background-color: rgba(0,0,0,1.00);
    overflow: hidden;
    position: fixed;
    width: 880px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: 30px;
    border-bottom: 5px solid rgba(255,248,248,1.00);
   font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
li {
	display: inline-block;
	
	float: right;
	
}
li a {
    text-decoration: none;
    display: block;
    padding-right: 20px;
    text-align: center;
    color: rgba(255,255,255,1.00);

	
}
li a:hover{
	background:#8942a8;
	color:rgba(0,0,0,1.00);
}
.wholeDiv header .navDiv {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
header .navDiv ul {
}
.navDiv ul div {
    width: 0px;
}
.navDiv ul div {
    width: 200px;
    display: block;
    float: left;
    margin-left: 20px;
}
.wholeDiv main .slidediv {
    width: 900px;
    height: 340px;
    overflow: hidden;
    float: left;
    position: static;
    background-image: url("../images/slide1.jpg");
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    border-style: none;
    border-color: rgba(30,28,28,1.00);
	animation: slider 12s infinite linear;
}
@keyframes slider {
	0%{background-image: url("../images/slide1.jpg");}
	
	35%{background-image: url("../images/slide2.png");}
	
	55%{background-image: url("../images/slide3.jpg");}
	
	75%{background-image: url("../images/slide4.jpg");}
	
}
.wholeDiv main .div1.kelas {
	overflow: hidden;
}
.div1{
	overflow:hidden;
	
}
.wholeDiv main .div1.drawing {
}
.text{
	font-family:"DancingScript VariableFont wght";
	text-align: center;
	font-size: 30px;
font-weight: 300;
}

.socialmedia{
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	text-align: center;
	margin-bottom: 10px;
}

.icon img {
    position: relative;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 50px;
    padding-right: auto;
    padding-left: auto;
}
footer{
	width: 900px;
	
	background-color:black;
	height: 50px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	overflow: hidden;
	text-align: center;
	color:white;
	font-size: 15px;
	
}
.div1 img:hover{
	filter:brightness(1.1);
	transform: scale(1.1);
}