/*BASICS*/

    body {overflow: hidden;background-color:aliceblue;}
    h1 {font-size: 50px;}




/*Intro1*/
		.content {
			position: relative;
			z-index: 10;
			height:700px;
			width: 1200px;
			left: 100px;
			clear: both;
			min-width: 420px;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0,0,0,.5);
			background: rgb(238, 130, 238, 0.2);
		}

		.content p {
			margin: 20px 0;
		}
		
		#disorders {overflow-Y:scroll;}
		#difficulty {display:none;}
		#c2 {display:none;}
		#fun2 {display:none;}
		#results {display:none;text-align:center;font-size:30px;line-height:10px;}
		
		
#disorders h1 {font-size:80px;text-align:center;position: relative; top: -50px;}

.disorder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 30px;
}

.radio-label {
    display: flex;
    align-items: center;
    font-size: 30px;
    gap: 10px;
    font-size:50px;
}

#a input[type="radio"] {
    transform: scale(2);
    margin-right: 10px;
}

.sections {
    display: none;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 0px;
}

.section {
    border: 2px solid;
    padding: 10px;
    width: 650px;
    text-align: center;
    background: #f9f9f9;
    border-radius: 10px;
}

.section li {background: transparent;display:block;}

.ingame {width: 300px;}

.content-a {
    height: 300px;
    width:650px;
    overflow: hidden;
    line-height:30px;
    border-radius: 10px;
    transition: max-height 0.5s ease, padding 0.5s ease;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.05);
    font-size: 15px;
    background: #fff;
}

.ingame .content-a{width: 300px;}

.info {width: 80px;height:30px;border:2px solid lightblue;font-size:20px;text-align:center;line-height:30px;position: relative;left:0;top:-10px;}


.severity, .difficulty {position: absolute;border:2px dashed;text-align:center;background:white;}
.severity {height: 320px;width: 500px;left:150px;top:100px;font-size: 20px;line-height:40px;}
.severity h3 {font-size:40px;}
#itemForm1 {line-height:60px;font-size:40px;}
.severity button {position: absolute;top: 290px;left:220px;}
.difficulty {left: 750px;top: 100px;font-size:20px;padding:10px;width: 300px;height: 300px;line-height:40px;}
.difficulty h3 {font-size:40px;position:absolute;top: -25px;left:60px;}
#itemForm3 {font-size:40px;position: relative;top: 90px;line-height: 60px;}
#itemForm3 button {position: absolute;top: 190px;left:130px;}
.small {font-size:20px;}


input[type="time"] {transform: scale(2);position: relative;left: 0px;top:45px;}
input[type="number"] {transform: scale(2);position: relative;left: 0px;top:15px;}
input[type="radio"] {transform:scale(1.5);position: relative;top: -5px;}

#fun2 h2 {text-align:center;}

.bubble {
  animation: float 3.5s ease-in-out infinite;
  height: 150px;
  user-select: none;

  text-align:center;line-height: 150px;
  color:purple;
  width: 150px;
  border-radius: 50%;
  position: absolute;
  background: radial-gradient(
    circle at 75% 30%,
    white 5px,
    aqua 8%,
    darkblue 60%,
    aqua 100%
  );
  box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #eaf5fc,
    inset 88px 0px 60px #c2d8fe, inset -20px -60px 100px #fde9ea,
    inset 0 50px 140px #fde9ea, 0 0 90px #fff;
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0px);
  }
}

.bubble.item1 { top: 20px; left: 90px; }
.bubble.item2 { top: 70px; left: 300px; }
.bubble.item3 { top: 220px; left: 20px; }
.bubble.item4 { top: 400px; left: 70px; }
.bubble.item5 { top: 250px; left: 250px; }
.bubble.item6 { top: 100px; left: 500px; }
.bubble.item7 { top: 320px; left: 450px; }
.bubble.item8 { top: 500px; left: 250px; }
.bubble.item9 { top: 180px; left: 650px; }
.bubble.item10 { top: 370px; left: 720px; }
.bubble.item11 { top: 250px; left: 850px; }
.bubble.item12 { top: 30px; left: 780px; }
.bubble.item13 { top: 400px; left: 980px; }
.bubble.item14 { top: 550px; left: 500px; }
.bubble.item15 { top: 120px; left: 1000px; }
.bubble.item16 { top: 550px; left: 800px; }


