@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Oswald:wght@200..700&display=swap');

:root {
  /* Font Families */
  --font-primary: 'Oswald', sans-serif;
  --font-secondary: 'Libre Baskerville', serif;

  /* Font Sizes */
  --font-size-base: 16px;
  --font-size-small: 15px;
  --font-size-large: 20px;
  --font-size-heading: 32px;

  /* Colors */
  --color-primary: #9eccef;
  --color-secondary: #c9cdd1;
  --color-tertiary: #f4f8d6;
  --color-quaternary: #f9c4bd;
  --color-background: #f7f8f8;
  --color-text: #7f6843;
  --color-text-light: snow;
  --color-contrast: #272727;
}

h1{
  font-family: var(--font-primary);
  font-size: var(--font-size-heading);
}


body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-secondary);
  color: var(--color-text);
  background-size: contain;
  background-color: var(--color-background);
  background-image: url(images/backgrounds/intro_bck_gray.webp); 
}

body.cut-1{
  background-image: url(images/backgrounds/cut_1_bck_gray.webp);
}

body.cut-2{
  background-image: url(images/backgrounds/cut_2_bck_gray.webp);
}

body.cut-3{
  background-image: url(images/backgrounds/cut_3_bck_gray.webp);
}

body.pop-up{
  background-size: cover;
  background-image: url(images/backgrounds/intro_bck_gray.webp);
}

body.invitation{
  background-size: cover;
  background-image: url(images/backgrounds/invitation_bck_gray.webp);
}

body.ice{
  background-size: cover;
  background-image: url(images/backgrounds/ice-pressure-ridge_bck_gray.webp);
}

body.dead-end{
  background-size: cover;
  background-image: url(images/backgrounds/pop-up_bck_gray.webp);
}

#home{
  position: fixed;
  top: 0;
  left: 0;
  right: unset;
}

#home a{
  border-left: 2px solid gray;
  border-right: unset;
  border-radius: 0px 6px 6px 0px;
}

#home > .blur::before{
  border-radius: 0px 6px 6px 0px;
}

header.menu{
  right: 0;
  top: 0;
}

.menu{
  display: flex;
  position: fixed;
  /* width: calc(18% - 30px); */
  justify-content: flex-end;
  flex-direction: column;
  margin: 15px;
  font-family: var(--font-primary);
  font-size: var(--font-size-small);
  z-index: 100;
  color: gray;
  text-align: center;
  align-items: flex-end;
  gap: 4px;
}

header p{
  margin: 0;
}

header a:visited, footer a:visited{
  color: inherit;
}

header a, footer a{
  /* background-color: var(--color-background); */
  padding: 1px 15px;
  padding-top: 1px;
  /* border-radius: 7px; */
  border-right: 2px solid gray;
  /* box-shadow: 0px 0px 5px var(--color-secondary); */
  width: fit-content;
  text-transform: uppercase;
  color: gray;
  border-radius: 6px 0px 0px 6px;
}

a{
  text-decoration: none;
}

a:visited{
  color: inherit;
}

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

sup a:visited{
  color: inherit;
}

.references a{
  color: var(--color-text);
}

.references a:visited{
  color: var(--color-text);
}

.external{
  color: var(--color-text);
}

.external:hover{
  color: var(--color-primary);
}

.external:visited{
  color: inherit;
}

.blur {
  position: relative
}

.blur:before {
  content: "→ ";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: "";
  -webkit-backdrop-filter: blur(38px);
  backdrop-filter: blur(38px);
  z-index: -1;
  border-radius: 6px 0px 0px 6px;
}

.blur:hover{
  background-color: gray;
  color: var(--color-background);
}

footer.menu{
  right: 0;
  bottom: 0;
}
/**************** INTRO PAGE ****************/

#title{
  margin-top: 1%;
}

#content-intro {
  border: 1px solid #ccc;
  padding: 10px;
  max-width: 800px;
  margin-top: 20px;
}

.cuts_menu{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}

