html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
    min-height: 100vh;
    min-height: 100lvh;
    display: flex;
    flex-direction: column;
    background-color: #f6f6f6;

}

header, footer {
    background-color: #c1c1c1;
    padding-block: 1em;
    color: white;
}

footer {
    margin-top: auto;
}

a {
    color: white;
    /* text-decoration: none; */
}

.container {
    width: min(1200px, calc(100% - 4rem));
    margin-inline: auto;
    padding-inline: 1em
}


.content {
    background-color: #ffffff;
    flex-grow: 1;
}

span.spacer {
    flex-grow: 1;
}

span.bold {
    font-weight: 700;
}

.h-flex {
    display: flex;
    flex-direction: row;
}

.v-flex {
    display: flex;
    flex-direction: column;
}

.flex-space {
    justify-content: space-between;
}

.flex-item-center {
    align-items: center;
}

.video-tutorials h2 {
    font-size: 1.07em; 
}

.video-tutorials iframe {
    width:100%;
    aspect-ratio: 16/9;
}

.video-container {
    margin-top: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}

.icon-button {
	background-color: #84a42f;
	color: #fff !important;
	padding-inline: 12px;
  	border: 1px solid #ececec;
	width: fit-content;
  	display: flex;
 	flex-wrap: no-wrap;
  	align-content: center;
	align-items: center;
	text-transform: uppercase;
    text-decoration: none;
	font-weight: 700;
	line-height:47px;
	background: linear-gradient(110deg, #23da4e 0%, #23da4e calc(12% - 1px), #548687 12%);
	margin-block: 2em;
	margin-block-end: 4em;
}

.icon-button img {
    width: 1.3em;
    margin-right: 20px;
}

.icon-button:hover {
    background: #ec9f2a;
}

.icon-button img:nth-of-type(2) {
    width: 0.8em;
    margin-right: unset;
    margin-left: 0.6em;
    margin-top: -5px;
}