#results h1 {font-size:50px;}
#results td {padding:20px;line-height:0px;text-align:center;}    
.h1 {font-weight:bold;font-size:50px;}   
.h1 td {border:1px solid;border-bottom:transparent;position: relative; top:10px;}
.not-h1 {font-size:30px;}
.not-h1 td {border:1px solid;border-top:transparent;}
.chosen {position: absolute;left:130px;border-collapse:collapse;top: 150px;}



#chosen1 {line-height:0px;}
#chosen3 {list-style:none;}
#chosen4 {line-height:10px;}


.intro1 .next, .intro1 .back {font-size: 30px;border:2px solid;background:plum;padding: 10px;width: 60px;height:30px;border-radius: 10px;position: absolute;top: 0px;cursor:pointer;line-height:30px;}

.intro1 .next {left:1090px;}
.intro1 .back {left:10px;}




#start {font-size:60px;background:lime;width: 200px;height:100px;position: absolute;top: 600px;left: 550px;line-height:100px;text-align:center;box-shadow:0px 0px 5px 5px springgreen;transition: 0.3s;}
#start:hover {transform:scale(1.1);box-shadow:0px 0px 10px 10px springgreen;cursor:pointer;}
/*intro2*/

.intro2 {text-align: center;position: absolute;width: 1100px;height: 550px;left: 30px;top: 150px;background-color: white;border:2px solid;padding: 10px;}    
  .dropdown-container {display: flex;justify-content: center;gap: 20px;}
  .dropdown {width: 800px;text-align: center;}
  .dropdown-header {padding: 20px;cursor: pointer;border-radius: 10px;font-size: 20px;box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);background: #f0f0f0;}
  .dropdown-content {
    max-height: 0;
    z-index:100;
    width: 500px;
    position: absolute;
    overflow: hidden;
    border-radius: 10px;
    transition: max-height 0.5s ease, padding 0.5s ease;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.05);
    font-size: 15px;
    background: #fff;
  }

  .dropdown-content.open {max-height: 300px;padding: 20px;}
         
  #startButton {cursor:pointer;font-size: 50px; position: absolute; top: 420px; left: 460px;padding: 20px;background-color: lime;}         

/*BASIC LAYOUT*/

    /*Stats*/ 
.stats {line-height:10px;transform:scale(1.4);position: absolute;top: 30px;left:500px;border:1px solid;background:white;border-radius:10px;width: 450px;height:0px;z-index:9998;}
.energy-bar, .motif-bar, .nausea-bar, .head-bar, .dizzy-bar, .stomach-bar {position:absolute;left:100px;width: 100px; height: 5px; border: 2px solid; border-radius: 10px;}
.stomach {position: relative;left:-70px;}

.energy-bar {top: 8px;left:80px;}
.motif-bar {top:8px;left:90px;}
.nausea-bar {top: 8px;left:90px;}
.head-bar {top:8px;left:90px;}
.dizzy-bar {top:8px;left:80px;}
.stomach-bar {top:2px;left: 280px;}
.energy-EnergyLevel {height: 5px; width: 75px; background: lime;}
.motif-MotifLevel {height: 5px; width: 50px; background: lime;}
.nausea-NauseaLevel {height: 5px; width: 50px; background: lime;}
.head-HeadLevel {height: 5px; width: 50px; background: lime;}
.dizzy-DizzyLevel {height: 5px; width: 20px; background: lime;}
.stomach-StomachLevel {height: 5px; width: 20px; background: lime;}
.heart {
        width: 30px;
        height: 30px;
        position: absolute;left: 160px;
        animation: heartbeat 1s infinite linear; 
        top:-5px;/* Default BPM (60) */
    }

    @keyframes heartbeat {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }

#hr {position:relative;font-size:20px;left:0px;top: 2px;}  
    
.stats td, .stats th {font-weight:normal;padding:5px;position:relative;left:10px;}
 #choices {display:none;}
 
#location {display:none;}