.cuts_menu h2{
  font-family: var(--font-primary);
  font-size: var(--font-size-large);
  width: 200px;
  text-align: center;
  margin-top: 0;
}

.cut{
  display: flex;
  width: 200px;
  height: 300px;
  border-radius: 10px;
  padding: 15px;
  margin: 9px;
  flex-direction: column;
  border: 2px solid transparent;
  justify-content: space-around;
}

.cut:hover{
  box-shadow: 0 0 10px var(--color-secondary);
  border: 2px solid var(--color-secondary);
}

.btn_link{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-text);
}

.btn_link:visited{
  color: var(--color-text);
}

.image_btn{
  width: 300px;
}


/**************** TRACE TRACK ****************/

#trace{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  max-width: 250px;
  max-height: 50%;
  text-align: left;
  border-radius: 6px 0px 0px 6px;
}

#trace p{
  display: inline;
}

#trace a{
  color: var(--color-text);
}

#trace:hover{
  background-color: unset;
  color: inherit;
}

#trace summary{
  padding: 1px 15px;
  padding-top: 1px;
  border-right: 2px solid gray;
  text-transform: uppercase;
  color: gray;
  border-radius: 6px 0px 0px 6px;
}

#trace summary:hover{
  color: var(--color-background);
  background-color: gray;
}

details > summary {
  list-style: none;
}

#trace[open] > summary{
  padding-right: 200px;
  background-color: gray;
  color: var(--color-background);
}


details > summary::-webkit-details-marker {
  display: none;
}



/**************** MANUSCRIPT TRACE CARD ***********/

#card{
  width: 43vw;
  max-height: 62%;
  min-height: 45%;
  margin-top: -2%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 40px;
  border: 2px solid var(--color-secondary);
  background-color: var(--color-background);
  box-shadow: 5px 5px 15px var(--color-secondary);
  border-radius: 7px;
}

/* #card.intro-card{
  border: none;
  box-shadow: none;
  background-color: none;
  border-radius: none;
} */

#card figure{
  width: 100%;
  margin: 0;
}

#card img{
  width: 100%;
  height: auto;
}

#card video{
  width: 100%;
}

#card iframe{
  width: 100%;
}

#card figcaption{
  font-family: var(--font-primary);
  font-size: small;
  text-align: end;
}

#card h1{
  margin-top: 0;
  text-align: center;
  margin-left: -10px;
  font-size: var(--font-size-heading);
  font-family: var(--font-primary);
}

.next_choice{
  border-top: 2pt dotted var(--color-secondary);
  padding-top: 25px;
  margin-top: 5px;
  font-style: italic;
  color: #898989;
}

#card::-webkit-scrollbar{
  width: 7px;
  border-radius: 7px;
}

#card::-webkit-scrollbar-track{
  background: var(--color-background);
  border-radius: 7px;
}

#card::-webkit-scrollbar-thumb{
  background: var(--color-secondary);
}





/*************** BUTTONS *********************/


button {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 40px;
  max-width: 500px;
  max-height: 50px;
  font-family: var(--font-primary);
	box-shadow: 1px 3px 5px 0px var(--color-secondary);
	background-color: var(--color-secondary);
  border: none;
	border-radius:15px;
	cursor:pointer;
	color:var(--color-background);
	padding:9px 39px;
	text-decoration:none;
}

button:hover{
  box-shadow: 1px 3px 8px 2px var(--color-secondary);
}

.buttons.hidden {
  display: none;
}

.buttons.visible {
  display: flex;
}

.btn_title{
  color: var(--color-text);
  box-shadow: 1px 3px 5px 0px var(--color-secondary);
	background-color: var(--color-quaternary);
	border-radius:15px;
	font-size: var(--font-size-small);
  text-transform: uppercase;
}

.btn_subtitle{
  display: none;
  position: relative;
  width: 110%;
  font-family: var(--font-secondary);
  color: var(--color-text);
  text-align: center;
  font-size: calc(var(--font-size-small) - 2px);
  text-transform: capitalize;
  padding-top: 7px;
}

