:root {
  --teal: #00777a; /* #1ca1a4; */
}

* {
    box-sizing: border-box;
}

html {
    background: #f0f0f0;
}

body {
    min-height: 1vh;
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 16px;
}

h1, h2 {
    letter-spacing: -0.02em;
    font-weight: 500;
    text-indent: -0.2vw;
}

#hero {
    border-radius: 0;
}

#hero-image-wrapper {
    position: absolute;
    top: -1vh;
    right: 0;
    width: 50vw;
    overflow: hidden;
}

#hero-image {
    width: 75vw;
}

#hero-content {
/*    width: 50%; */
    color: var(--teal);    
}

#hero-content a {
	color:var(--teal);
}

.card {
    border-radius: 0 0 5vw 5vw;
    box-shadow: 0 0.3vh 0.3vh rgba(0, 0, 0, 0.1),
								0 1.5vh 2.5vh rgba(0, 0, 0, 0.1);
    padding: 5vh 10vw 5vh 10vw;
}

.card h2 {
	display: flex;
}

.card .title {
	flex-grow:1;
}

.card-teal {
    background: var(--teal);
}

.card-manganese {
    background: #e52c58;
}

.card-white {
    background: #f0f0f0;
}

.card-white, .card-white h1, .card-white h2 {
    color: var(--teal);
}

.card-teal, .card-teal h1, .card-teal h2,
.card-manganese, .card-manganese h1, .card-manganese h2 {
    color: #f0f0f0;
}

.button-wrapper {
    text-align: center;
    padding: 10vh 0 0;
}

.button {
    border: 0;
    font-family: 'Manrope', sans-serif;
    color: #fff;
    font-weight: 600;
    border-radius: 100px;
    padding: 2vh clamp(10px, 20vw, 80px);
		text-decoration:none;
		display:inline-block;
}

.card-teal .button, .card-white .button {
    background: #e52c58;
}

.card-manganese .button {
    background: var(--teal);
}

.card-wrapper {
    padding-bottom: 6vh;
}

.card-wrapper-teal {
    background: var(--teal);
}

.card-wrapper-manganese {
    background: #e52c58;
}

.card-wrapper-white {
    background: #f0f0f0;
}

ul {
  column-count: 1;
}

ul.two-columns {
    column-count: 2;
    column-fill: balance;
}

li {
    font-weight: 400;
}

.clock-wrapper {
    display: inline-block;
    float: right;
    white-space: nowrap;
		padding-left:10px;
}

.footer {
	padding:0;
	display: grid;
	grid-template-columns: 65% 35%;
	align-items: center;
	padding-bottom:200px;
}

.footer-left {
    padding: 5vh 0 5vh 10vw;
}

.footer-right-content-wrapper {
	position: relative;
	background:url('redoval.svg') no-repeat;
	background-size:180%;
	height: 45vw;
	margin: 20px 0;
}

#footer-right-content {
  position: absolute;
	left:4vw;
	top: calc(50% - 17vw);
	float:left;
	text-align:right;	
}

#jannika {
	border-radius:100%;
	width:25vw;
	box-shadow: 0 1vw 0 rgba(0,0,0,0.05);
}

#flags {
	margin-top:1vw;
	display:inline-grid;
	grid-column-gap: 1vw;
	grid-template-columns: 1fr 1fr 1fr;
}

#flags img {
	border-radius:100%;
	box-shadow: 0 1vw 0 rgba(0,0,0,0.05);
	width: 5vw;
	height: 5vw;
}

body,button {
	line-height: 1.4;
  font-size: clamp(
    1.6rem,
    1.8vw,
    4rem
  );
}

h1,h2 {
	line-height: 1;
  font-size: clamp(
    2rem,
    3vw,
    6rem
  );
}

.clock {
  width: clamp(
    1.5rem,
    2.25vw,
    4.5rem
  );
  height: auto;
}

#logo {
  width: clamp(140px, 16vw, 400px);
  height: auto;
	margin: 8vw 0 10vw;
}

@media (max-width: 940px) {
	ul.two-columns {
	    column-count: 1;
	}
}