.main{
    top: 6.8%;
    display: flex;
    background-color:  white;
}
.Bok{
  position: fixed;
  margin-top: 6.8%;
}
.Bok ul{
  height: 100%;
}
.a li {
  background-color: #663399;
  border-radius: 25px;
  margin-left: 10%;
  margin-top: 5%;
  color: #ffe4c4;
  font-weight: 500;
  position: relative;      
  padding: 11%;
  width: 100%;
  height: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
}
.b li {
  background-color: #663399;
  border-radius: 25px;
  margin-left: 13%;
  margin-top: 7%;
  color: #ffe4c4;
  font-weight: 500;
  align-items: center;
  position: relative;      
  justify-content: center;
  padding: 7%;
  width: 140%;
  height: 100%;
  text-align: center;
  transition: 0.5s;
}
.c li {
  background-color: #663399;
  border-radius: 25px;
  margin-left: 10%;
  margin-top: 6%;
  color: #ffe4c4;
  font-weight: 500;
  align-items: center;
  position: relative;      
  justify-content: center;
  padding: 9%;
  width: 115%;
  height: 100%;
  text-align: center;
  transition: 0.5s;
}
.d li {
  background-color: #663399;
  border-radius: 25px;
  margin-left: 15%;
  margin-top: 8%;
  color: #ffe4c4;
  font-weight: 500;
  align-items: center;
  position: relative;      
  justify-content: center;
  padding: 23%;
  width: 130%;
  height: 100%;
  text-align: center;
  transition: 0.5s;
}

.Bok li:hover {
  background-color: #a865b5;
  color: #fff0f5;
  transform: scale(1.1);
}

.b .moznost {
  border-radius: 10px;
  display: none;
  position: absolute;      
  left: 100%;   
  top: 0;       
  background-color: #d8bfd8;
  width: 80%;
  height: 100%;
  transition: 0.3s;
}
.a .moznost {
  border-radius: 10px;
  display: none;
  position: absolute;      
  left: 100%;   
  top: 0;       
  background-color: #d8bfd8;
  width: 80%;
  height: 100%;
  transition: 0.3s;
}
.c .moznost {
  border-radius: 10px;
  display: none;
  position: absolute;      
  left: 100%;   
  top: 0;       
  background-color: #d8bfd8;
  width: 80%;
  height: 100%;
  transition: 0.3s;
}
.d .moznost {
  border-radius: 10px;
  display: none;
  position: absolute;      
  left: 100%;   
  top: 0;       
  background-color: #d8bfd8;
  width: 80%;
  height: 100%;
  transition: 0.3s;
}
.a .moznost a{
  padding-top: 6%;
}
.b .moznost a{
  padding-top: 1%;
}
.c .moznost a{
  padding-top: 4%;
}
.d .moznost a{
  padding-top: 11%;
}
.Bok li:hover .moznost  {
  display: block;          
}

.moznost a {
  border-radius: 10px;
  font-weight: 500;
  display: block;
  text-decoration: none;
  color: #051650;
  padding: 3%;
  transition: 0.3s;
}
.b .moznost a {
  padding: 0.9%;
}
.a .moznost a{
  height: 21%;
}
.c .moznost a{
  height: 22%;
}
.d .moznost a{
  height: 16.5%;
}
.moznost {
  border: 2px solid #fff0f5;
}
.moznost a:hover {
  background-color: #a865b5;
  color: #ffe4c4;
}
.maintext{
  border-radius: 30px;
  margin-top: 6.8%;
  margin-left: 20%;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: darkslateblue;
  border: 3px honeydew solid;
}

@media screen and (max-width: 1500px){
    .main{
        padding-top: 1.5%;
    }
    .maintext{
      margin-top: 8%;
      margin-left: 23%;
    }
}

@media screen and (max-width: 1200px){
    .maintext{
      margin-left: 33%;
    }
    .a li{
      padding: 9%;
    }
    .b li{
      padding: 6%;
    }
    .c li{
      padding: 8%;
    }
    .b .moznost a {
     padding: 0.9%;
    }
    .a .moznost a{
      height: 12%;
    }
    .c .moznost a{
     height: 18%;
    }
    .d .moznost a{
      height: 13%;
      padding-top: 9%;
    }
}
@media screen and (max-width: 1000px){
    @media screen and (max-width: 1000px){
    .maintext{
      margin-top: 8%;
      margin-left: 33%;
    }
    .main{
        padding-top: 4%;
    }
}
}
@media screen and (max-width: 800px) {
  .maintext{
    margin-top: 30%;
    margin-left: 0px;
    left: 0;
  }
}