.cloud {position: absolute; top: 50px;left:50px;transform:scale(0.8);}
  .fluff { background-color: white;border-radius: 100%;width: 100px;height: 100px;position:absolute;}
  .cloud1 {border-bottom:2px solid black;z-index:100;width: 300px;}
  .cloud2 {border:2px solid black;left:-5px;top:-20px;}
  .cloud3 {border-top:2px solid black;left:80px;top:-50px;}
  .cloud4 {border-right:2px solid black;border-top:2px solid black;left:150px;top:-60px;}
  .cloud5 {border-right:2px solid black;left:220px;top:-20px;}

  #clock {font-family: 'Comic Sans MS', 'Arial', sans-serif;font-size: 45px; font-weight: bold;z-index:888;position: absolute;left: -110px;top: 0px;text-align: center;width: 500px;letter-spacing: 8px;}

  
  .hints {display: none;text-align: center;position: absolute;width: 1100px;height: 550px;left: 30px;top: 150px;background-color: white;border:2px solid;padding: 10px;z-index:100;}
  .hints table {border-collapse: collapse;text-align:center;}
  .hints td {border: 2px solid black;padding: 10px;}
  .hints1 {width: 450px;position: absolute; left: 10px;}
  .hints1 table {width: 450px;}
  .hints2 {position: absolute; left: 500px;}
  .hints3 {position: absolute; left: 800px;}
  
  
  /*PHONE*/
