/*=============================================================================================================================================================*/

/*----FONTs--------------------------------------------------------------------------------------------------------------------------------------------FONTs---*/

@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap');                                        /* font-family: 'Beth Ellen', cursive; */
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');            /* font-family: "PT Serif", serif; */

/*====RESET============================================================================================================================================RESET===*/

* { margin: 0; padding: 0; box-sizing: border-box; }                                        /* the '*' ~universal selector~ applys to every html&body elements */
html, body { width: 100%; height: 100%; }


/*===INDEX/HOME=PAGE=========================================================================================================================INDEX/HOME=PAGE===*/

body.home {
  font-family: 'Beth Ellen', cursive;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #f2e6d8; 
}

/*---TEXT-COLOURS-------------------------------------------------------------------------------------------------------------------------------TEXT-COLOURS---*/

.text-colour-group-a { color: #6b4c3b; }
.text-colour-group-b { color: #a66c4f; }

/*---TEXT-INFO-------------------------------------------------------------------------------------------------------------------------------------TEXT-INFO---*/

h1.title { font-size: 50px; margin: 12px 0; }
.title-name { display: block; font-size: 30px; margin-top: 4px; }

h2.exercise-notes, h2.submission-notes { font-size: 18px; margin: 18px 0 6px; }
p.submission { font-size: 16px; margin: 6px 0 18px; }

/*---LINK-INFO-------------------------------------------------------------------------------------------------------------------------------------LINK-INFO---*/

ul.week-links {
  font-size: 24px; 
  list-style: none;
  padding: 0;
  margin: 10px 0;
  font-family: "PT Serif", serif;
  color: #eb6758;
}
ul.week-links li { margin: 6px 0; }
ul.week-links li a { text-decoration: none; color: inherit; }
ul.week-links li a:hover { color: #C799A8; }

/*---FLOWER-RIBBON-INFO------------------------------------------------------------------------------------------------------------------FLOWER-RIBBON-INFO----*/

.ribbon {
  font-size: 24px;
  color: #C799A8;
  margin: 3px 0;
  line-height: 60px;
  white-space: nowrap;
  overflow: hidden;
}

/*===NOISE=&=SCANLINES=====================================================================================================================NOISE=&=SCANLINES===*/

.scanlines, .noise {
  position: fixed; top:0; left:0; width:100vw; height:100vh; pointer-events:none; z-index:100;
}
.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0,
    rgba(0,0,0,0.08) 2px,
    transparent 2px,
    transparent 4px
  );
}

@keyframes scanlines { 0% { background-position-y:0; } 100% { background-position-y:4px; } }
@keyframes noise { 0%,100%{ background-position:0 0; } 50%{ background-position:10% 10%; } }

/*===INDEX/HOME=PAGE=OVERRIDES=====================================================================================================INDEX/HOME=PAGE=OVERRIDES===*/

body.home p.submission {                                                                                                                   
  font-family: "PT Serif", serif;
}

//*---LINK-INFO-HTML--------------------------------------------------------------------------------------------------------------------------LINK-INFO-HTML---*/
/* This section here I hate more than a sane person should - an example of the loading process learnt the hard way, like i dont even think i need the wrappers anymore but im too afraid to take them out */

body.week3, body.week4, body.week5 {
  font-family: "PT Serif", serif;
  font-style: normal;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
}

.canvas-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 20px;
}

.notes-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;  
  width: 100%;
}

canvas {
  display: block;
  margin: 0 auto;
}


body.week5 { background-color: #f2e6d8; color: #ffb6c1; }
body.week5 h2 { color: #89cff0; }
body.week5 p { color: #ffb6c1; }

/* TURN OFF FOR HTMLS */

/*==body.week5 .scanlines,
body.week5 .noise {
  display: none !important;
}
==*/
/*=============================================================================================================================================================*/