html { 
display: flex;
background-color: rgb(161 135 211);
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}

body { 
min-width: 445px;
min-height: 280px;
justify-self: center;
overflow: clip;
}

a { 
 text-decoration: none;
} 

.book { 
 display: grid;
 grid-template-columns: 50% 50%;
 grid-template-rows: 100%;
 width: 872px; 
 height: 668px;
}

.leftbookback, .leftbookfront { 
 grid-area: 1/1/1/1; 
 max-height: 100%;
}

.rightbookback, .rightbookfront { 
 grid-area: 1/2/1/2; 
}


.leftbookback img, .leftbookfront img, .rightbookback img, .rightbookfront img {
 max-height: 100%;
}

.leftsidecontent { 
 grid-area: 1/1/1/1;
 width: 100%;
 height: 89%;
 justify-self: center; 
 position: relative;
 top: 40px;
 left: 40px;
}

.leftsidecontent > img { 
 max-height: 50%;
 width: 80%;
 position: relative;
 left: 30px;
 top: 13px;
}

#unicornrun { 
 max-height: 90%;
 width: 80%;
 position: relative;
 top: 16px;
 left: 35px;
}

#portfolio { 
 position: relative; 
 max-width: 70%;
 top: 15px;
 left: 60px;
}

.leftsidecontenta1 { 
 grid-area: 1/2/1/2;
 width: 100%;
 height: 89%;
 justify-self: center; 
 position: relative;
 top: 50px;
 left: 60px;
}

.leftsidecontenta1 > img { 
 max-height: 80%;
 width: 60%;
 position: relative;
 left: 7px;
 top: 13px;
 z-index: 3;
}

.rightsidecontent { 
 grid-area: 1/2/1/2;
 width: 85%;
 height: 89%;
 justify-self: left; 
 position: relative;
 top: 40px;
 left: 40px;
 z-index: 3;
}

.rightsidecontent > img { 
 display: flex;
 flex-direction: column;
 max-height: 43%;
 position: relative;
 left: 7px;
 z-index: 3;
}

.rightsidecontenta1 { 
 display: flex;
 flex-direction: column;
 grid-area: 1/1/1/1;
 width: 100%;
 height: 100%;
 justify-self: left; 
 position: relative;
 top: 30px;
 left: 50px;
 z-index: 3;
}

.rightsidecontenta2 { 
 grid-area: 1/1/1/1;
 width: 100%;
 height: 100%;
 justify-self: left; 
 position: relative;
 top: 30px;
 left: 50px;
 z-index: 3;
}

.modulenamea1 > img, .institutionalized > img, .institutionnote > img {
 max-height: 100%;
 max-width: 100%;
 position: relative;
 left: 7px;
 z-index: 3;
 object-fit: contain;
}

.institutionnote > img { 
 grid-area: 1/1/1/1;
}

.modulenamea1 { 
 object-fit: contain;
 max-height: 13%;
 position: relative; 
 top: -250px;
 left: 10px;
 width: fit-content;
}

.modulename2 { 
 object-fit: contain;
 max-height: 13%;
 position: relative; 
 top: -200px;
 left: 10px;
 width: fit-content;
}
.modulename2 > img {

 max-height: 78%;
 max-width: 83%;
 position: relative;
 left: 7px;
 top: 250px;
 z-index: 3;
 object-fit: contain;

}

.ay { 
 height: 40%;
 width: 40%;
}

#gctc { 
 position: relative; 
 bottom: 40px;
 max-height: 40%;
} 

#gctc > img { 
}

#gctc > img:hover { 
 transform: scale(1.06) rotate(0.02turn);
 transition-duration: 0.3s;
}
 
#apple { 
 position: relative; 
 bottom: 100px;
 left: 140px;
}

#apple > img:hover { 
 transform: scale(1.06) rotate(-0.01turn);
 transition-duration: 0.3s;
}

.ay2 { 
 position: relative;
 top: 108px;
 left: 30px;
}

.ay2 > img { 
 height: 30%;
 transform: rotate(0.02turn);
}

.ay2 > img:hover { 
 transform: rotate(0.02turn) scale(1.06);
 transition-duration: 0.3s;
}

#ay2x > img { 
 transform: rotate(-0.01turn);
}

#ay2x > img:hover { 
 transform: rotate(-0.01turn) scale(1.06);
}

.modulename3 { 
 width: 100%;
}

