pages/style.css

/* Since this site is about teaching web concepts, even this file is a learning
 * opportunity. */

body {
	color: white;
	background-color: #1f1f1f;
	background-image: url("bg.png");
	margin-bottom: 200px ;
    	font-family: monospace;
font-size: 17px;
}

h1 {
	text-align: center ;
	color: lime ;
	font-size: 24pt ;
	border-bottom: none;
	max-width: 700px ;
	margin: 1em auto ;
	background: linear-gradient(to right, #00ff00, #2ab300,#5fff20, #02c543);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

header h1 {
	font-size: 40px ;
}

h2 {
	text-align: center ;
	color: deeppink ;
	font-size: 24pt ;
	border-bottom: none;
	max-width: 800px ;
	margin: 1em auto ;
	background: linear-gradient(to right, #fd4229, #ff7316,#e9493b, #df5431);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

h3 {
    color: gold;
}

.white {
	color: lime;
}

.lime
	{
		color: white;
	}

/* "a" is for links. */
a {
    color: lightblue ;

}


/* The "hover" option, which can be used with pretty much anything, allows you
 * to set different settings if someone hovers over something with their mouse.
 * */
a:hover {
    color: white ;
}

dt {
	font-weight: bold ;
}

/* code and pre are for formatting monospace text commands. Use code generally,
 * but pre is for separate code blocks. pre is also sensitive to whitespace,
 * unlike most of HTML. */
code {
	color: lime ;
	border-radius: 5px ;
}
pre {
	background: #111222 ;
	border: 1px solid lime ;
	border-radius: 20px ;
	padding: 1em ;
	white-space: pre-wrap;
	overflow-wrap: break-word ;
	max-width: 600px ;
	margin: auto ;
}

.wide { max-width: inherit ; }

p img, li img, h1 img, h2 img, h3 img, h4 img, dt img {
	vertical-align: middle;
	max-width: 1em;
	max-height: 1em;
	border: solid 0px black ;
	display: inline ;
}

img {
	max-width: 90% ;
	margin: auto ;
	display: block ;
	border: none ;
}
.titleimg {
	border: none ;
	height: 150px ;
}
strong {
	color: white ;
}

footer {
	text-align: center ;
	font-variant: small-caps ;
	clear: both ;
	padding: 2em 0 ;
}
footer li {
	display: inline-block ;
	padding: 0 .5em ;
	font-size: x-large ;
}
footer li:hover {
	background: lightblue ;
}

nav { font-size: small ;}

footer { font-size: large ; }

nav ul, footer ul, #taglist {
	padding: 0;
}

main {
	margin: auto ;
	font-family: monospace;
}

/* asides are used for minor tangential notes. I have them shrunk down in
 * softer colors in a box with soft corners (border-radius). */

aside {
    border: solid 1px black ;
    border-radius: 20px ;
    padding: 0 1em 0 1em ;
    font-size: small ;
}

aside p {
    color: gray ;
}

aside code {
    color: green ;
}

/* .callout here is refencing any aside given the class name callout
 * An example being: <aside class="callout"> */
aside.callout  {
    border: solid 1px orange;
}

.cnp {
	width: 100% ;

}

.buttons {
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	
	
}

.buttons img {
	width: 88px;
	height: 31px;
		display: inline-block ;
    
}
/* This "@media" block defines rules that will only be applied when the minimum
 * width of the screen is 55em or greater. In essence, they are settings that
 * only apply on normal weide screens, but *not* phones and low res monitors.
 * Since we have more room on widescreens, we change a couple things. */

@media (min-width: 55em) {

    aside {
    margin: 0 30px 0 30px;
    }

	.resright, .disappear {
		display: block ;
		float: right;
		padding: 20px ;
		clear: both ;
		max-height: 400px ;
		max-width: 300px ;
	}

    header { max-width: 900px ; margin: auto;}
	main { max-width: 850px ; }
}


/*Ak by robilo nieco problemy, zmen none na 600px*/
.ll {
	font-size: large ;
	line-height: 1.3em ;
	max-width: none;
	margin: auto ;
}

.ll dd {
	display: inline ;
}

.ll dt {
	display: inline-block ;
	width: 6em ;
}

.ll dd:after {
	display:block;
	content: '' ;
}


/*totok je to horne menucko*/
#tagcloud {
	clear: both ;
	padding: 0;
	border-radius: 10px ;
	text-align: center ;
	margin: 0 auto ;
	border: solid 2px ;
	border-style: solid ;
  border-color: lime;
	list-style: none ;
    
}

#tagcloud li {
	display: inline-block ;
    
}

#tagcloud a {
	display: block ;
	width: auto ;
	background: #4D3C5A;
	border-radius: 10px ;
	padding: .10em ;
	margin: 2px ;
    text-decoration: none;
    color: lime;
	
}

#tagcloud a:hover {
	background: #4D3C5A ;
	box-shadow: 2px 2px black ;
/*totok je pozadie tych tlacitok ked nad nim hovernes*/
    background: #cf23cf  ;
}

.kontakt {
	text-align: center;
	}

video {
margin: auto ;
display: block ;
max-width: 90%;

}


/*pre mobili zobrazenie. co kolvek za tymto tagom je specificke pre mobili*/

@media (max-width: 30em) {
body {
	color: white;
	background-color: #1f1f1f;
	background-image: url("bg.png");
	margin-bottom: 200px ;
    	font-family: monospace;
/*velkost fontu pre mobili*/
font-size: 15px;
}
video {
	margin: auto ;
	display: block ;
	max-width: 90%;
	
	}
}
@media (max-width: 30em) {

h2 {
	text-align: center ;
	color: deeppink ;
	font-size: 20pt ;
	border-bottom: none;
	max-width: 800px ;
	margin: 1em auto ;
	background: linear-gradient(to right, #fd4229, #ff7316,#e9493b, #df5431);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;

#tagcloud {
	clear: both ;
	padding: 0;
	border-radius: 10px ;
	text-align: center ;
	margin: 0 auto ;
	border: solid 2px ;
	border-style: solid ;
  border-color: lime;
	list-style: none ;
    
}