body {
background: #fff;
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
background-image: "images/wallpaper.jpg";
font-family: sans-serif;
color: #fff;
}
.horizontal-scroll-wrapper {
width: 100px;
height: 100px;
}
.dropdown {
display: inline-block;
position: relative;
background-color: rgb(157, 186, 132);
}
.dropdown-options {
display: none;
position: absolute;
overflow: auto;
background-color: rgb(157, 186, 132);
}
.dropdown:hover .dropdown-options {
display: block;
background-color: rgb(157, 186, 132);
}
a{
text-decoration: none;
}
.f{
border: 1px rgb(157, 186, 132);
padding: 10px;
font-size: 50px;
position: fixed;
left: 20px;
width: 400px;
}
.switch-btn {
display: inline-block;
width: 72px; /* ширина */
height: 38px; /* высота */
border-radius: 19px; /* радиус скругления */
background: #ED6B81; /* цвет фона */
z-index: 0;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
position: relative;
transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
content: "";
height: 32px; /* высота кнопки */
width: 32px; /* ширина кнопки */
border-radius: 17px;
background: #fff; /* цвет кнопки */
top: 3px; /* положение кнопки по вертикали относительно основы */
left: 3px; /* положение кнопки по горизонтали относительно основы */
transition-duration: 300ms; /* анимация */
position: absolute;
z-index: 1;
}
.switch-on {
background: #63707f;
}
.switch-on::after {
left: 37px;
}
.header1{
white-space: pre-wrap;
background: #9DBA84; /* Цвет фона */
padding: 10px;
position: center;
border-radius: 10px;
display: flex;
align-content: center;
align-items: center;
left: 20px;
width: 50%;
margin: 0 auto;
left: 400px;
width: 500px;
text-align: center;
font-size: 30px;
}
.downl {
display: flex;
left: 400px;
border-radius: 4px;
text-align: center;
white-space: normal;
background: #9DBA84;
font-size: 30px;
}
.down2 {
display: flex;
left: 400px;
border-radius: 4px;
align-content: center;
text-align: center;
background: #9DBA84;
font-size: 30px;
}
form {
padding: 3em;
height: 600px;
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
position: relative;
background: #D48A74;
transition: all 0.2s ease-in-out;
font-size: 30px;
}
.accountblock{
background: #D48A74; /* Цвет фона */
padding: 10px;
position: sticky;
top: 0px;
font-size: 30px;
border-color: #636b7f;
border-style: solid;
white-space: normal;
border-radius: 20px;
text-decoration: none;
}
.startblock{
background: #D48A74; /* Цвет фона */
padding: 10px;
font-size: 30px;
border-color: #636b7f;
border-style: solid;
left:50%;
border-radius: 20px;
width:10%;
text-decoration: none;
}
.notaccountblock{
background: #D48A74; /* Цвет фона */
padding: 10px;
position: sticky;
border-radius: 10px;
text-decoration: none;
border-color: #636b7f;
text-decoration: none;
border-style: solid;
top: 0px;
font-size: 30px;
white-space: normal;
}
.music {
background: #9DBA84; /* Цвет фона */
padding: 10px;
position: center;
border-radius: 10px;
align-items: center;
border-color: #636b7f;
border-style: solid;
left: 20px;
margin: 0 auto;
left: 400px;
text-align: center;
font-size: 30px;
}
.adminfeatures {
font-size: 20px;
background-color: #636b7f;
float: right;
font-size: 30px;
}
.links {
font-size: 30px;
}
.constil p{
display:inline;
}
.menu {
background: #9DBA84;
float: right;
}
.text1{
background: #9DBA84; /* Цвет фона */
padding: 10px;
position: center;
align-items: center;
border-radius: 10px;
border-color: #636b7f;
border-style: solid;
left: 20px;
margin: 0 auto;
left: 400px;
}
.joke{
background: #9DBA84; /* Цвет фона */
padding: 10px;
position: center;
border-radius: 10px;
border-color: #636b7f;
border-style: solid;
border-width: 3px;
align-items: center;
left: 20px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
left: 400px;
color: #fff;
text-align: center;
}
.accordion-body{
background: #9DBA84;
font-family: sans-serif;
color: #fff;
}
.accordion-button{
border: 4px double black;
background: #9DBA84;
font-family: sans-serif;
color: #fff;
}
.accordion-item{
border: 4px double black;
background: #9DBA84;
font-family: sans-serif;
color: #fff;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1 {
font-family: sans-serif;
font-size: 30px;
color : #ffff;
text-align: center;
}
h3{
font-family: sans-serif;
color : #ffff;
text-align: center;
}
a {
color: #fff;
font-family: sans-serif;
}
td {
color: #fff;
font-family: sans-serif;
}
table{
border: 4px solid rgb(255, 255, 255);
border-radius: 10px;
}
p{color: #fff;}
th, td {
border: 3px solid rgb(95, 95, 95);
border-collapse: collapse;
}
th {
color: #fff;
font-family: sans-serif;
}
p {
font-family: sans-serif;
font-size: 40px;
color : #ffff;
text-align: center;
}
li {
font-family: sans-serif;
color: #fff;
}
.text1 img {
width: 30%;
height: auto;
border-radius:10px;
border-color: #636b7f;
}
.joke img {
width: 80%;
border-radius: 10px;
border-color: #636b7f;
height: auto;
}
input {
box-shadow: inset -4px -4px 4px -3px rgba(255, 255, 255, 0.15), inset 4px 4px 4px -2px rgba(0, 0, 0, 0.2);
background: transparent;
border: none;
color: rgb(216, 74, 133);
padding: 1em 2em;
border-radius: 0.4em;
}
textarea{
box-shadow: inset -4px -4px 4px -3px rgba(255, 255, 255, 0.15), inset 4px 4px 4px -2px rgba(0, 0, 0, 0.2);
background: transparent;
border: none;
color: rgb(216, 74, 133);
padding: 1em 2em;
border-radius: 0.4em;
}
@media (min-width: 1000px){
.music {
width: 50%;
font-size: 20px;
}
.accountblock{
float: right;
font-size: 20px;
}
p{
font-size: 20px;
}
.notaccountblock{
float: left;
font-size: 20px;
}
.text1{
width: 70%;
color: #fff;
font-size: 20px;
}
.joke{
width: 50%;
color: #fff;
font-size: 20px;
}
.links{
float: right;
}
}
@media (max-width: 1000px){
.button {
display: block;
width: 300px;
height: 50px;
background: #D48A74;
padding: 10px;
text-align: center;
position: sticky;
border-color: #636b7f;
border-radius: 5px;
text-decoration: none;
color: white;
font-weight: bold;
line-height: 25px;
font-size: 20px;
}
}