.modulename3 > img { 
 width: 80%; 
 position: relative;
 left: 30px;
 top: 60px;
 
}

.ay3 > img {
 max-width: 100%;
 max-height: 100%;
}

#quebec.ay3 { 
 position: relative;
 top: 70px;
 left: 40px;
}

#wiphala.ay3 { 
 position: relative; 
 left: 180px;
 top: 20px;
} 

#wiphala.ay3 > img {
 max-width: 45%;
 max-height: 45%;
}

#ladybug > img, #angeldog > img, #room > img, #bjork > img, #unicorn > img, #skate > img, #alien > img {
 max-width: 35%;
 max-height: 35%;
}

#unicorn { 
 position: relative; 
 top: 70px;
 left: 30px;
}

#unicorn > img {
 transform: rotate(0.03turn);
}

#unicorn > img:hover {
 transform: rotate(0.03turn) scale(1.06);
 transition-duration: 0.3s;
}

#skate { 
 position: relative; 
 bottom: 40px;
 left: 210px;
}

#skate > img { 
 transform: rotate(-0.01turn);
}

#skate > img:hover { 
 transform: rotate(-0.01turn) scale(1.06);
 transition-duration: 0.3s;
}

#alien { 
 position: relative;
 bottom: 90px;
 left: 40px;
}

#alien > img { 
 transform: rotate(0.01turn);
}

#alien > img:hover { 
 transform: rotate(0.01turn) scale(1.06);
 transition-duration: 0.3s;
} 

#ladybug { 
 position: relative; 
 top: 70px;
 left: 40px;
}

#ladybug > img { 
 transform: rotate(0.01turn);
}

#ladybug > img:hover { 
 transform: rotate(0.01turn) scale(1.06);
 transition-duration: 0.3s;
}

#room { 
 position: relative; 
 bottom: 120px;
 left: 30px;
}

#room > img { 
 transform: rotate(-0.01turn);
 t
}

#room > img:hover { 
 transform: rotate(-0.01turn) scale(1.06);
 transition-duration: 0.3s;
}

#angeldog { 
 position: relative; 
 left: 230px;
 bottom: 110px;
}

#angeldog > img { 
 transform: rotate(-0.01turn);
}

#angeldog > img:hover { 
 transform: rotate(-0.01turn) scale(1.06);
 transition-duration: 0.3s;
}

#bjork { 
 position: relative; 
 left: 220px;
 bottom: 300px;
}

#bjork > img {
 transform: rotate(0.01turn);
}

#bjork > img:hover {
 transform: rotate(0.01turn) scale(1.06);
 transition-duration: 0.3s;
}

#quebec > img { 
 height: 30%;
 transform: rotate(-0.02turn);
}

#quebec > img:hover { 
 transform: rotate(-0.02turn) scale(1.06);
 transition-duration: 0.3s;
}

#wiphala > img { 
 transform: rotate(0.03turn);
}

#wiphala > img:hover { 
 transform: rotate(0.03turn) scale(1.06);
 transition-duration: 0.3s;
}

.institutionalized { 
 max-height: 10%;
 max-width: 70%;
 position: relative; 
 top: 50px;
 left: 40px;
}

#institution { 
 width: 300px;
 height: 300px;
 position: relative; 
 top: 80px;
 left: 30px;
}

#institution > img { 
 width: 90%; 
 height: 90%;
}

.institutionnote {
 display: grid;
 max-height: 40%;
 transform: rotate(0.01turn);
 position: relative; 
 top: 165px;
 left: 57px;
 width: fit-content;
}

.ay > img {  
 max-height: 60%;
 max-width: 60%;
 position: relative; 
 left: 20px;
}

.ay {  
 grid-area: 1/1/1/1;
height: fit-content;
width: 100%;
}

.institutionnote:hover { 
 transform: scale(1.06) rotate(0.01turn);
 transition-duration: 0.3s;
}

.contentnote { 
 display: inline;
 width: fit-content;
 height: fit-content;
} 

.contentnote > img {
 max-height: 28%;
 transform: rotate(-0.01turn);
 width: fit-content;
 position: relative; 
 top: 120px;
 left: 30px;
}

#aboutdesc { 
 position: relative; 
 top: 30px;
 left: -15px;
 width: 100%;
 max-height: 100%;
}

