:root {
	/* Colors */
	--primary-button: #4e50da;
	--primary-button-hover: #4338CA;
	--secondary-button: #FFFFFF;
	--secondary-button-hover: #F1F5F9;
	--text-color: #000000;
	--text-color-light: rgba(0, 0, 0, 0.60);
	--main-background: #F5F5F5;
	--header-background: #D8D8D8;
	--footer-background: #EBEBEB;
	--block-background: #FFFFFF;
	--popup-background: #F9F9F9;
	--popup-background-hover: #EFEFEF;
	--progress-done-color: #007e2a;
	--progress-failed-color: #da0000;
	--progress-ongoing-color: #53acff;
	--progress-todo-color: #D9D9D9;
	--border-color: #DDDDDD;
	--favorite-active-color: #BABABA;
	/* Shadows */
	--block-shadow: 6px 8px 15px rgba(0, 0, 0, 0.25);
	--button-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.25);
	/* Font size */
	--text-title: 36px;
	--text-subtitle: 28px;
	--text-normal: 20px;
	--text-button: 16px;
	--text-small: 12px;
	/* Border radius */
	--general-border-radius: 8px;
	--inside-block-radius: 6px;
	--input-radius: 4px;
	/* Border style */
	--general-border: 1px solid var(--border-color);
}

body {
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.all {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    display: grid;
    grid-template-columns: 250px 1fr;
    flex-grow: 1; 

    @media (max-width: 1440px) {
        grid-template-columns: 200px 1fr;
    }

    @media (max-width: 1100px) {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

}

.main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
    background-color: var(--main-background);
}

.page-title {
	position: absolute;
	top: 1%;
	right: 40%;
}

.rectangle-content {
	display: flex;
	flex-direction: column;
	background-color: var(--block-background);
	border-radius: var(--general-border-radius);
	box-shadow: var(--block-shadow);
	padding: 24px;
}

.logs {
	background-color: var(--main-background);
	color: var(--text-color);
	padding: 16px 40px;
	height: 400px;
	overflow-y: auto;
	border-radius: 0px 0px 8px 8px;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: monospace;

	pre {
		white-space: pre-wrap;
		word-break: break-word;
	}

	p {
		margin-bottom: 8px;
	}
}

h1 {
	font-size: var(--text-title);

	@media (max-width: 1270px) {
		font-size: 32px;
	}

	@media (max-width: 1100px) {
		font-size: 30px;
	}
}

h2 {
	font-size: var(--text-subtitle);
}

h3 {
	font-size: 24px;
}

.img-flow {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	
	.flow {
		max-width: 1400px;
		width: 80%;
		margin: 32px 0;
		border-radius: 8px;
	}
}

.btn {
	display: inline-flex;
	padding: 12px 24px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: var(--general-border-radius);
	border: var(--general-border);
	background-color: var(--secondary-button);
	color: var(--text-color);
	font-size: var(--text-button);
	text-decoration: none;

	@media (max-width: 1270px) {
		padding: 10px 20px;
		font-size: 14px;
	}

	@media (max-width: 1100px) {
		padding: 8px 18px;
		font-size: 14px;
	}

	svg {

		@media (max-width: 1270px) {
			width: 20px;
			height: 20px;
		}
	
		@media (max-width: 1100px) {
			width: 18px;
			height: 18px;
		}
	}

	&:hover{
		background-color: var(--secondary-button-hover);
	}
}

a {
  color: inherit;           
  text-decoration: none;    
}