style.css

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
html * {
    font-family: 'Neucha', cursive;
}

#img1{
    width:900px ;
    height:550px ;
}
#img2{
    width: 300px;
    height: 350px;
}
#img3{
    max-width: 500px;
    max-height: 700px;
}
.container{
    display:flex;
}
.reveal img{
    margin:0px;
    padding: 0px;
}
.Introduction{
    display: flex;
}
.Text {
    font-size: 28px;
    text-align: center;
}
.iText {
    display: inline-block;
    max-width: 500px;
    margin-top:150px;
}
.sText {
    display: inline-block;
    max-width: 400px;
    position: absolute;
    font-size: 22px;
    top: 370px;
    left: 600px;

}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.scene{ 
    display: block;
    border-style: solid;
    border-color: red;
    width: 100%;
    height: 100%;
    margin:auto;
}
.meryemDesk{
    position: absolute;
    display: block;
    left: 0px;
    top: 150px;
}
.meryemPros{
    position: absolute;
    display: block;
    left: -181px;
    top: 185px;
}
.meryemDeskActivation{
    position: absolute;
    display: block;
    left: -215px;
    top: 150px;
}
.meryemStraight{
    position: absolute;
    display: inline-block;
    top: 106px;
    left: -342px;
}
.projection{
    width: 85%;
    position: absolute;
    top: -19px;
    left: -58px;
}
.projectionImage{
    width: 500px;
    height: 200px;
    position: relative;
    display: inline-block;
    top: -425px;
    left: -18px;
}
.beanDesk{
    top: 372px;
    display: block;
    position: absolute;
    left: 20px;
}
.beanPros{
    top: 395px;
    display: block;
    position: absolute;
    left: 799px;
}
.beanDeskActivation{
    top: 372px;
    display: block;
    position: absolute;
    left: -195px;
}
.box{
    display: inline-block;
    position: absolute;
    max width:250px;
    max height:250px;
    background:#fff;
    border: solid black;
    border-color: black;
}
.box2{
    width:350px;
    border-width: 3px 3px 5px 5px;
    border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
    transform: rotate(-2deg);
}
.evenboxinner{
    transform: rotate(2deg);
    margin:10px;
    padding:0 5px;
    float:right;
    background:#ddd;
    border:1px solid #222;
    box-shadow:3px 3px 0 #222;
}

