:root {
  /* Colors */
  --pink: #f6adcd;
  --green: #60bc56;
  --blue: #008dd0;
  --white: #fff;
  --dark-pink: #bd2072;
  --dark-blue: #17314e;
  --black: #17314e;
  /* Border radius */
  --border-radius: 10px;
  /* Font */
  --font-h1: 45px;
  --font-h4: 24px;
  --paragraph: 18px;
  --paragraph-small: 12px;
  --font-regular: "EuclidCircularRegular";
  --font-medium: "EuclidCircularMedium";
  --font-bold: "EuclidCircularBold";
}
@font-face {
  font-family: EuclidCircularBold;
  src: url("./fonts/Euclid\ Circular\ A\ Bold.ttf");
}
@font-face {
  font-family: EuclidCircularMedium;
  src: url("./fonts/Euclid\ Circular\ A\ Medium.ttf");
}
@font-face {
  font-family: EuclidCircularRegular;
  src: url("./fonts/Euclid\ Circular\ A\ Regular.ttf");
}

* {
  box-sizing: border-box;
  margin: 0;
  color: var(--black);
}

body {
  background-color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  position: relative;
}

.triangles {
  position: absolute;
  right: 0;
  top: 0;
  width: 80vw;
  z-index: -1;
  height: auto;
}

@media only screen and (min-width: 1080px) {
  .triangles {
    height: 80dvh;
    width: unset;
  }
}

main {
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px;
}

h1 {
  font-size: var(--font-h1);
  font-family: var(--font-bold);
}
h4 {
  font-size: var(--font-h4);
  font-family: var(--font-medium);
}
p {
  font-family: var(--font-regular);
}

.heading {
  text-align: center;
  color: var(--white);
}

.description {
  font-size: var(--paragraph-small);
  text-align: center;
  line-height: 18px;
}

.buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

a {
  display: contents;
}
.button {
  padding: 20px;
  min-height: 60px;
  background-color: var(--dark-blue);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  font-size: var(--paragraph);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: scale 0.2s ease-in-out;
}
.button p,
.button i {
  color: var(--white);
}
.button:hover {
  transform: scale(1.01);
}
.button:active {
  transform: scale(0.98);
}

.button.white {
  background-color: var(--white);
  color: var(--dark-blue);
}
.button.white p,
.button.white i {
  background-color: var(--white);
  color: var(--dark-blue);
}

.footer {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  row-gap: 30px;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.footer .fontys-logo {
  width: 100%;
  max-width: 100px;
  height: auto;
}

.studio-tast {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  opacity: 0.8;
}
.studio-tast a {
  text-decoration: none;
}
.studio-tast p {
  font-size: 12px;
  color: var(--white);
}
.studio-tast img {
  width: 85px;
  height: auto;
  margin: 0 15px 2px 10px;
}

@media only screen and (min-width: 1025px) {
  .buttons-wrapper {
    display: none;
  }
}

.desktop-download {
  display: none;
  flex-direction: column;
}
@media only screen and (min-width: 1025px) {
  .desktop-download {
    display: flex;
  }
}

.language-button-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}