/** This is for future Bee. If you forget how to do markup language, ALWAYS START 
WITH THE BODY AND UNIVERSAL CONTROLS before you start doing any detail work. You want 
to set the groundwork before you go in with the nitty gritty. Also don't forget to
set your items and subrows width to 100%. Please god it will make your life so
much easier. Also don't forget to love yourself and do your best. This shit's hard!
You got this queen! 

Future Note: If a child container is overflowing, check the padding and margins. Leave width alone

I'm fighting for my life here.**/

body {
    justify-content:center;
    background-image: url(greencomputerscreen.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    height: auto;
}

/**UNIVERSAL CONTROLS**/
.item {width: 100%}
.subrow {display: flex; width: 100%;}

/**TEXT UNIVERSAL CONTROLS**/
b {color: rgb(196, 234, 209)}
h2 {font-family: monospace;}
h1 {line-height: 10%; color: rgb(231, 255, 242);  
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(95, 255, 90), 0 0 5px rgb(163, 255, 195);
    font-family: monospace;}
p {color: rgb(107, 172, 130);
    padding: 10px; font-family: monospace; font-size: large;}
hr { width:100%; height:1px; background: #fff;}
img {cursor: pointer;}
a {color: rgb(107, 172, 130);
    padding: 10px; font-family: monospace; font-size: large;}
i {color: #9ae9a5;
 font-family: monospace;}

/**BACKBUTTON**/
.backbutton h2 { padding: 0px;
     color: aliceblue;
    margin: 20px;}
.backbutton {justify-content: flex-start;}

/**DATABASE TITLE SECTION**/
.databaseheader {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 10px;
    max-width: 1500px;
    min-width: 1000px;
    font-size:130%;
}

/**MAIN CONTAINERS**/
.container {
    display: flex;
    padding: 10px;
    flex-direction: row;
    gap: 10px;
}
.subcontainer { display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.sub1 {
    padding: 20px;
    }
.topbox {
    width: 100%; 
    transform: rotateZ(10deg);
    max-height: 400px;
    margin-left: 40px;}
.bottombox{ 
        background-image: url(blackcrtscreen.webp);
        height: 100%;
        padding: 20px;}
        
.sub2 { 
    padding: 30px;
    border: solid rgb(51, 116, 96);
    background-color: rgb(0, 0, 1);
    margin: 20px;
   
    }

/**PROFILE BOXES**/
.lockoverlay {position: absolute;
display: flex;
justify-content:center;
align-items: center;
margin-top: 50px;
margin-left: 50px;
opacity: 0;}
.lockoverlayTessa {position: absolute;
display: flex;
justify-content:center;
align-items: center;
margin-top: 125px;
margin-left: 95px;
opacity: 0;}
.profile { gap: 10px; display: flex;}
.profilebox {
    border: solid rgb(112, 155, 127);
    width: 100%;
    background-image: linear-gradient(to bottom, rgb(4, 4, 4), rgb(27, 41, 28))}
.profilepreviewdesc { padding: 15px; border-radius: 20px; }
.profilepicture {padding: 10px;}
.profilesubdetails {border: 2px solid rgb(51, 116, 96); margin: 15px;}

/**NON-PROFILE IMAGES**/
.arm {
    position: absolute;
    left: 23px;
    top: 80px;
    transition: all 0.1s ease-in-out;
}
.bestfriend {opacity: 0;}

/**PROFILE HOVER ANIMATIONS**/
.profilebox {transition: all 0.2s ease-in-out; }
.profilebox:hover { transform: scale(1.1); filter: brightness(120%); box-shadow: rgb(148, 252, 153);}

.bestfriend {transition: all 0.1s ease-in-out; }
.bestfriend:hover {opacity:0.3;  box-shadow: rgb(148, 252, 153);}

.lockoverlay:hover {opacity:1; transform: scale(1.1);}
.lockoverlay {transition: all 0.2s ease-in-out; }

.lockoverlayTessa:hover {opacity:1; transform: scale(1.1);}
.lockoverlayTessa {transition: all 0.2s ease-in-out; }

.topbox:hover {opacity:1; transform: scale(1.1);}
.topbox {transition: all 0.2s ease-in-out; }

.arm:hover {z-index: 2; transform: scale(1.1);}


/**AUDIO CONTROLS**/
.autoplayer {
    display: flex;
    flex-direction: row;
    align-items:end;
    position: fixed;
    bottom: 20px;
    z-index: 1;
}
#gramophone {
    z-index: 1;
    transition: all 0.2s ease-in-out; 
     height: auto;
    width: 10vw;
}
#gramophone:hover {transform: scale(1.1);}
.nowplaying { 
    display: flex;
    background-color: #9ae9a5;
    border: solid rgb(51, 116, 96);
    background-image: linear-gradient(to bottom, rgb(4, 4, 4), rgb(27, 41, 28));
    z-index: 1;
    padding: 15px;
    align-items: center;
    min-height: 30px;
    width: 10vw;
    margin-bottom: 15px;
}

/**CONTENT BOXES SCREEN SIZE BEHAVIOR**/
@media only screen and (min-width: 1500px) {
.sub1 {max-width: 300px;}

}

@media only screen and (max-width: 1650px) {
 h1 {font-size: large;}
}

@media only screen and (max-width: 1500px) {
    h1 {font-size: xx-large;}
    .profile {flex-direction: column;}
    .container {flex-direction: column;}
    .sub1 {order: 2; flex-direction: row; }
    .sub2 {order: 1; width: 90vw;}
    .topbox {max-width: 500px; transform: rotateZ(10deg) translateY(-70px) scale(1.3);}
    .bottombox {padding: 40px;}
    .arm {display: none;}
    .topbox:hover {opacity:1; transform: scale(1.4);}
}

@media only screen and (max-width: 1500px) {
    h1 {font-size: medium;}
}

 /**ON AND OFF BUTTONS**/
 .backbutton {display: none;}
 .databaseheader{display:none;}
 .mobilecontainer {display: none;}
 
/**MOBILE ERROR**/
@media only screen and (max-width: 600px) {
 .container{display: none;}
  body{
    background-image: url(MobileErrorImage.webp);
    background-color: black;
    background-size:contain;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
#gramophone {display: none;}
.nowplaying {display: none;}}