/* GENERAL ROOM STUFF */

* {
    box-sizing: border-box;
    color: white;
}

body {
    background-color: black;
    font-family: "Andale Mono", sans-serif;
}

section {
    background-color: black;
    width: 1423px;
    margin: 0 auto;
}

.room {
    height: fit-content;
    width: 1423px;
    z-index: 0;
    border: 1px solid rgba(0, 0, 0, 0);
}

.room-sign {
    border: 1px solid black;
    background-color: rgba(0, 0, 0, 1);
    text-align: center;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

.room-sign p {
    position: relative;
        top: -75px;
        right: 20px;
    float: right;
    z-index: 10;
}

h1.room-number {
    position: relative;
    z-index: 5;
}

.buttonholder {
    display: inline-block;
    position: relative;
    bottom: 670px;
    left: 1300px;
}

.button {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

a, p, h1, h2 {
    color: white;
    text-decoration: none;
}

a:hover {
    color:rgb(148, 43, 24);
    text-decoration-color: rgb(148, 43, 24);
}

u a:hover {
    color:rgb(148, 43, 24);
    text-decoration-color: rgb(148, 43, 24);
    text-decoration: underline;
}

/* ROOM 0 */

#room0 {
    background: rgba(0, 0, 0, 1);
    box-sizing: border-box;
    padding-left: 20px;
    padding-bottom: 10px;
    border: 1px dashed rgb(51, 51, 51);
}

#room0 ul {
    list-style-type: none;
}

#room0 ul .asterisk {
    list-style-type: '* ';
}

#room0-photo {
    width: 800px;
    height: 500px;
    border: 1px solid rgba(0, 0, 0, 0);
    float: right;
    padding-top:20px;
}

#room0-photo img {
    border-radius: 10px;
    width: 350px;
    margin: 10px;
    padding: 4px;
}

#room0-photo img:hover {
    border-radius: 10px;
    border: 1px dashed rgb(51, 51, 51);
    
}

#room0-photo-im {  
    rotate: 2deg;
}

#room0-photo-bj {
    rotate: -3deg;
    position: relative;
        top:40px;
        
}

#room0-photo-ex {
    rotate: -2deg;
    position: relative;
        top:10px;
        
}

#room0-photo-ll {
    rotate: 3deg;
    position: relative;
        top:60px;
        
}

.grey {
    color: rgb(51, 51, 51);
}

/* DESKS (individual projects) */

/* .desk, .desk-picture, .desk-caption {
    border: 1px solid white;
} */

.desk {
    background-color: rgb(22, 22, 22);
    width: 100%;
    height: fit-content;
    padding: 25px 0;
}

/* .desk-picture, .desk-caption {
    height: 300px;
    border: 1px solid white;
    display: inline-block;
    margin: 0 50px;
} */

.desk-content-box {
    height: fit-content;
    width: fit-content;
    padding: 0 25px;
    margin: 0 auto;
    /* border: 1px solid green; */
    text-align: center;
}

.desk-content-box img {
    margin-bottom: 30px;
    height: 300px;
    display: inline-block;
    border-radius: 10px;
}

.desk-content-box.left {
    text-align: right;
}

.desk-content-box.right {
    text-align: left;
}

.desk-content-box.center {
    text-align: center;
}

/*.desk-content-box-holder {
    width: fit-content;
    height: fit-content;
    border: 1px dashed rgb(51, 51, 51);
    display: flex;
    margin: 0 auto;
}*/

.desk-content-box-holder {
    width: fit-content;
    height: fit-content;
    /* border: 1px solid green; */
    display: flex;
}

.border {
    width: fit-content;
    height: fit-content;
    border: 1px dashed rgb(51, 51, 51);
    margin: 0 auto;
    padding-top: 25px;
    padding-bottom: -10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -20px;
}

.desk-caption {
    padding: 0 20px;
}

.desk-caption.left {
    float: left;
    text-align: right;
}

.desk-caption.right {
    float: right;
    text-align: left;
}


.video {
    width: 640px;
    height: 360px;
    background-size: 640px, 360px;
    border-radius: 10px;
}

.photo-substitute-holder {
    width: inherit;
    display: flex;
}

/* particulars for desks specific to certain rooms */

/* ROOM 11 */

#room11 .video {
    background-image: url(images/room11/floor4-room11-video-unhover.jpg);
}

#room11 .video:hover {
    background-image: url(images/room11/floor4-room11-video-hover.jpg);
}

#room11 .button {
    margin: 0 auto;
    width: fit-content;
    height: fit-content;
    background-image: url(images/room11/floor4-room11-button-unhover.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 50px;
    padding-right: 50px;
}

#room11 .button:hover {
    background-image: url(images/room11/floor4-room11-button-hover.jpg);
}
   

/* ROOM 9 */

#room9 .video {
    background-image: url(images/room9/floor4-room9-video-unhover.jpg);
}

#room9 .video:hover {
    background-image: url(images/room9/floor4-room9-video-hover.jpg);
}

.photo-substitute {
    /* border: solid 1px yellow; */
    background-size:cover;
}

#room9 .photo-substitute-holder {
    height: 333.09;
}

#room9 #bts1 {
    background-image: url(images/room9/floor4-room9-bts1-unhover.jpg);
}

#room9 #bts1:hover {
    background-image: url(images/room9/floor4-room9-bts1-hover.jpg);
    transform:rotateX(40deg) rotateY(2deg) rotateZ(6deg);
}

#room9 #bts2 {
    background-image: url(images/room9/floor4-room9-bts2-unhover.jpg);
}

