/*
--violet-web: #f786deff;
--illuminating-emerald: #4f9774ff;
--queen-blue: #415f7cff;
--burnt-sienna: #ee6c4dff;
--xiketic: #14080cff;


--violet-web: hsla(313, 88%, 75%, 1);
--illuminating-emerald: hsla(151, 31%, 45%, 1);
--queen-blue: hsla(209, 31%, 37%, 1);
--burnt-sienna: hsla(12, 83%, 62%, 1);
--xiketic: hsla(340, 43%, 5%, 1);


$violet-web: #f786deff;
$illuminating-emerald: #4f9774ff;
$queen-blue: #415f7cff;
$burnt-sienna: #ee6c4dff;
$xiketic: #14080cff;




$violet-web: rgba(247, 134, 222, 1);
$illuminating-emerald: rgba(79, 151, 116, 1);
$queen-blue: rgba(65, 95, 124, 1);
$burnt-sienna: rgba(238, 108, 77, 1);
$xiketic: rgba(20, 8, 12, 1);

$gradient-top: linear-gradient(0deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-right: linear-gradient(90deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-bottom: linear-gradient(180deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-left: linear-gradient(270deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-top-right: linear-gradient(45deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-bottom-right: linear-gradient(135deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-top-left: linear-gradient(225deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-bottom-left: linear-gradient(315deg, #f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
$gradient-radial: radial-gradient(#f786deff, #4f9774ff, #415f7cff, #ee6c4dff, #14080cff);
*/
:root {
  --branding-color: #f786deff;
  --hover-color: #f4a235;
  --secondary-color: #4f9774ff;
  --tertiary-color: #415f7cff;
  --text-color: #14080c;
}

body {
  background-image: linear-gradient(
    0deg,
    #f786deff,
    #4f9774ff,
    #415f7cff,
    #ee6c4dff
  );
}

h1 {
  font-size: xx-large;
  font-weight: bolder;
  text-align: center;
  margin: 5px auto;
}

h2 {
  font-family: cursive;
  font-size: 60px;
  text-align: center;
  margin: 15px 60px;
}

h3 {
  text-align: center;
}

h3:hover {
  text-decoration: underline;
  background-color: #f4a235;
}

h4 {
  text-align: center;
  font-size: large;
}

button {
  display: block;
  margin: 5px auto;
  background-color: dodgerblue;
  color: ghostwhite;
  font-size: 24px;
  padding: 8px 20px;
  cursor: pointer;
  border: none;
  border-radius: 5%;
  transition: all 200ms ease-in-out;
}

.main {
  display: block;
  border-radius: 10px;
  margin: 0 40px;
  padding: 5px 0;
  background-color: #bccddc;
  color: rgb(20, 8, 12);
}

.firstTime:hover {
  opacity: 0.6;
}

.header {
  font-size: xxx-large;
  font-family: cursive;
}
.bench {
  display: block;
  margin: 5px auto;
  padding: 0 60px;
  background-color: var(--tertiary-color);
  border-width: 20px;
  border-color: var(--tertiary-color);
  border-radius: 20%;
  max-width: 100%;
}

.history {
  text-align: center;
  font-family: cursive;
  font-size: large;
  border: #415f7c;
  border-style: solid;
  margin: 0 60px;
  padding: 15px 25px 0;
}
.ep:hover {
  width: 400px;
  box-shadow: 10px 5px 5px teal;
  cursor: pointer;
}
.song {
  text-decoration: none;
  font-weight: bold;
  transition: all 200ms ease-in-out;
}
.song:hover {
  text-decoration: underline;
  background-color: hotpink;
}

.logo {
  border-radius: 5px;
}

.text {
  margin: 20px 0;
}
.widerstand-link {
  text-align: center;
  margin: 20px 0;
}

.widerstand-link img {
  border-radius: 10px;
  margin: 0 30px;
}

.widerstand-link a {
  font-size: 48px;
}

.buy {
  text-decoration: none;
}

.buyIt:hover {
  opacity: 0.6;
}

.social-links a {
  margin: 0 20px;
  color: var(--tertiary-color);
  border-radius: 50%;
  padding: 10px 14px;
  font-size: 30px;
  margin-bottom: 60px;
  transition: all 150ms ease-in-out;
}

.social-links a:hover {
  color: white;
  background-color: var(--tertiary-color);
}

.presents {
  display: block;
  background-color: #14080c;
  margin: 25px auto;
  padding: 0 250px;
  border-radius: 10px;
  max-height: 250px;
}

.video {
  text-decoration: none;
  font-family: cursive;
  font-weight: bold;
}

.footer {
  text-align: center;
  background-color: white;
}