body {
  background-color:  /*rgb(221, 217, 234);*/rgb(180, 213, 213);
  background-image: url("imgs/ss050.jpg");
  background-size: 7%;
  background-blend-mode: overlay;
  color: #29244d;
  font-family: "Pangolin", cursive;
}

/*ПАРАМЕТРЫ ТЕКСТА*/

p{
  font-family: "Pangolin", cursive;
  font-optical-sizing: auto;
  font-size: 1.1em; 
  color:  #29244d;
  font-style: normal;
  text-align: justify;
  padding-left: 8px;
  padding-right: 10px;

}

h1{
  font-family: "Rubik Dirt", system-ui;
  font-optical-sizing: auto;
  font-weight: bold;
  font-size: 1.9em; 
  font-style: normal;  
  color: rgb(255, 255, 255);
  text-align: center;
  margin-left: 5px;
  margin-top: 15px;
  margin-bottom: 2px;
  text-shadow: 1px 1px 5px rgb(0, 0, 0), 0 0 25px rgb(126, 126, 126), 0 0 5px rgb(57, 57, 57);
  transition: letter-spacing 0.5s ease;
}

h1:hover{
  letter-spacing: 1px;
}

h2{
  font-family: "Seymour One", sans-serif;
  font-size: 1.3em; 
  text-align: left;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 5px rgb(0, 0, 0), 0 0 25px rgb(0, 0, 0), 0 0 5px rgb(21, 21, 21);
}

h3{
  font-family: "Seymour One", sans-serif;
  font-size: 1.1em; 
  text-align:left;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 5px rgb(0, 0, 0), 0 0 25px rgb(126, 126, 126), 0 0 5px rgb(57, 57, 57);
  padding-left: 8px;
  padding-right: 10px;
}

ol, ul{
  font-family: "Pangolin", cursive;
  font-size: 17.6px; 
  color:  #29244d;
  text-align: left;
  margin-left: 15px;
}

li{
  margin-bottom: 5px;
  text-align: justify;
  padding-right: 10px;
}

a{
  font-size: 1.1em; 
  color:  #29244d;
  text-decoration: underline 0.15em rgba(59, 30, 203, 0);
  transition: text-decoration-color 300ms;
}

a:visited {
  font-size: 1.1em; 
  color:  #29244d;
  text-decoration: none;
}

a:hover {
  color:  #29244d;
  text-decoration-color: rgb(30, 203, 203);
}

a:active {
  color:rgb(255, 255, 255);
  text-shadow: 1px 1px 5px rgb(0, 0, 0), 0 0 25px rgb(126, 126, 126), 0 0 5px rgb(57, 57, 57);
  font-size: 15px;
  text-decoration: underline;
}

table {
  margin: 10px;
}

td{
  font-size: 1.1em; 
  color:  #29244d;
  text-align: justify;
  border-bottom: 2px double rgba(0, 0, 0, 0.6);
  background-color: rgb(221, 220, 224);
  padding: 4px;
}

.hov{
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hov:hover{
  transform: scale(1.15);
}

.center{
  margin:auto;
  display:block;
  padding: 3px;
  max-width: 95%;
}

.pc-only{
  position: absolute;
}

hr{
  border-top: 2px dotted black;
  border-bottom: none;
}

/*ПАРАМЕТРЫ КОНТЕЙНЕРОВ*/

#main{
  width: 800px;
  left: 50%;
  margin-left: -420px;
  margin-top: 20px;
  margin-bottom: 30px;
  position: absolute;
  background-color: white;
  background-image: url("imgs/whtbrickwallbg.gif");
  background-size: 15%;
  background-blend-mode: luminosity;
  border-radius:15px;
  overflow: hidden;
  box-shadow: 1px 1px 5px rgb(0, 0, 0), 0 0 25px rgb(126, 126, 126), 0 0 5px rgb(57, 57, 57);;
}

.singular{
  width: 780px;
  height: fit-content;
  padding: 10px;
  margin-top: 35px;
  background-image: url("imgs/misc285.jpg");
  background-color: rgba(251, 247, 255);
  background-blend-mode: multiply;
  background-size: 20%;
  border: solid rgb(0, 0, 0);
  border-width: 3px 0px 3px 0px; 
}

.multi{
  display: flex;
  width: 826px;
  max-width: 826px;
  height: fit-content;
  margin-top: 15px;
  max-height: 295px;
}

.mm{
  background-image: url();
  padding: 10px;
  border-radius:15px;
  border: 3px solid rgb(0, 0, 0);
  background-color: rgb(114, 11, 216);
}

.button{
  width:16%;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-right:2px;
}

.button:hover{
  transform: scale(1.15);
  box-shadow: 0 0 5px black;
}

/*ОПТИМИЗАЦИЯ ПОД ДРУГИЕ МОНИТОРЫ.......... UGH*/

@media only screen and (max-width: 600px){
  #main{
    width: 99%;
    margin-left: 0px;
    left: 0%;
    position: relative;
    margin-top: 0px;
    margin-left:auto;
    margin-right: auto;
  }
  .multi{
    display: block;
    width: 99%;
    margin-left:auto;
    margin-right: auto;
    max-height: fit-content;
  }
  .singular{
    width: inherit;
  }
  .mm{
    width: 500px;
    margin-bottom: 5px;
  }
  h1:hover{
    letter-spacing: 0px;
  }
  h1{
    font-size: 1.6em;
  }
  .button{
    width: 23%;
  }
  .pc-only{
    display: none;
  }
}

@media only screen and (min-width: 600px) and (max-width: 900px){
  #main{
    left: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 780px;;
  }
}