.table{
    position: absolute;
    left: 678px;
    top: 460px;
    width: 256px;
    height: 256px;
}
.tableActivation{
    position: absolute;
    left: 350px;
    top: 460px;
    width: 256px;
    height: 256px;
}
.piko{
    position: absolute;
    left: 692px;
    top: 383px;
    width: 125px;
    height: 125px;
}
.pikoSolo{
    position: absolute;
    right: -294px;
    top: 372px;
    width: 250px;
    height: 250px;
}
.pikoActivation{
    position: absolute;
    left: 480px;
    top: 380px;
    width: 125px;
    height: 125px;
}
.sPrimary{
    font-size: 16px;
}
.activationImage{
    width: 500px;
    position: absolute;
    right: -199px;
    top: 137px;

}
#s1{
    left: 280px;
    top: 240px;
}
#s2{
    left: 150px;
    top: 80px;
}
#s3{
    left: 647px;
    top: 159px;
}
#s4{
    left: 260px;
    top: 254px;
}
#s5{
    left: 740px;
    top: 180px;
}
#s6{
    left: 235px;
    top: 215px;
}
#s7{
    left: 607px;
    top: 283px;
}
#s8{
    left: 705px;
    top: 91px;
}
#s9{
    left: 229px;
    top: 188px;
}
#s10{
    left: 630px;
    top: 24px;
}
#s11{
    left: 789px;
    top: 226px;
}
#s12{
    left: 648px;
    top: 95px;
}
#s13{
    left: 789px;
    top: 226px;
}
#s14{
    left: 648px;
    top: 95px;
}
#s15{
    left: 789px;
    top: 226px;
}
#s16{
    left: 803px;
    top: 175px;
}
#s17{
    left: 203px;
    top: 71px;
}
#s18{
    left: 146px;
    top: 232px;
}
#s19{
    left: 23px;
    top: 160px;
}
#s20{
    left: 149px;
    top: 276px;
}
#s21{
    left: 199px;
    top: 41px;
}
#s22{
    left: 12px;
    top: 205px;
}
#s23{
    left: 146px;
    top: 355px;
}
#s24{
    left: 199px;
    top: 67px;
}
#s25{
    left: 42px;
    top: 235px;
}
#s26{
    left: 206px;
    top: 51px;
}
#s27{
    left: 12px;
    top: 235px;
}
#s28{
    left: 146px;
    top: 355px;
}
#s29{
    left: 152px;
    top: 236px;
}
#s30{
    left: -14px;
    top: 41px;
}
#s31{
    left: 232px;
    top: 158px;
}
#s32{
    left: 149px;
    top: 276px;
}
#s33{
    left: 261px;
    top: 22px;
}
#s34{
    left: 12px;
    top: 203px;
}
#s35{
    left: 153px;
    top: 320px;
}
#s36{
    left: 261px;
    top: 53px;
}
#s37{
    left: 12px;
    top: 203px;
}
#s38{
    left: 153px;
    top: 320px;
}
#s39{
    left: 17px;
    top: 190px;
}
#s40{
    left: 146px;
    top: 301px;
}
#s41{
    left: 50px;
    top: 53px;
}
#s42{
    left: 408px;
    top: 118px;
}
#s43{
    left: 337px;
    top: 309px;
}
#s44{
    left: 592px;
    top: 91px;
}
#s45{
    left: 779px;
    top: 199px;
}
#s46{
    left: 370px;
    top: 260px;
}
#s47{
    left: 40px;
    top: 150px;
}
#s48{
    left: 370px;
    top: 238px;
}
#s49{
    left: -18px;
    top: 52px;
}
#s50{
    left: 420px;
    top: 125px;
}
#s51{
    left: 71px;
    top: 267px;
}
#s52{
    left: 367px;
    top: 367px;
}
#s53{
    left: 480px;
    top: 60px;
}
#s54{
    left: 70px;
    top: 210px;
}
#s55{
    left: 355px;
    top: 320px;
}
#s56{
    right: -112px;
    top: 223px;
}
#s57{
    left: 213px;
    top: 208px;
}
#s58{
    left: 148px;
    top: 356px;
}
#s59{
    left: -41px;
    top: 94px;
}
#s60{
    left: 238px;
    top: 183px;
}
#s61{
    left: 142px;
    top: 332px;
}
#s62{
    left: 250px;
    top: 90px;
}
#s63{
    left: 151px;
    top: 302px;
}
#s64{
    left: 164px;
    top: 237px;
}
#s65{
    left: 727px;
    top: 256px;
}
#s66{
    left: 8px;
    top: 148px;
}
#s67{
    left: 158px;
    top: 325px;
}
#s68{
    left: 661px;
    top: 413px;
}
#s69{
    left: 147px;
    top: 186px;
}
#s70{
    left: 147px;
    top: 290px;
}
#s71{
    left: 14px;
    top: 230px;
}
#s72{
    left: 150px;
    top: 320px;
}
#s73{
    left: 359px;
    top: 172px;
}
#s74{
    left: 735px;
    top: 113px;
}
#s75{
    left: 352px;
    top: 167px;
}
#s76{
    left: 735px;
    top: 113px;
}
#s77{
    left: 793px;
    top: 268px;
}
#s78{
    left: 367px;
    top: 345px;
}
#s79{
    left: 171px;
    top: 97px;
}
#s80{
    left: 367px;
    top: 250px;
}
#s81{
    left: 361px;
    top: 250px;
}
#s82{
    left: 27px;
    top: 209px;
}
#s83{
    left: 144px;
    top: 351px;
}
#s84{
    left: 18px;
    top: 166px;
}
#s85{
    left: 154px;
    top: 292px;
}
#s86{
    left: -15px;
    top: 60px;
}
#s87{
    left: 220px;
    top: 190px;
}
#s88{
    left: 153px;
    top: 362px;
}
#s89{
    left: 7px;
    top: 85px;
}
#s90{
    left: 265px;
    top: 220px;
}
#s91{
    left: 120px;
    top: 364px;
}
#s92{
    left: 660px;
    top: 340px;
}
#s93{
    left: 400px;
    top: 50px;
}
#s94{
    left: 245px;
    top: 260px;
}
#s95{
    left: 370px;
    top: 362px;
}
#s96{
    left: 661px;
    top: 413px;
}
#s97{
    left: -179px;
    top: 56px;
}
#s98{
    left: 233px;
    top: 275px;
}
#s99{
    left: 124px;
    top: 371px;
}
#s100{
    left: 186px;
    top: 70px;
}
#s101{
    left: -5px;
    top: 189px;
}
#s102{
    left: 793px;
    top: 268px;
}
#s103{
    left: 34px;
    top: 230px;
}
#s104{
    left: 160px;
    top: 338px;
}
#s105{
    left: 120px;
    top: 364px;
}
#s106{
    left: 55px;
    top: 86px;
}
#s107{
    left: 428px;
    top: 183px;
}
#s108{
    left: 366px;
    top: 366px;
}
#s109{
    left: 34px;
    top: 195px;
}
#s110{
    left: 152px;
    top: 327px;
}
#s111{
    left: 775px;
    top: 312px;
}
.menu{
    display: grid; 
    grid-template-columns:350px 350px 350px;
    grid-template-rows:307px 400px;
    grid-template-areas: 
    "kategori1 kategori2 kategori3"
    "kategori4 kategori5 kategori6";

}
.kategori1{
    grid-area: kategori1;
    align-self:top ;
}
.kategori2{ 
    grid-area: kategori2;
    align-self: top;
}
.kategori3{ 
    grid-area: kategori3;
    align-self: top;
}
.kategori4{ 
    grid-area: kategori4;
    align-self: top;
}
.kategori5{ 
    grid-area: kategori5;
    align-self: top;
}
.kategori6{
    grid-area: kategori6;
    align-self: top;
}

li{
    font-size: 18px;
    list-style-type: none;
    color: cadetblue;
    text-align: center;
    margin: 3px;
}
.reveal h3{
    color: black;
    padding: 0px;
    margin: 0px;
}
.reveal ul{
    margin: 5px;
    padding:7px;
    align-self: center;
}
.reveal a {
    display: inline-block;
    width: 275px;
    color: rgb(1, 46, 1);
    text-decoration: none;
    transition: color .15s ease;
    background-color: white;
    padding: 3px;
    font-size: 20px;
    text-align: center;
    border-color:rgb(190, 190, 231);
    border-style: solid;
    border-radius:3px ;
}
.reveal h2 {
    font-size: 2.11em;
    color: green;
    font-size:48px;
    margin:0px;
    padding: 0px;
}
.tanitim{
    padding: 0px;
}
.baslık{
    position: relative;
    left:50px;
}
.back{
    display: inline-block;
    position: absolute;
    left: -246px;
    top: -8px;
}
#menu1{
    top:-68px;
}
.flash{
    position: absolute;
    left: -185px;
    top: 58px;
}
.dataImage{
    position: absolute;
    right: -260px;
    top: 60px;
}
.pikoLeft{
    width: 256px;
    height: 256px;
    position: absolute;
    right: -246px;
    top: 445px;

}