@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
body {
    margin: 0;
    color: #003541;
    text-align: center;
    font-family: 'Comfortaa', cursive;
    box-shadow: inset 0 0 2000px 2000px rgb(255 255 255 / 90%);
    background-repeat: no-repeat;
    min-height: 100vh;
}
h1 {
    color: black;
    margin: 0 0 1rem;
}
p {
    font-size: 1rem;
    line-height: 1.6rem;
    color: #003541d4;
}
.header {
    padding-top: 2.5rem;
    font-size: 2.5rem;
    text-shadow: 0 1px 15px white;
}
.header span {
    font-weight: 700;
    text-underline-position: under;
    text-decoration: underline;
	color: #e38800
}
.header hr {
    border: 0.1px solid #00000052;
    max-width: 900px;
}
.header p {
    font-size: 1rem;
    font-weight: 300;
    margin: 1;
    color: #00000099;
}
.header a {
    color: black;
}
.mainSpace {
    text-align: -webkit-center;
    margin: auto;
    max-width: 1000px;
}
.buttonsArea {
    max-width: 900px;
    margin: 0 0 2rem 0;
    display: inline-block;
}
.firstButton {
    color: white;
    font-weight: 700;
    text-decoration: none;
    padding: 1.7rem 1.5rem 1.5rem 1.5rem;
    text-shadow: 0 1px 2px #0000004d;
    background: linear-gradient(0deg, #009307c4, #00ea6a);
    display: block;
    max-width: 500px;
    margin: 1rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    box-shadow: 0 3px 5px #2d37093b;
    border-bottom: 3px solid #394e008f;
    text-transform: uppercase;
}
.firstButton:hover {
    text-decoration: none;
    background: linear-gradient(0deg, #00a808c4, #00dc64);
}
.otherButtons {
    color: white;
    font-weight: 700;
    text-decoration: none;
    padding: 1.3rem 1.5rem 1.1rem 1.5rem;
    text-shadow: 0 1px 2px #0000004d;
    border-bottom: 3px solid #411f00c4;
    background: linear-gradient(0deg, #bf5d00, #ff990f);
    min-width: 215px;
    margin: 0.4rem 0.5rem;
    border-radius: 1rem;
    font-size: 1.2rem;
    box-shadow: 0 3px 5px #3717093b;
    text-transform: uppercase;
    display: inline-block;
}
.otherButtons:hover {
    text-decoration: none;
    border-bottom: 3px solid #823e00c4;
    background: linear-gradient(0deg, #cc6300, #f4920e);
}
.contentArea {
    background: white;
    max-width: 1000px;
    border-radius: 1rem;
    padding: 2rem;
    border-bottom: 3px solid #578190cc;
    text-align: left;
    box-shadow: 0 5px 5px #26868a3b;
    text-align: center;
}
.contentArea p {
    text-align: justify;
}
.contentArea img {
    max-width: 500px;
    border-radius: 1rem;
    border-bottom: 3px solid #134252d6;
    box-shadow: 0 5px 10px #09334373;
    margin-bottom: 0.5rem;
}
.linksArea {
    background: white;
    max-width: 1000px;
    border-radius: 1rem;
    padding: 2rem;
    border-bottom: 3px solid #bf6d2ecc;
    text-align: left;
    box-shadow: 0 5px 5px #8a52263b;
    margin-top: 2rem;
}
.linksArea ul {
    list-style: circle;
    list-style-position: inside;
    padding: 0 2rem 0 2rem;
}
.linksArea li {
    margin-bottom: 1rem;
    padding: 0.2rem 0 1rem 0;
    border-bottom: 1px solid #60442621;
}
.myLinks {
    text-decoration: none;
    color: #c13e00;
    font-weight: 700;
}
.myLinks:hover {
    text-decoration: underline;
    color: #ff5200;
}
.footer {
    padding: 1rem 0 0.5rem 0;
    margin-top: 3rem;
    width: 100%;
    background: linear-gradient(rgb(195, 219, 224 / 32%), rgb(77 102 111 / 35%));
    border-top: 2px solid #001e2ead;
    box-shadow: inset 0 10px 100px #ffffffb0;
}
.footer p {
    font-size: 0.9rem;
}
.footer a {
    font-size: 0.9rem;
    text-decoration: none;
    color: #8f2e00;
}
.footer a:hover {
    text-decoration: underline;
    color: #bd5625;
}
.myLinkDetails {
    color: #0000009c;
}
@media screen and (max-width: 768px) {
	.myLinkDetails {
		display: none;
   }
   .contentArea img {
        max-width: 100%;
    }
    .firstButton {
        padding: 1.7rem 1rem 1.5rem 1rem;
        font-size: 1.2rem;
    }
}
.form-group {
	position: relative;
	margin-bottom: 1.25rem;
}

.form-group.has-error.has-danger {
	margin-bottom: 0.625rem;
}

.form-group.has-error.has-danger .help-block.with-errors ul {
	margin-top: 0.375rem;
}

.label-control {
	position: absolute;
	top: 0.87rem;
	left: 1.375rem;
	color: #777;
	opacity: 1;
	font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
	cursor: text;
	transition: all 0.2s ease;
}

/* IE10+ hack to solve lower label text position compared to the rest of the browsers */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
	.label-control {
		top: 0.9375rem;
	}
}

.form-control-input:focus + .label-control,
.form-control-input.notEmpty + .label-control,
.form-control-textarea:focus + .label-control,
.form-control-textarea.notEmpty + .label-control {
	top: 0.125rem;
	opacity: 1;
	font-size: 0.75rem;
	font-weight: 700;
}

.form-control-input,
.form-control-select {
	display: block; /* needed for proper display of the label in Firefox, IE, Edge */
	width: 100%;
	padding-top: 1.0625rem;
	padding-bottom: 0.0625rem;
	padding-left: 1.3125rem;
	border: 1px solid #c4d8dc;
	border-radius: 0.25rem;
	background-color: #fff;
	color: #777;
	font: 400 0.875rem/1.875rem "Open Sans", sans-serif;
	transition: all 0.2s;
	-webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

.form-control-select {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	height: 3rem;
}