.phoneoutline {position: absolute;top: 350px;left: 1300px;border:5px solid;width: 200px;height:400px;border-radius:10%; background: linear-gradient(to top, #4169E1,#BA55D3,#FF1493); }
  /*Widget*/
  .widget {top: 20px;left: 10px;height:160px;border:2px solid; position: absolute; line-height: 30px;padding: 10px;border-radius: 10%;text-align:center;background-color: white;}
  .label {position: absolute;text-align:center;font-size: 8px;color: white;top: 72px;left:15px;}
  .calendar {text-align: center; width: 160px;height: 80px;}
  .calendar h2 {font-size:20px;background-color: red;padding: 2px;position: relative; border-radius:10%;top: -15px;}
  .calendar td{font-size:15px;line-height:20px;position: relative;top: -20px;}
  .calendar .title, .calendar .time {position: absolute;left:-10px;width: 174px;}
  .calendar .title{text-decoration:underline;}
  .calendar .time {top: 0px;}
  .cal1 {position: absolute; top: 70px;width: auto;}
  .cal2 {position: absolute; top: 130px;width: auto;}
  /*Bottom of screen*/  
  .bottom-outline {position: absolute;top: 360px;left: 10px;background: rgba(0, 0, 0, 0.2);border-radius: 10px;width: 185px;height: 40px;}
    .app {width: 25px;height:25px;border-radius: 10%;position: absolute;top: 8px;}
    .app1 {background-color:pink;left: 10px;}
    .app2 {background-color:lime;left: 55px;}
    .app3 {background-color:white;left: 100px;}
    .app4 {background-color:salmon;left: 145px;}
    .homebutton {border-radius: 20%;height: 4px;width: 170px;background-color: gray;position: absolute;top: 390px;left:15px;cursor: pointer;}
    /*APPS*/
    .apps {cursor: pointer;transform: scale(0.7);width: 20px;height: 20px;border:2px solid black; position: absolute; line-height: 20px;padding: 10px;border-radius: 10%;}
      /*To-do app*/
      .todoApp {left: 10px; top:220px;background-color: blue;color:white;font-size: 30px;}

      #envtb1, #envquiz1, #reflection1, #essay1, #discussion1, #t1, #t2, #t3 {display: flex; align-items: center;}

      .title {font-size:15px;position: relative; left: 0px;}
      .icon {width:20px;height:20px;position:relative;left: 0px;}
      .to-do span {position: relative; left: 100px;}
      .to-do {display: none;line-height: 30px;background-color: white; padding: 10px;width: 180px;border-radius:9%;position: absolute;top: 0px;height:380px;}
      /*Other apps*/
      #pauseButton {width: 30px; height: 30px; border: 2px solid black; position: absolute; line-height: 20px;text-align: center;padding: 0; border-radius: 10%;background-color: lavender; color: black; font-size: 30px;top: 227px; left: 115px;}
      
      .see-stats {display:none;background-color: white;color:red;font-size: 40px;top: 220px;left: 110px;}
      
      .hint-button {background-color: lavender;color:black;font-size: 40px;top: 220px;left: 60px;}


      .alarm {display:none;background: rgba(0, 0, 0, 0.8);padding: 10px;width: 180px;border-radius:9%;position: absolute;top: 0px;height:380px;}
.alarm .name {color: white; position: absolute;top: 155px;left: 10px;text-align:center;width:175px;}
.alarm .snooze {width: 100px;height:30px;background-color:orange;color: white;text-align:center;line-height:30px;border-radius: 50px;font-size:12px; position: absolute;top: 200px;left:50px;}
.alarm .stop {cursor:pointer;width: 50px;height:15px;background-color:  #737373;color: white;text-align:center;line-height:15px;border-radius: 50px;font-size:7px; position: absolute;top: 365px;left:75px;}
.ring {animation: ring 1s infinite;}

@keyframes ring {
  0%   {transform:rotate(2deg);}
  25%  {transform:rotate(-2deg);}
  50%  {transform:rotate(2deg);}
  75%  {transform:rotate(-2deg);}
  100% {transform:rotate(2deg);}
}
  /*Assorted - Textbox, main format, pause button, blackout, school, walking*/
  #textBox {overflow-y: auto;line-height: 30px;text-align: center;position: absolute; left: 1300px; top: 10px; border: 4px solid;width: 200px; height: 300px;background-color:lightblue;}
  
  .mainmenu {overflow: hidden;top: 200px;background-color: white;height: 500px; width: 350px;border: 5px solid; border-radius: 10%;position: absolute; text-align: center;}
  
  .main-format {overflow: hidden;top: 200px;background-color: white;height: 500px; width: 350px;border: 5px solid; border-radius: 10%;position: absolute; text-align: center;}

 
  
  #blackout {pointer-events: none;opacity: 0;transition: opacity 1s ease-in-out;width: 100%;height: 100%;background-color: black;position: absolute;top: 0;left: 0;z-index: 999;}

   /*Walking*/
    #walking {display:none;}
    .walking-to {position: absolute; top: 50%; left: -100px; animation: walking-to 3s linear infinite; }
    @keyframes walking-to {0% {left: -100px; }100% {left: calc(100% + 100px); } }
    .walking-from {position: absolute; top: 50%; left: -100px; animation: walking-from 3s linear infinite; }
    @keyframes walking-from {0% {left: calc(100% + 100px);}100% {left: -100px; }}
  
/*BASIC MENU*/  

.hidden, .laundrytask {display: none;}
.two {left:390px;position: absolute;display: none;}
.three {left:770px;position: absolute;display: none;}
.food .option {font-size: 30px;}
.option {cursor: pointer; border: 2px solid lightblue; font-size: 40px;margin: 30px;}
.option img {width: 30px;height:30px;position:relative; left: -50px;}

  /*Rain/shower*/
  .rain {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;pointer-events: none}
  .drop {position: absolute;bottom: 100%;width: 2px;height: 50px;background: #a9a9a9;animation: fall linear infinite}
  @keyframes fall {to {transform: translateY(100vh) }}


#main-screen .option, #main-notscreen .option {display:none;}

.screentime {display:none;}
#main-notscreen {overflow-Y: scroll;}


.alert {width: 99%;height:97.5%;border:10px solid red;position: absolute;left:0px;top:0px;display:none;}
.alert2 {animation: alert 5s linear;display:block;}  

@keyframes alert {
0% {opacity:0;}
10% {opacity:1;}
20% {opacity:0;}
30% {opacity:1;}
40% {opacity:0;}
50% {opacity:1;}
60% {opacity:0;}
70% {opacity:1;}
80% {opacity:0;}
90% {opacity:1;}
100% {opacity:0}
}    

/*SCHOOL*/

  /*Textbook*/
  .textbook {display:none;}
#wrapper {display:none;position: relative;top: 40px;left: 300px;transform: scale(0.3);max-width: 80em;z-index:1;}
#container {float: left;padding: 1em;width: 80%;height: 80px;}
.open-book {position: relative;background: #fff;box-shadow: rgba(0,0,0,0.5) 0 1em 3em;color: #000;padding: 2em;width: 1200px;height: 950px;}
.open-book * {position: relative;}
.open-book .chapter-title {font-size: 2em;position: relative;text-align: center;}
.open-book article {line-height: 1.5;}
.open-book article *:not(.chapter-title):not(hr):not(dl) {margin: 0 auto;}
.open-book article p {font-size:15px;text-indent: 2em;}
.open-book .chapter-title + p:first-of-type {text-indent: 0;}
.open-book .chapter-title + p:first-of-type:first-letter {float: left;font: 700 3em/0.65 'Playfair Display', sans-serif;padding: 0.15em 0.05em 0 0;}
.open-book:before {background-color: #00FF7F;border-radius: 0.25em;bottom: -1em;content: '';left: -1em;position: absolute;right: -1em;top: -1em;z-index: -1;}
.open-book:after {background: linear-gradient(to right, transparent 0%,rgba(0,0,0,0.2) 46%,rgba(0,0,0,0.5) 49%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.5) 51%,rgba(0,0,0,0.2) 52%,transparent 100%);
  bottom: -1em;content: '';left: 50%;position: absolute;top: -1em;transform: translate(-50%,0);width: 4em;z-index: 1;}
.open-book > * {column-count: 2;column-gap: 6em;position: relative;z-index: 1;}
.open-book .chapter-title:before, .open-book .chapter-title:after {height: 0.125em;}
img {width: 200px;position: relative; left: 150px;}
  .highlight {
    background-color: mistyrose;
    transition: background-color 0.3s ease-in-out;
  }
  
  
.notebook {
        transform:scale(0.5);
        font-size: 15px;
        width: 300px;
        height: 400px;
        position: absolute;
        top: 10px;
        left:1100px;
        border: 2px solid;
        padding: 10px;
        display:none;
        background:white;
        z-index:1;
    }

    .notes {
        height: 20px;
        text-indent: 30px;
        font-family: cursive;
        margin-bottom: 10px;
        border-bottom: 2px solid black; 
    }
    
.pen {z-index:10;position:absolute;left:1190px;top:195px;width: 50px;display:none;}

   
.write {animation: write 2.2s linear;}
/*Speed of pen*/

        
     
@keyframes write {
0%    {left: 1190px;}
5%    {transform: rotate(-5deg); left: 1196px;}
10%   {transform: rotate(0deg); left: 1202px;}
15%   {transform: rotate(-5deg); left: 1208px;}
20%   {transform: rotate(0deg); left: 1214px;}
25%   {transform: rotate(-5deg); left: 1220px;}
30%   {transform: rotate(0deg); left: 1226px;}
35%   {transform: rotate(-5deg); left: 1232px;}
40%   {transform: rotate(0deg); left: 1238px;}
45%   {transform: rotate(-5deg); left: 1244px;}
50%   {transform: rotate(0deg); left: 1250px;}
55%   {transform: rotate(-5deg); left: 1256px;}
60%   {transform: rotate(0deg); left: 1262px;}
65%   {transform: rotate(-5deg); left: 1268px;}
70%   {transform: rotate(0deg); left: 1274px;}
75%   {transform: rotate(-5deg ); left: 1280px;}
80%   {transform: rotate(0deg); left: 1286px;}
85%   {transform: rotate(-5deg); left: 1292px;}
90%   {transform: rotate(0deg); left: 1298px;}
95%   {transform: rotate(-5deg); left: 1304px;}
100%  {transform: rotate(0deg); left: 1310px;}
}   /*Movement of pen*/
 
  /*Discussion and reflection*/
  .board {position: absolute;left: 30px;top: 150px;width: 1100px;height: 550px;left: 30px;top: 150px;background-color: white;border:2px solid;padding: 10px;}  
  .instructions {font-size:30px;padding:20px;width: 1050px;height: 100px; border:2px solid;}
  .noteInput {padding:20px;width: 1000px;height: 300px;position: relative; left: 50px;top: 50px;vertical-align: top;text-align: left;font-size:15px;}
  .wordCount {font-size: 12px;margin-top: 50px;}
    
  /*Other school stuff*/
    .essay {display: none;background-color: white; position: absolute; top: 100px; left: 300px; border: 2px solid; width: 800px; height: 550px; padding: 50px;font-size: 10px; line-height: 30px; overflow-X: scroll; } 
    .essay-page {text-indent: 50px;}
    #discussion, #reflection {display: none;}
  #discussion button, #reflection button {cursor:pointer;position: absolute; top: 670px;left: 560px;font-size:30px;}
  .quiz {display: none;background-color: white;position: absolute;left: 400px; top: 150px; width: 700px; height: 440px;overflow-X:hidden;font-size: 40px;line-height: 70px; padding: 10px;border: 2px solid;}
  .question {background-color:#f2f2f2;margin: 30px;padding: 10px;border: 2px solid;}
  .radio {font-size: 20px;border:1px solid;margin: 2px;}
  #stopHW {font-size: 30px;position: absolute;left:100px;top: 135px;background-color: red; cursor:pointer;padding:5px;display:none;}
#therapy, #psych {display: none;}
.done {text-decoration: line-through;}

/*FUN*/
.stopfun {position: absolute;left: 200px; top: 100px; display: none;}
.stopfun img {cursor: pointer;width: 50px; height:50px;}
 /*TV*/
  #TVContainer {position:absolute; left: 300px;top: 150px;}
  #TVContainer iframe {border: 15px solid;border-radius:20%;}
  
  /*Nail art*/  
  .nailart {display: none;}
  .nailart canvas { position: absolute; left: 500px;width: 500px; background-color:white;border-radius:50%;height: 800px; border: 1px solid black; display: block; cursor: url('https://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Actions-draw-brush-icon.png') 10 130, auto; }
  .finger {border-radius:20%;position: absolute;top:200px;left:480px;z-index:-1;background-color: tan;width: 550px;height: 900px;}    
  .body {cursor:pointer;border:2px solid silver;width: 50px;height: 60px;border-radius:30%;position: absolute;top: 100px;}   
  .lid {cursor:pointer;border:2px solid;background-color:black;width:20px;height:40px;border-radius: 30%;position: absolute;left: 15px;top: 65px;z-index:-1;}
  .red {background-color: red;}
  .orange {background-color: orange;}
  .yellow {background-color: yellow;}
  .green {background-color: green;}
  .blue {background-color: blue;}
  .purple {background-color: purple;}
  .pink {background-color: pink;}
  .black {background-color: black;}
  .polish1 {position: absolute; left: 50px;top: 100px;}
  .polish2 {position: absolute; left: 250px;top: 250px;}
  .polish3 {position: absolute; left: 100px;top: 200px;}
  .polish4 {position: absolute; left: 220px;top: 70px;}
  .polish5 {position: absolute; left: 50px;top:400px;}
  .polish6 {position: absolute; left: 100px;top: 530px;}
  .polish7 {position: absolute; left: 370px;top: 400px;}
  .polish8 {position: absolute; left: 180px;top: 400px;}    
  .cotton {
            border: 2px solid;
            border-radius: 100%;
            width: 50px;
            height: 50px;
            position: absolute;
            top: 260px;
            left: 300px;
            background-color: white;
            cursor: pointer;
            background-color: white;
            background-image: url("https://www.transparenttextures.com/patterns/strange-bullseyes.png");
        }

  /*Logic puzzle*/
  .logic {display: none;}
  .logic table {border:3px solid black; border-collapse: collapse; empty-cells: hide;position: absolute; top:200px;left: 100px;background-color:white;}
  .logic td, .logic th {padding: 10px; border: 1px solid; text-align: center; font-size: 20px; cursor: pointer;}   
  .abc {writing-mode: vertical-rl; text-orientation: mixed;}
  .top {border-top: 3px solid black;}
  .bottom {border-bottom: 3px solid black;}
  .left {border-left: 3px solid black;}
  .clues {background-color: white;position: absolute;line-height: 50px;padding: 10px;font-size: 30px; left:720px;text-align: center;border:2px solid blue;width: 400px;}

  /*Phone game - nonogram*/
    #sudoku {background-color: aliceblue; display:none;position:absolute;left: 400px;top:10px;}
    #sudoku .board { display: grid; grid-template-columns: repeat(9, 1fr); width: 550px; margin: 0 auto; border: 2px solid black; }
    #sudoku .cell { width: 60px; height: 60px; border: 1px solid #ccc; text-align: center; font-size: 20px; margin:0px;padding:0px;}
    #sudoku .cell.maybe { color: #888; font-size: 14px; }  /* Style for maybe mode */
    #sudoku .cell:nth-child(3n) { border-right: 2px solid black; }
    #sudoku .cell:nth-child(27n + 1), .cell:nth-child(27n + 10), .cell:nth-child(27n + 19) { border-left: 2px solid black; }
    #sudoku .cell:focus { outline: none; background-color: #f0f0f0; }
    #sudoku .toggleMaybe { background: #f0f0f0; }
    
    
.knitting {position: absolute;left:400px;top:100px;display:none;}

.knitting .needle {
    position: absolute;
  width: 0; 
  height: 0; 
  top: 100px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 200px solid lightblue;
  clip-path: inset(0px 0px 50px 0px);
}


.knitting .needle1 {left:355px;transform:rotate(50deg);animation: knit1 1s infinite;top:90px;}
.knitting .needle2 {left:255px;transform:rotate(-50deg);animation: knit2 1s infinite;top:90px;}

@keyframes knit1 {
0% {transform:rotate(50deg);}
25% {transform:rotate(55deg);}
50% {transform:rotate(50deg);}
75% {transform:rotate(55deg);}
100% {transform:rotate(50deg);}
}

@keyframes knit2 {
0% {transform:rotate(-50deg);}
25% {transform:rotate(-55deg);}
50% {transform:rotate(-50deg);}
75% {transform:rotate(-55deg);}
100% {transform:rotate(-50deg);}
}

.knitting .yarn {width: 5px;height: 50px;background:blue;box-shadow:0px 0px 3px 0px blue;position: absolute;left:300px;border-radius:100%;}
.knitting .yarn1 {top:220px;animation: knit3 4s infinite;}
.knitting .yarn2 {top:255px;animation: knit4 4s infinite;}
.knitting .yarn3 {top:295px;animation: knit3 4s infinite;}
.knitting .yarn4 {top:335px;animation: knit4 4s infinite;}
.knitting .yarn5 {top:375px;animation: knit3 4s infinite;}
.knitting .yarn6 {top:415px;animation: knit4 4s infinite;}
.knitting .yarn7 {top:455px;animation: knit4 4s infinite;}
.knitting .yarn8 {top:495px;animation: knit3 4s infinite;}
.knitting .yarn9 {top:535px;animation: knit4 4s infinite;}
.knitting .yarn10 {top:575px;animation: knit3 4s infinite;}
.knitting .yarn11 {top:615px;animation: knit4 4s infinite;}
.knitting .yarn12 {top:655px;animation: knit3 4s infinite;}
.knitting .yarn13 {top:695px;animation: knit4 4s infinite;}
.knitting .yarn14 {height:30px;top:203px;left:310px;transform:rotate(90deg);}

@keyframes knit3 {
0% {left:300px;}
25% {left:299.5px;}
75% {left:300.5px;}
100% {left:300px;}
}

@keyframes knit4 {
0% {left:300px;}
25% {left:300.5px;}
75% {left:299.5px;}
100% {left:300px;}
}

@keyframes knit5 {
0% {top:495px;}
50% {top:499px;}
100% {top:495px;}
}

.knitting table {border-collapse:collapse;position:absolute;top: 495px;left:40px;transform:rotate(90deg);animation: knit5 1s infinite;}
.knitting td {border:4px solid blue;padding:2px;box-shadow:0px 0px 5px 1px blue;}
 

#dot-to-dot {display:none;}

#dot-to-dot .container{
  text-align: center;
  position:relative;left:300px;top:20px;
  width: 900px;
  border:2px solid;
  background:white;
    cursor: url(https://icons.iconarchive.com/icons/awicons/vista-artistic/48/edit-icon.png
) 0 130, auto;
}


#reading {display:none;}
#reading .flipbookRead { margin: 6em auto; width: 800px; height: 600px; position: absolute; transform-style: preserve-3d; perspective: 1000px; }
#reading .leaf { position: absolute; width: 50%; height: 100%; background-color: #fff; left: 60%; transform-style: preserve-3d; transition: transform 1s; transform-origin: left; border: 1px solid; }
#reading .page { position: absolute; width: 100%; height: 100%; top: 0; padding: 0px; }
#reading .page.front { transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0.1px); box-shadow: inset 5px 0 5px -5px #0005; }
#reading .page.back { transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 0.1px); box-shadow: inset -5px 0 5px -5px #0005; }
#reading .title { text-align: center; padding-top: 2em; }
#reading .pageNumber { font-size: 0.75em; position: absolute; bottom: 0.5em; }
#reading .front #reading .pageNumber { right: 0.75em; }
#reading .back #reading .pageNumber { left: 0.75em; }
#reading #front-external, #reading #back-external {display:none;}
#reading .letter:first-letter {font-size: 32px;} 
#reading .letter {font-size: 16px; }
#reading p {line-height:20px;text-indent: 2em;width:350px;position:relative;left:15px;}
#reading h2 {text-align:center;}
#reading #prevPage, #reading #nextPage {width: 400px;height:600px;position:absolute;top:100px;cursor:pointer;opacity:0;}
#reading #prevPage {left:90px;}
#reading #nextPage {left:490px;}
#reading .restofbook {display:none;}
           

.giraffe-book {display: none;}
.giraffe-book .flipbookz {transform:scale(0.4);box-sizing: border-box; margin: 6em auto; width: 800px; height: 600px; position: relative; transform-style: preserve-3d; left: 205px;top:-275px;perspective: 1000px; }
        .giraffe-book .flipbookz h2 {position: relative; top: -40px;}
        .giraffe-book .flipbookz p {position: relative;top:-100px;}
        .giraffe-book .leaf { box-sizing: border-box;position: absolute; width: 50%; height: 100%; background-color: #fff; left: 50%; transform-style: preserve-3d; transition: transform 1s; transform-origin: left; border: 1px solid; }
        .giraffe-book .page { box-sizing: border-box;position: absolute; width: 100%; height: 100%; top: 0; padding: 10px; }
        .giraffe-book .page.front {text-align:center;font-size: 30px; transform: rotate3d(0, 1, 0, 0deg) translate3d(0, 0, 0.1px); box-shadow: inset 5px 0 5px -5px #0005; }
        .giraffe-book .page.back { text-align:center;font-size: 30px; transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 0.1px); box-shadow: inset -5px 0 5px -5px #0005; }
        .giraffe-book .flipbookz .title{ font-size: 40px;text-align: center; padding-top: 0em; position: relative; top: -30px;}
        .giraffe-book .pageNumber { font-size: 0.75em; position: absolute; bottom: 0.5em; }
        .giraffe-book .front .pageNumber { right: 0.75em; }
        .giraffe-book .back .pageNumber { left: 0.75em; }
        .giraffe-book .contents-row { display: flex; }
        .giraffe-book .spacer { flex: 1; height: 1em; border-bottom: 1px dashed #000; }
        .giraffe-book .controls { position: absolute; top: 30px; left: 200px; }
        .giraffe-book .centered { display: flex; justify-content: center; align-items: center; }
        .giraffe-book .giraffe-image {width: 250px; height:200px;position: relative;top:-70px;left:-20px;}
        .giraffe-book .back.external img {position: relative; left: 0px;}
        .giraffe-book #prevPage, .giraffe-book #nextPage {cursor: pointer;opacity: 0;position: relative; margin: 10px;width: 40px; height: 250px;padding: 5px;top:15px;}
        .giraffe-book #prevPage {left: 590px;}
        .giraffe-book #nextPage {left: 845px;}

.instructions p {font-size: 20px;color: blue;cursor:pointer;}


#otherstuff {display:none;z-index:-1;}