#aboutheader { 
 max-width: 60%;
 max-height: 100%;
 position: relative;
 top: 20px;
 left: -15px;
 
}

 nav { 
 font-family: American Typewriter;
 font-size: 13px;
 display: flex;
 flex-direction: column;
 width: 350px;
 height: 590px; 
 grid-area: 1/1/1/1;
 position: relative;
 top: 70px;
 right: 180px;
 padding-left: 10px;
}

.leftbookfront, .rightbookfront, .leftsidecontent {
 z-index: 3;
}

.leftbookfront { 
 position: relative;
 left: 35px;
}

.home, .contact { 
 height: 20px;
 align-self: center;
 padding-right: 30px;
 padding-bottom: 20px;
 justify-self: right;
}

.home { 
 background-image: url("images/assets/notes/rednote.png");
 background-size: 250px 40px;
 background-repeat: no-repeat;
 padding-right: 70px;
}

.contact { 
 background-image: url("images/assets/notes/purplenote2.png");
 background-size: 250px 40px;
 background-repeat: no-repeat;
 padding-right: 60px;
}

.home > p, .contact > p { 
 padding-left: 40px;
 align-self: center;
 margin-top: 12px;
}

.home > a, .contact > a { 
 position: relative; 
 left: 25px;
}

.communicationtechnology10 { 
 background-image: url("images/assets/notes/yellownote.png");
 background-size: 250px 60px;
 background-repeat: no-repeat;
 padding-right: 60px;
}

.communicationtechnology10 > p { 
 padding-left: 10px;
 z-index: 1;
 margin-top: 20px;
}

.communicationtechnology20 { 
 background-image: url("images/assets/notes/bluenote.png");
 background-size: 250px 53px;
 background-repeat: no-repeat;
 padding-right: 60px;
}

.communicationtechnology20 > p { 
 padding-left: 10px;
 z-index: 1;
 margin-top: 20px;
}

.communicationtechnology30 { 
 background-image: url("images/assets/notes/brightgreennote.png");
 background-size: 250px 53px;
 background-repeat: no-repeat;
 padding-right: 60px;
}

.communicationtechnology30 > p { 
 padding-left: 14px; 
 z-index: 1;
 margin-top: 18px;
}

.communicationtechnology10, .communicationtechnology20, .communicationtechnology30 {
 width: 250px;
 z-index: 2;
}

.navslide { 
 justify-self: right;
}

.stickynote { 
 display: grid;
 padding-left: 100px;
 transition-duration: 0.4s;
}

.stickynote > img {
 max-width: 100%;
 height: 100%;
 grid-area: 1/1/1/1;
}
.stickynote > p {
 grid-area: 1/1/1/1;
 padding-left: 15px;
}


.communicationtechnology10:hover .stickynote { 
 padding-left: 40px;
}
.communicationtechnology20:hover #an2note { 
 padding-left: 100px;
}

.communicationtechnology20:hover #an2note2 { 
 padding-left: 60px;
}

.communicationtechnology20:hover #an2note3 { 
 padding-left: 70px;
}

.communicationtechnology30:hover #an3note1 { 
 padding-left: 90px;
}

.communicationtechnology30:hover #an3note2 { 
 padding-left: 70px;
}

.communicationtechnology30:hover #an3note3 { 
 padding-left: 0px;
}

#an1note1 > img { 
 max-height: 41px;
 width: 100%;
}

/* CT20 */

#an2note { 
 padding-left: 150px;
}

#an2note > img { 
  max-height: 42px;
  width: 280px;
}

#an2note2 { 
 padding-left: 112px;
} 

#an2note2 > img { 
  max-height: 40px;
  width: 280px;
}

#an2note2 > a { 
 max-height: 100%;
 max-width: 100%;
 position: relative;
 right: 40px;
}

#an2note > a { 
 max-width: 150px;
 padding-left: 100px;
}

#an2note3 { 
 padding-left: 120px;
} 

#an2note3 > img { 
  max-height: 40px;
  width: 280px;
}

#an2note > img, #an2note2 > img, #an2note3 > img {
 grid-area: 2/1/2/1;
}

#an2note > p, #an2note2 > p, #an2note3 > p {
 grid-area: 2/1/2/1;
}

/* CT30 */

#an3note1 { 
 padding-left: 137px;
} 

#an3note1 > img { 
  max-height: 41px;
  width: 280px;
}

#an3note2 { 
 padding-left: 120px;
} 

#an3note2 > img { 
  max-height: 41px;
  width: 280px;
}

#an3note3 { 
 padding-left: 15px;
 text-wrap: nowrap;
 overflow: visible;
} 

