mokhov

.a {
   border: 2px solid red;
   padding: 5px;
   position: relative;
}


textarea:before {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;

mokhov

.wrapper {
	 display: grid;
	 background: gray;
	 display: grid;
	 width: 200%;
	 grid-template-columns: 1fr 1fr;
}

input:checked + .wrapper {
}

mokhov

.wrapper {
	 display: grid;
	 background: gray;
	 display: grid;
	 width: 200%;
	 grid-template-columns: 1fr 1fr;
}

input:checked + .wrapper {
}

mokhov

body {
font-family: Tahoma;
}

mokhov

section {
	display: flex;
	width: 750px;
}

.first-letter {
	width: 250px;
    font: 10px "CloisterBlack";
    font-weight: bold;
    margin-top: 10px;

mokhov

div {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	position: absolute;
	top: 200px;
	left: 400px;
	background: black;
}

mokhov

.layout {        
	display: grid;        
	grid-template-columns: 100px 1fr 100px 2fr 100px;        
	grid-template-rows: auto 50px 100px auto;        
	grid-template-areas:  "a a a a a"        
					      "c b b b d"
					      "e b b b d"
					      "f f f g g";        
}

mokhov

p {
	color: green;
}

mokhov

a { color: red }
span { color: blue }
p { color: purple }
p p { color: green }
* { color: yellow }

mokhov

div {    
	font-size: 100px;
	font-family: ComicSans,    
	Yandex Sans Logotype;    
	color: black;    
	bem: true;
	
.yandex {
	color: yellow;
}