:root {
  --border-radius: 20px;
}

:root,
[data-selected-theme="purple"] {
  --color-main: #8929bf;
  --color-accent: #943ec5;
  --color-background: #a053cb;
  --color-border: #521872;
  --color-text: black;
  --color-heading: #6d2098;
  --color-title: white;
  --theme-image: url("/website/themeSquares/purpleSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/purple_normal.png");
  --cursor-link: url("/website/assets/cursors/purple_link.png");
  --cursor-push: url("/website/assets/cursors/purple_push.png");
}

[data-selected-theme="green"] {
  --color-main: #26bb0f;
  --color-accent: #2bd011;
  --color-background: #55d940;
  --color-border: #22a60d;
  --color-text: black;
  --color-heading: var(--color-main);
  --color-title: var(--color-text);
  --theme-image: url("/website/themeSquares/greenSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/green_normal.png");
  --cursor-link: url("/website/assets/cursors/green_link.png");
  --cursor-push: url("/website/assets/cursors/green_push.png");
}

[data-selected-theme="pink"] {
  --color-main: #FD3DB5;
  --color-accent: #FD63C3;
  --color-background: #FE88D2;
  --color-border: #AD026D;
  --color-text: black;
  --color-heading: #F20298;
  --color-title: white;
  --theme-image: url("/website/themeSquares/pinkSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/pink_normal.png");
  --cursor-link: url("/website/assets/cursors/pink_link.png");
  --cursor-push: url("/website/assets/cursors/pink_push.png");
}

[data-selected-theme="orange"] {
  --color-main:	#d3571f;
  --color-accent: #ff9033;
  --color-background: #f18b57;
  --color-border: #ff580a;
  --color-text: black;
  --color-heading: #bf4b15;
  --color-title: white;
  --theme-image: url("/website/themeSquares/orangeSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/orange_normal.png");
  --cursor-link: url("/website/assets/cursors/orange_link.png");
  --cursor-push: url("/website/assets/cursors/orange_push.png");
}

[data-selected-theme="black"] {
  --color-main: black;
  --color-accent: #565656;
  --color-background: #3B3A35;
  --color-border: #EEEEEE;
  --color-text: white;
  --color-heading: white;
  --color-title: black;
  --theme-image: url("/website/themeSquares/blackSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/black_normal.png");
  --cursor-link: url("/website/assets/cursors/black_link.png");
  --cursor-push: url("/website/assets/cursors/black_push.png");
}

[data-selected-theme="crimson"] {
  --color-main: #C40A0A;
  --color-accent: #EA0C0C;
  --color-background: #F42929;
  --color-border: #780606;
  --color-text: black;
  --color-heading: #9E0808;
  --color-title: white;
  --theme-image: url("/website/themeSquares/crimsonSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/crimson_normal.png");
  --cursor-link: url("/website/assets/cursors/crimson_link.png");
  --cursor-push: url("/website/assets/cursors/crimson_push.png");
}

[data-selected-theme="celeste"] {
  --color-main: #46468c;
  --color-accent: #5e5e9a;
  --color-background: #8c8cb7;
  --color-border: #11114e;
  --color-text: black;
  --color-heading: #161664;
  --color-title: white;
  --theme-image: url("/website/themeSquares/celesteSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/celeste_normal.png");
  --cursor-link: url("/website/assets/cursors/celeste_link.png");
  --cursor-push: url("/website/assets/cursors/celeste_push.png");
}

[data-selected-theme="choco"] {
  --color-main: #541919;
  --color-accent: #410000;
  --color-background: #340000;
  --color-border: #b39999;
  --color-text: white;
  --color-heading: #7a4c4c;
  --color-title: black;
  --theme-image: url("/website/themeSquares/chocoSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/choco_normal.png");
  --cursor-link: url("/website/assets/cursors/choco_link.png");
  --cursor-push: url("/website/assets/cursors/choco_push.png");
}

[data-selected-theme="white"] {
  --color-main: white;
  --color-accent: #dddddd;
  --color-background: #eeeeee;
  --color-border: black;
  --color-text: black;
  --color-heading: black;
  --color-title: white;
  --theme-image: url("/website/themeSquares/whiteSpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/white_normal.png");
  --cursor-link: url("/website/assets/cursors/white_link.png");
  --cursor-push: url("/website/assets/cursors/white_push.png");
}

[data-selected-theme="lily"] {
  --color-main: #521872;
  --color-accent: #44145f;
  --color-background: #290c39;
  --color-border: #7b24ab;
  --color-text: white;
  --color-heading: #6d2098;
  --color-title: black;
  --theme-image: url("/website/themeSquares/lilySpooky.png");

  /* Custom cursors */
  --cursor-normal: url("/website/assets/cursors/lily_normal.png");
  --cursor-link: url("/website/assets/cursors/lily_link.png");
  --cursor-push: url("/website/assets/cursors/lily_push.png");
}

@font-face {
	font-family: "London Tube";
	src: url("/website/LondonTube.ttf");
}

@font-face {
    font-family: "Architect 4";
    src: url("/website/Architect4.woff2");
}

body{
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: "Architect 4";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;

    cursor: var(--cursor-normal), auto;
}

h1, h2, h3, h4, h5, h6{
    background-color: var(--color-heading);
    color: var(--color-title);
    padding: 10px;
    border-radius: var(--border-radius);
}

img{
    border: 3px solid var(--color-border);
    border-radius: var(--border-radius);
}

img.theme{
    background-image: var(--theme-image);
    background-size: 200px;
}

.mini-picture{
    max-height: 150px;
}

figure{
    display: inline-block;
}

figcaption{
    max-width: 150px;
    text-decoration-line: underline;
}

.horizontal{
    display: inline-block;
    max-width: 400px;
}

.container{
    max-width: 800px;
}

.audio-container{
  background-color: var(--color-heading);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  max-width: min(400px, 80%);
  margin: auto; 
}

.music-name{
  color: var(--color-title);
}

.content {
    text-align: center;
    display: block;
    background-color: var(--color-accent);
    padding: 1.5rem 2rem;
    border: 2px solid var(--color-border);
    
    border-radius: var(--border-radius);
    max-width: 90vw;
}

.intro-image{
    min-height: 200px;
    max-height: 300px;
}

.me{
    max-width: 300px;
    background-image: url("/website/trans_square.png");
    background-size: cover;
    padding: 10px;
}

button[aria-pressed="true"] {
  background-color: var(--color-heading);
  color: var(--color-title);

  cursor: var(--cursor-normal), auto;
}

a{
    color: var(--color-text);

    cursor: var(--cursor-link), auto;
}

button {
    font-family: "Architect 4";
    margin: 3px;
    border: none;
    background: transparent;
    border-radius: var(--border-radius);

    padding: 0.75rem 1.25rem;
    font-size: inherit;
    /*font-size: clamp(1rem, 5vw, 1.312rem);*/
    color: var(--color-text);
    border: 2px solid var(--color-border);

    cursor: var(--cursor-push), auto;
}

.table-data, td, th{
    padding: 5px;
    border-collapse: collapse;
    text-align: center;
    margin: 0 auto;
    border: 2px solid var(--color-border);
}

th{
  background-color: var(--color-heading);
  color: var(--color-title);
}