header {
	padding: 10px 25px;
	background-color: #55aa99;
	color: rgb(252, 253, 253);
	font-size: 1rem;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	width: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
	text-align: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background-color: #FFFAF0;
}
  
main {
	margin: 30px;
}

.intro-theorie {
    font-size: 1.3rem;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-align: justify; 
	padding: 20px;
	margin: auto;
	size: fit-content;
	max-width: 820px;  
}

.start-button{
    background: #6bb8cb;
    background-image: -webkit-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: -moz-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: -ms-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: -o-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: linear-gradient(to bottom, #6bb8cb, #2980b9);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
    font-size: 1.3rem;
    padding: 15px 40px 14px 40px;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    margin-bottom: 20px;
}

.start-button:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #88d4ed, #3498db);
    background-image: -moz-linear-gradient(top, #88d4ed, #3498db);
    background-image: -ms-linear-gradient(top, #88d4ed, #3498db);
    background-image: -o-linear-gradient(top, #88d4ed, #3498db);
    background-image: linear-gradient(to bottom, #88d4ed, #3498db);
    text-decoration: none;
}
 
.instruction-text {
	font-size: 1.5rem;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-align: justify; 
	border-radius: 10px;
	background-color: #55aa997d;
	padding: 20px;
	margin: auto;
	size: fit-content;
	border-bottom: 4px #274d48 solid;
	border-right: 4px #2e5952 solid;
	max-width: 820px;
} 

.item {
    display: inline-block;
    width: 150px;
    border: 1px solid rgb(4, 2, 0);
    background-color: rgb(255, 255, 255);
    padding: 10px 15px;
    font-weight: bold;
    font-size: 16px;
    margin: 20px;
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 10px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.clear {
    clear: both;
    overflow: hidden;
}
  
.figures-opposition-container {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: 4px #274d48 solid;
    background-color: rgb(236, 203, 235);
    color: #a152a1;
    font-size: 14px;
    padding: 10px 15px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.figures-insistance-container {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: 4px #274d48 solid;
    background-color: #a7f5b4;
    color: rgb(52, 122, 52);
    font-size: 14px;
    padding: 10px 15px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
  
.figures-amplification-container {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: 4px #274d48 solid;
    background-color: #f7d49f;
    color: rgb(192, 132, 3);
    font-size: 14px;
    padding: 10px 15px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
  
.figures-attenuation-omission-container {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: 4px #274d48 solid;
    background-color: #f1f0a6;
    color: rgb(151, 156, 26);
    font-size: 14px;
    padding: 10px 15px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.figures-analogie-container {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: 4px #274d48 solid;
    background-color: #f4b8bc;
    color: rgb(170, 46, 46);
    font-size: 14px;
    padding: 10px 15px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
} 

.figures-substitution-container {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: 4px #274d48 solid;
    background-color: #9fe1f7;
    color: rgb(29, 111, 132);
    font-size: 14px;
    padding: 10px 15px;
    margin: 20px;
    text-align: center;
    border-radius: 10px;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
} 

.refresh-button{
	background: #6bb8cb;
    background-image: -webkit-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: -moz-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: -ms-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: -o-linear-gradient(top, #6bb8cb, #2980b9);
    background-image: linear-gradient(to bottom, #6bb8cb, #2980b9);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: #ffffff;
    font-size: 1.3rem;
    padding: 15px 40px 14px 40px;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    margin-bottom: 20px;
}

.refresh-button:hover {
	background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #88d4ed, #3498db);
    background-image: -moz-linear-gradient(top, #88d4ed, #3498db);
    background-image: -ms-linear-gradient(top, #88d4ed, #3498db);
    background-image: -o-linear-gradient(top, #88d4ed, #3498db);
    background-image: linear-gradient(to bottom, #88d4ed, #3498db);
    text-decoration: none;
}

.theory-conclusion {
    font-size: 1.5rem;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-align: justify; 
	border-radius: 10px;
	background-color: #55aa997d;
	padding: 20px;
	margin: auto;
	size: fit-content;
	border-bottom: 4px #274d48 solid;
	border-right: 4px #2e5952 solid;
	max-width: 820px;
    padding-top: 1px;
    padding-bottom: 1px;
} 
.theory-finalDefinition {
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	text-align: justify; 
    padding: 20px;
	margin: auto;
	size: fit-content;
	border: 4px #274d48 solid;
	max-width: 820px;
    font-size: 1.3rem;
}

footer {
	background-color: #93c9be;
	padding: 15px 30px;
	border-top: 1px solid #63c5b2;
	margin-top: 20px;
}