#room9 #bts2:hover {
    background-image: url(images/room9/floor4-room9-bts2-hover.jpg);
    transform:rotateX(-20deg) rotateY(-60deg) rotateZ(-2deg);
}

#room9 #bts3 {
    background-image: url(images/room9/floor4-room9-bts3-unhover.jpg);
}

#room9 #bts3:hover {
    background-image: url(images/room9/floor4-room9-bts3-hover.jpg);
    transform:rotateX(-35deg) rotateY(-12deg) rotateZ(5deg);
}

#room9 #bts4 {
    background-image: url(images/room9/floor4-room9-bts4-unhover.jpg);
    margin: 0 auto;
}

#room9 #bts4:hover {
    background-image: url(images/room9/floor4-room9-bts4-hover.jpg);
}

#room9 #bts5 {
    background-image: url(images/room9/floor4-room9-bts5-unhover.jpg);
    position: relative;
    bottom: 117px;
}

#room9 #bts5:hover {
    background-image: url(images/room9/floor4-room9-bts5-hover.jpg);
    transform:rotateX(-13deg) rotateY(5deg) rotateZ(-40deg);
}

#room9 #bts6 {
    background-image: url(images/room9/floor4-room9-bts6-unhover.jpg);
}

#room9 #bts6:hover {
    background-image: url(images/room9/floor4-room9-bts6-hover.jpg);
    transform:rotateX(60deg) rotateY(-3deg) rotateZ(-3deg);
}

#room9 #bts7 {
    background-image: url(images/room9/floor4-room9-bts7-unhover.jpg);
}

#room9 #bts7:hover {
    background-image: url(images/room9/floor4-room9-bts7-hover.jpg);
    transform:rotateX(-0deg) rotateY(0deg) rotateZ(65deg);
}



/* ROOM 3 */

#room3 .desk:hover {
    cursor: grab;
}

#room3 .desk-content-box img {
    height: 180px;
}

#room3 .video {
    height:358px;
    background-image: url(images/room3/floor4-room3-video-unhover.jpg);
}

#room3 .video:hover {
    background-image: url(images/room3/floor4-room3-video-hover.jpg);
}

#room3 .photo-substitute-holder {
    justify-content: center;
}

#room3 .photo-substitute {
    margin: 0px 5px;
    border-radius: 10px;
}



#room3 #still1 {
    background-image: url(images/room3/floor4-room3-still1-unhover.jpg);
}

#room3 #still1:hover {
    background-image: url(images/room3/floor4-room3-still1-hover.jpg);
}

#room3 #still2 {
    background-image: url(images/room3/floor4-room3-still2-unhover.jpg);
}

#room3 #still2:hover {
    background-image: url(images/room3/floor4-room3-still2-hover.jpg);
}

#room3 #still3 {
    background-image: url(images/room3/floor4-room3-still3-unhover.jpg);
}

#room3 #still3:hover {
    background-image: url(images/room3/floor4-room3-still3-hover.jpg);
}

#room3 #still4 {
    background-image: url(images/room3/floor4-room3-still4-unhover.jpg);
}

#room3 #still4:hover {
    background-image: url(images/room3/floor4-room3-still4-hover.jpg);
}

#room3 #still6 {
    background-image: url(images/room3/floor4-room3-still6-unhover.jpg);
}

#room3 #still6:hover {
    background-image: url(images/room3/floor4-room3-still6-hover.jpg);
}

#room3 #still7 {
    background-image: url(images/room3/floor4-room3-still7-unhover.jpg);
}

#room3 #still7:hover {
    background-image: url(images/room3/floor4-room3-still7-hover.jpg);
}

#room3 #still8 {
    background-image: url(images/room3/floor4-room3-still8-unhover.jpg);
}

#room3 #still8:hover {
    background-image: url(images/room3/floor4-room3-still8-hover.jpg);
}

#room3 #still9 {
    background-image: url(images/room3/floor4-room3-still9-unhover.jpg);
}

#room3 #still9:hover {
    background-image: url(images/room3/floor4-room3-still9-hover.jpg);
}

#room3 #still10 {
    background-image: url(images/room3/floor4-room3-still10-unhover.jpg);
}

#room3 #still10:hover {
    background-image: url(images/room3/floor4-room3-still10-hover.jpg);
}




/* ROOM 2! */

#room2 .video {
    height:358px;
    background-image: url(images/room2/floor4-room2-video-unhover.jpg);
}

#room2 .video:hover {
    background-image: url(images/room2/floor4-room2-video-hover.jpg);
}

#room2 .desk-content-box img {
    height: 180px;
    margin-bottom: 5px;
}


/* ROOM 5 */

#room5 .desk-content-box .video-ll:hover {
    border: solid 5px rgb(255, 165, 30);
}

#room5 .desk-content-box.still img {
    height:180px; 
    margin-bottom: 5px;
}

#room5 .desk-content-box.bts img {
    height:400px; 
    margin-bottom: 5px;
}



/* ROOM 10 */

#room10 .photo-substitute {
    height:500px;
    width: 888.888px;
    margin: 0 auto;
    background-image: url(images/room10/floor4-room10-bts1-red.jpg);
    border-radius: 10px;
}

#room10 .photo-substitute:hover {
    background-image: url(images/room10/floor4-room10-bts1.jpg);
}



/* ROOM 7 */

#room7 .desk-content-box #video-iasas:hover {
    transform:rotate(20deg);
    width:350px;
    height: 350px;
}