#elayoutslide { 
 justify-content: right;
 width: 280px;
 text-wrap: nowrap;
 overflow: visible;
}

#an3note > img, #an3note2 > img, #an3note3 > img {
 grid-area: 2/1/2/1;
}

#an3note > p, #an3note2 > p, #an3note3 > p {
 grid-area: 2/1/2/1;
}

#an3note3 > p, #an3note3 > img {
 justify-self: right;

}

#an3note3 {
 padding-left: 60px;
}
 
#an3note3 > p {
 margin-left: 20px;
 width: 100%;
}

#an3note3 > img { 
  max-height: 43px;
  width: 280px;
  padding-right: 20px;
}

/* INDIVIDUALS */

.backbutton { 
 font-family: American Typewriter;
 font-size: 13px;
 grid-area: 1/2/1/2;
 justify-self: right;
 position: relative; 
 top: 85px;
 left: 40px;
 width: 70px;
 height: 40px;
 background-image: url("images/assets/notes/backnote.png");
 background-size: 500px 40px;
 background-repeat: no-repeat;
 padding-right: 80px;
}

.backlink > p { 
 height: fit-content;
 width: fit-content;
 position: relative;
 left: 100px;
 top: 1px;
 z-index: 5;
}

.modulenameindiv { 
 position: relative; 
 top: 20px;
 left: 20px;
}

.modulenameindiv > img { 
 max-width: 80%;
}

#indivvg1 { 
 position: relative;
 top: 35px;
}

#indivlogo { 
 z-index: 5; 
 position: relative;
 left: 20px;
 top: 10px;
 width: 55%;
} 

.indivnote { 
 grid-area: 1/1/1/1;
 z-index: 4;
 position: relative; 
 top: 150px;
 left: 100px;
}

.content { 
 display: grid;
}

.indivnoteimage { 
 grid-area: 1/1/1/1;
 max-width: 150%;
 max-height: 150%;
}

.indivnotetitle { 
 width: 270px;
}

#alienindivtitle { 
 position: relative;
 bottom: 150px;
 left: 390px;
}

#angeldogindivtitle {
 width: 240px;
 position: relative;
 bottom: 30px;
 left: 460px;
}

#applethrowindivtitle {
 width: 240px;
 position: relative;
 bottom: 120px;
 left: 560px;
 z-index: 3; 
}

#bjorkindivtitle {
 width: 300px;
 position: relative;
 bottom: 120px;
 left: 560px;
 z-index: 3; 
}

#skateindivtitle {
 width: 300px;
 position: relative;
 bottom: 120px;
 left: 520px;
 z-index: 3; 
}

#gctcindivtitle {
 width: 360px;
 position: relative;
 bottom: 110px;
 left: 470px;
 z-index: 3; 
}

#institutionalizedindivtitle {
 width: 360px;
 position: relative;
 bottom: 120px;
 left: 470px;
 z-index: 3; 
}

#ladybugindivtitle {
 width: 300px;
 position: relative;
 bottom: 120px;
 left: 520px;
 z-index: 3; 
}

#quebecindivtitle {
 width: 150px;
 position: relative;
 bottom: 120px;
 left: 650px;
 z-index: 3; 
}

#roomindivtitle {
 width: 300px;
 position: relative;
 bottom: 120px;
 left: 520px;
 z-index: 3; 
}

#unicornindivtitle {
 width: 300px;
 position: relative;
 bottom: 120px;
 left: 520px;
 z-index: 3; 
}

#wiphalaindivtitle {
 width: 230px;
 position: relative;
 bottom: 110px;
 left: 590px;
 z-index: 3; 
}

video, .indivimage { 
 grid-area: 1/1/1/1;
 max-width: 120%;
 max-height: 120%;
 z-index: 6;
 position: relative;
 top: 60px;
 left: 80px;
 z-index: 6;
 filter: drop-shadow(2px 4px 6px rgb(7 18 44));
}

#polygonunicornindiv { 
 max-width: 80%;
 max-height: 80%;
 position: relative; 
 left: 200px;
 top: 30px;
}

#churchskateindiv { 
 max-width: 100%;
 max-height: 50%;
 position: relative;
 top: 30px; 
 left: 240px;
}

#stickersheetindiv { 
 max-width: 100%;
 max-height: 60%;
 position: relative;
 top: 30px; 
 left: 210px;
}

