h1 {
  font-size: 50px;
    }

h2 {
  
  font-size: 20px;
  
 } 

 body {
   background-image: url(https://github.com/KesAlov/kesalov.github.com/raw/main/2b7d6127c7224eef9420368f22a93854.jpg);
   color: white;
  } 

.terminal {

    animation: blink 0.5s ease-in-out infinite alternate;

    display: inline-block;

}

@keyframes blink {

    0% { color: transparent; }

    50%, 100% { color: #dddd77; }

}

 
box {
  
  display: block;

  backround-image: none;

  

  backround-color: #f5f5f5;

   

   border-color: #ffffff;

   

   border: 2px solid #fff; 

   
   
  
  
  

  
  
  
  
  
 } 

#okno {

        width: 300px;

        height: 50px;

        text-align: center;

        padding: 15px;

        border: 3px solid #0000cc;

        border-radius: 10px;

        color: #0000cc;

        display: none;

        position: absolute;

        top: 0;

        right: 0;

        bottom: 0;

        left: 0;

        margin: auto;

      }

      #okno:target {display: block;}

      .close {

        display: inline-block;

        border: 1px solid #0000cc;

        color: #0000cc;

        padding: 0 12px;

        margin: 10px;

        text-decoration: none;

        background: #f2f2f2;

        font-size: 14pt;

        cursor:pointer;

      }


  button {
    
    background-color: #4CAF50; /* Green */

    border: 2px solid #000;
    border-color: #000000;
    border-radius: 10px;
	  
	 
	  
	  
	  

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 15px;
    
   } 

.submit {

    

    background-color: red; /* Green */

    border: 2px solid #000;

    border-color: black;

	  	 

	  

	  

	  

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 15px;

    

   } 
   
   

.pouring {

	font-size: 40px;

	line-height: 50px;

	font-family: Verdana, sans-serif;

	font-weight: 900;

	position: relative;

	background: black;

	overflow: hidden;

	text-transform: uppercase;

	text-align: center;

}

.pouring:before {

	content: '';

	position: absolute;

	filter: blur(10px);

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	mix-blend-mode: screen;

	background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #000000 1em, blue 50%), repeating-linear-gradient(45deg, blue, blue 1em, green 1em, green 50%);

	background-size: 3em 3em, 2em 2em;

	animation-name: ani;

	animation-duration: 10s;

	animation-timing-function: linear;

	animation-iteration-count: infinite;

	animation-direction: alternate;

}

@keyframes ani {

	from {

		background-position: 0 0;

	}

	to {

		background-position: 100% 0;

	}

}

@media (max-width:690px) {	

	.pouring {font-size: 20px;}	

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

.pouring {

    font-size: 40px;

    line-height: 50px;

    font-family: Verdana, sans-serif;

    font-weight: 900;

    position: relative;

    background: black;

    overflow: hidden;

    text-transform: uppercase;

    text-align: center;

}

.pouring:before {

    content: '';

    position: absolute;

    filter: blur(10px);

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    mix-blend-mode: screen;

    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #000000 1em, blue 50%), repeating-linear-gradient(45deg, blue, blue 1em, green 1em, green 50%);

    background-size: 3em 3em, 2em 2em;

    animation-name: ani;

    animation-duration: 10s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

    animation-direction: alternate;

}

@keyframes ani {

    from {

        background-position: 0 0;

    }

    to {

        background-position: 100% 0;

    }

}

@media (max-width:690px) {    

    .pouring {font-size: 20px;}    

}

.linear-wipe {



  

  background: linear-gradient(to right, #FFF 20%, #FF0 40%, #FF0 60%, #FFF 80%);

  background-size: 200% auto;

  

  color: #000;

  background-clip: text;

  text-fill-color: transparent;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  

  animation: shine 1s linear infinite;

  @keyframes shine {

    to {

      background-position: 200% center;

    }

  }

}

infobox {
	
border: 2px solid #0cf;
border-color: blue;
display: block;
color: #0cf;
background-color: light-blue;
} 

dontbox {
border: 2px solid red;
border-color: red;
display: block;
color: red;
background-color: black-red;
} 

warningbox {
border: 2px solid yellow;
border-color: yellow;
display: block;
color: yellow;
background-color: orange;
} 

toolbar {
	backround-color: grey;
	
	} 
	
	/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
	

video {
	
border:2px solid blue;
	
backround-color: green;

} 

video::-webkit-media-controls-play-button {
  background-color: #34c924;
  border-radius: 50%;
}

video::-webkit-media-controls-timeline {
  background-color: cyan;
  padding-bottom: 0;
  margin-bottom: 20px;
}

.controls button {
  backround-color: green;
}