button:hover p{
  display: block;
} 

#walk_on_buttons{
  position: fixed;
  top: 50%;
  right: 13%;
}

#walk_on_buttons button{
  max-width: 200px;
  color: var(--color-text);
  background-color: var(--color-primary);
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  /* background-image: url(images/buttons/keep-going_btn.png);
  background-size: contain;
  background-repeat: no-repeat; */
} 

/* #walk_on_buttons button:hover{
  font-style: italic;
} */

#go_back_buttons{
  display: none; 
  position: fixed;
  top: 50%;
  left: 14%;
}

#go_back_buttons button{
  color: var(--color-text);
  background-color: var(--color-primary);
  font-family: var(--font-primary);
  text-transform: uppercase;
  font-size: var(--font-size-small);
  /* background-image: url(images/buttons/go-back.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
} 

#pop_up_buttons{
  position: fixed;
  flex-direction: column;
  justify-content: center;
  top: 9%;
  left: 6%; 
}

#pop_up_buttons button{
  color: transparent;
  width: 325px;
  height: 415px;
  max-height: 492px;
  padding-top: 242px;
  box-shadow: unset;
  font-family: var(--font-primary); 
}

#pop_up_buttons .btn_title{
  width: 200px;
  height: auto;
  padding: 9px;
  margin-bottom: 0px;
}

#pop_up_buttons:hover .btn_title{
  box-shadow: 1px 3px 8px 2px var(--color-secondary);
}

#pop_up_buttons .btn_subtitle{
  margin-top: 5px;
}


#pop_up_buttons .stay-with-the-trouble{
  background-image: url(images/buttons/staying-with-the-trouble_btn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

#pop_up_buttons .vista{
  background-image: url(images/buttons/vista.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

#pop_up_buttons .landmark{
  background-image: url(images/buttons/landmark.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

#pop_up_buttons .wrecksite{
  background-image: url(images/buttons/wrekside.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

#detour_buttons{
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  bottom: 11%;
  right: 20%;
  gap: 10px;
}

#detour_buttons button{
  width: 200px;
  padding-top: 9px;
  /* color: var(--color-text); */
  /* background-image: url(images/buttons/detour.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}

#detour_buttons .to-cut-1{
  /* background-image: url(images/buttons/detour_cut_1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}

#detour_buttons .to-cut-2{
  /* background-image: url(images/buttons/detour_cut_2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}

#detour_buttons .to-cut-3{
  /* background-image: url(images/buttons/detour_cut_3.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}

#redirective_buttons{
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  bottom: 11%;
  left: 9%;
  gap: 10px;
}

#redirective_buttons button{
  width: 200px;
  padding-top: 9px;
  background-color: var(--color-tertiary);
}

#redirective_buttons .invitation{
  /* background-image: url(images/buttons/invitation_btn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}

#return_buttons{
  position: fixed;
  flex-direction: column;
  justify-content: center;
  bottom: 25%;
  left: 9%;
  gap: 50px;
}

#return_buttons button{
  width: 200px;
  background-color: var(--color-text);
  color: var(--color-background);
}

#return_buttons .to-cut-3{
  /* background-image: url(images/buttons/return_to_cut_3.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}

#return_buttons .to-cut-2{
  /* background-image: url(images/buttons/return_to_cut_2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}


#return_buttons .to-cut-1{
  /* background-image: url(images/buttons/return_to_cut_1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent; */
}



#ongoing_buttons{
  position: fixed;
  top: 55%;
  right: 10%;
}

#ongoing_buttons button{
  background-color: var(--color-text);
  color: var(--color-background);
  max-width: 200px;
  max-height: fit-content;
}

#ongoing_buttons button{
  background-color: var(--color-background);
  color: var(--color-text);
  border: 2pt dotted var(--color-text);
  margin-bottom: 5px;
}




/*************** MICELLANIOUS ****************/

.mw-editsection{
  display: none;
}

#toc{
  display: none;
}

p > span.link {
  display: none;
}