#bjorkindiv { 
 max-width: 100%; 
 max-height: 80%;
 position: relative;
 left: 120px;
 top: 37px;
}

#angeldogindiv { 

 max-width: 100%; 
 max-height: 80%;
 position: relative;
 left: 150px;
 top: 25px;
}

#roomindiv { 
 max-width: 100%; 
 max-height: 90%;
 position: relative;
 left: 120px;
 top: 25px;
}

.notetitle { 
 width: 140px;
}

.notetitle > img {
 max-width: 100%; 
 max-height: 100%;
} 

#institutionalizedtitle { 
 position: relative;
 left: 10px;
}

#gctctitle { 
position: relative; 
 left: 230px;
 bottom: 70px;
}

.titlelink > img { 
 max-width: 100%; 
} 

#applethrowtitle { 
 position: relative;
 left: 10px;
 bottom: 50px;
}

#quebectitle { 
 position: relative; 
 left: 250px;
 bottom: 70px;
}

#wiphalatitle { 
 position: relative;
 bottom: 120px;
 left: 30px;
}

#unicorntitle { 
 width: 200px;
 position: relative; 
 top: 70px;
}

#skatetitle { 
 width: 170px;
 position: relative; 
 left: 207px;
 bottom: 30px;
}

#alientitle { 
 width: 200px;
 position: relative; 
 bottom: 100px;
 left: 10px;
}

#ladybugtitle { 
 width: 170px;
 position: relative; 
 top: 70px;
 left: 30px;
}

#angeldogtitle { 
 position: relative; 
 left: 250px;
 bottom: 120px;
} 
 
#roomtitle { 
 width: 200px;
 position: relative; 
 bottom: 130px;
}

#bjorktitle { 
 width: 200px; 
 position: relative; 
 bottom: 300px;
 left: 190px;
}

#port2 {
 position: relative; 
 top: 100px;
}

#borderp { 
 width: 370px;
 position: relative;
 left: -20px;
 top: 50px;
}

.activenavnote { 
 display: grid;
 padding-left: 40px;
}

.activenavnote > img {
 max-width: 100%;
 height: 100%;
 grid-area: 1/1/1/1;
}
.activenavnote > p {
 grid-area: 1/1/1/1;
 padding-top: 1px;
 padding-left: 25px;
}

#activean2note { 
 padding-left: 96px;
}

.navslide2 {
 height: 40px;
}

#activean2note > img { 
  max-height: 42px;
  width: 280px;
}

#activean2note2 { 
 padding-left: 80px;
} 

#activean2note2 > img { 
  max-height: 40px;
  width: 280px;
}

#activean2note2 > p { 
 padding-top: 1px;
 padding-left: 25px;
 position: relative;
 left: 5px; 
 bottom: 45px;
}

#activean2note2 > a { 
 max-height: 40px;
 max-width: 100%;
 position: relative;
 right: 40px;
}

#activean2note3 { 
 padding-left: 50px;
} 

#activean2note3 > img { 
  max-height: 40px;
  width: 280px;
}

#activean2note3 > p { 
 padding-top: 1px;
 padding-left: 25px;
 position: relative;
 left: 5px; 
 bottom: 45px;
}

#activean2note3 > a { 
 max-height: 40px;
 max-width: 100%;
 position: relative;
 right: 40px;
}

#activean3note2 { 
 padding-left: 50px;
} 

#activean3note2 > img {
 height: 42px;
}

#activean2note2 > img { 
  max-height: 40px;
  width: 280px;
}

#activean2note2 > p { 
 padding-top: 1px;
 padding-left: 25px;
 position: relative;
 left: 5px; 
 bottom: 45px;
}

#activean2note2 > a { 
 max-height: 40px;
 max-width: 100%;
 position: relative;
 right: 40px;
}

footer { 
 width: 600px;
 height: 100px;
 justify-self: center; 
}

footer > img { 
 max-width: 100%;
 max-height: 100%;
 justify-self: center;
}

#contactlogo { 
 z-index: 5;
 position: relative;
 left: -400px;
 top: 2px;
}

.contactme, .email, .phone { 
 max-width: 70%;
 max-height: 100%;
 position: relative;
 bottom: 330px;
 left: 20px;
}

.email, .phone { 
 position: relative; 
 bottom: 290px;
}
.phone {
 max-width: 90%;
 max-height: 90%;
}

.email { 
 max-width: 140%;
 max-height: 140%;
}