@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

:root {
	--main: #7362ab;
  --accent: #E15F35;
  --warn: #F9B153;
}

html, body {
	margin: 0;
}

.bg-main { background-color: var(--main); }
.bg-accent {	background-color: var(--accent) !important; }
.bg-warn {	background-color: var(--warn) !important; }
.text-main { color: var(--main); }
.text-accent { color: var(--accent); }
.text-warn { color: var(--warn); }
.border-main { border: solid 1em var(--main) !important; }
.border-accent { border: solid 1em var(--accent) !important; }
.border-warn { border: solid 1em var(--warn) !important; }

@font-face { font-family: "Visby Round Extra Light"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-ExtraLight.woff"); }
@font-face { font-family: "Visby Round Light"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-Light.woff"); }
@font-face { font-family: "Visby Round Regular"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-Regular.woff"); }
@font-face { font-family: "Visby Round Medium"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-Medium.woff"); }
@font-face { font-family: "Visby Round Demi Bold"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-DemiBold.woff"); }
@font-face { font-family: "Visby Round Bold"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-Bold.woff"); }
@font-face { font-family: "Visby Round Extra Bold"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-ExtraBold.woff"); }
@font-face { font-family: "Visby Round Heavy"; src: url("../assets/fonts/Visby-Round-www.Dfonts.org/Webfont/VisbyRoundCF-Heavy.woff"); }

.visby-extra-light { font-family: "Visby Round Extra Light"; }
.visby-light { font-family: "Visby Round Light"; }
.visby-regular { font-family: "Visby Round Regular"; }
.visby-medium { font-family: "Visby Round Medium"; }
.visby-demi-bold { font-family: "Visby Round Demi Bold"; }
.visby-bold { font-family: "Visby Round Bold"; }
.visby-extra-bold { font-family: "Visby Round Extra Bold"; }
.visby-heavy { font-family: "Visby Round Heavy"; }

/* // X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */

.first { 
  padding: 2em 0em 25em 0em;
  background-image: url("../assets/images/1st\ page\ background.svg");
  background-size: cover;
  background-position: bottom right;
}

.second {
  padding: 2em 0em 17em 0em;
  background-image: url("../assets/images/2nd\ page\ \(1\).svg");
  background-size: cover;
  background-position: bottom left;
}

.third {
  padding: 5em 0em 0em 0em;
  background-image: url("../assets/images/3rd\ page\ \(1\).svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.third > .bottom {
  margin-top: 5em;
}

.socials { font-size: 2em; }

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .first { 
    padding: 2em 0em 25em 0em;
    background-image: url("../assets/images/1st\ page\ background.svg");
    background-size: cover;
    background-position: bottom right;
  }
  
  .second {
    padding: 2em 0em 18em 0em;
    background-image: url("../assets/images/2nd\ page\ \(1\).svg");
    background-size: cover;
    background-position: bottom left;
  }
  
  .third {
    padding: 5em 0em 0em 0em;
    background-image: url("../assets/images/3rd\ page\ \(1\).svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .third > .bottom {
    margin-top: 5em;
  }

  .socials { font-size: 2em; }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .first { 
    padding: 2em 0em 15em 0em;
    background-image: url("../assets/images/1st\ page\ background.svg");
    background-size: cover;
    background-position: bottom right;
  }
  
  .second {
    padding: 2em 0em 17em 0em;
    background-image: url("../assets/images/2nd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top left;
  }
  
  .third {
    padding: 5em 0em 0em 0em;
    background-image: url("../assets/images/3rd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }
  
  .third > .bottom {
    margin-top: 5em;
  }

  .socials { font-size: 2em; }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .first { 
    padding: 5em 0em 10em 0em;
    background-image: url("../assets/images/1st\ page\ background.svg");
    background-size: cover;
    background-position: bottom right;
  }
  
  .second {
    padding: 2em 0em 20em 0em;
    background-image: url("../assets/images/2nd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top;
  }
  
  .third {
    padding: 5em 0em 0em 0em;
    background-image: url("../assets/images/3rd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }
  
  .third > .bottom {
    margin-top: 5em;
  }

  .socials { font-size: 2em; }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .first { 
    padding: 5em 0em 10em 0em;
    background-image: url("../assets/images/1st\ page\ background.svg");
    background-size: cover;
    background-position: bottom right;
  }
  
  .second {
    padding: 5em 0em 20em 0em;
    background-image: url("../assets/images/2nd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top;
  }
  
  .third {
    padding: 5em 0em 0em 0em;
    background-image: url("../assets/images/3rd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }
  
  .third > .bottom {
    margin-top: 12em;
  }

  .socials { font-size: 2em; }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
  .first { 
    padding: 5em 0em 10em 0em;
    background-image: url("../assets/images/1st\ page\ background.svg");
    background-size: cover;
    background-position: bottom right;
  }
  
  .second {
    padding: 5em 0em 0em 0em;
    background-image: url("../assets/images/2nd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top;
  }

  .second > div > video {
    margin: 0em 0em 30em 0em;
  }
  
  .third {
    padding: 5em 0em 0em 0em;
    background-image: url("../assets/images/3rd\ page\ \(1\).svg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
  }
  
  .third > .bottom {
    margin-top: 12em;
  }

  .socials { font-size: 2em; }
}