/* 

Wow!!!! are you reading this message?!?!??!

NEEEEEEERRRRRRRRRDDDDDDDDDD

*/


@font-face {
    font-family: "Montserrat";
    src: url("https://krakn.neocities.org/Montserrat.ttf") format("truetype");
}

body {
    font-family:"Montserrat";
    transition:0.75s;
      background-image: url("https://i.postimg.cc/5yssNw14/dance.jpg");
      background-blend-mode: overlay;
      background-size: 1650px;
    letter-spacing: 1.5px;
    padding-top:20px;
    font-size:20px;
    background-color:#2a2c26;
        color: #899baf;
}

hr {
color: #6d81a3;
}


.main {
    width:1200px;
    height:700px;
    max-width:100%;
    max-height:auto;

    display:flex;
    border: 2px solid black;
    margin: 0 auto;
}

#flex {
    display: flex;
}

.navbar {
    width:450px;
    height:auto;
    max-width:100%;
    max-height:auto;
    border: 2px solid black;
    background-color: #9fa5a8;
    color:rgb(0, 0, 0);
    margin:0 auto;
    font-size:45.5px;
    position:relative;
}

.navbar p {
    padding-left:5.5%;
}

.navbar ul {
    display:block;
    list-style-type:none;
    font-size:45px;
}

.navbar ul a {
    color:#7f354a;
    font-weight: bold;
}

.navbar ul a:hover {
    color:white;
    background-color: black;
    transition:0.5s;
}

.navbar ul a:Visited {
    width:10px;
    color:#b24a17;
} 

.navbar img {
    /* opacity:0%; */
    width:50%;
    padding:10% 15% 0% 20%;
    border-radius: 50%;
}


.border img{
    width:56%;
    margin-top:25px;
    border: outset 8.5px rgb(0, 0, 147);
    border-radius: 50%;
}

img {
  filter:grayscale(45.5%);
}

#left {
  /* contains javascript that randomizes image */
  width:600px;
  max-width:100%;
  height:600px;
  grid-area:left;
  
}

a {
  transition:0.5s;
  color:#b24a68;
  
}

a:hover {
    color:#00c896;
    background-color:black;
}

a:visited {
    color:#b24a17;
}

a:hover:visited {
    color:#00c896;
    background-color:black;
}

.content {
    width:950px;
    height:auto;
    max-width:100%;
    max-height:auto;
    border: 2px solid black;
    background-color: #2a2c26;
    margin: 0 auto;
    justify-content: center;

     
    overflow-y: scroll;
    overflow-x: hidden;
    
    grid-area:right;
}

.content p, h1, h2, h3, ul, li {
    padding-left: 5.5%;
}

ul li {
    list-style:none;
}

/* Below determines whether comms are open/closed */
.content h2 {

    /* open  */
    background-color: rgb(55, 232, 144);
    color: black;

    /* closed  */
    /*background-color: rgb(182, 11, 77);*/
    /*color: white; */
}

.rand-quotes {
    width:70%;
    margin-left: 15.5%;
    justify-content: center;
}

.content img {
  width:300px;
  border:none;
  border-radius:15%;
}


/* -------------------

MOBILE USE 

-------------------- */

@media only screen and (max-width: 750px) {
    .main {
    flex-wrap:wrap;
    }
    .navbar {
        /* overflow:hidden; */
        position:relative;
c
        width:100%;
        height:17%;
        display:flex;
        flex-direction:column;
        
    }

    .navbar img {
    z-index:1;
    opacity:0;
    width:26.5%;
    padding:-10% 0 0 20%;
    margin: -10% 0 0 0;
}

    #sparkle {
        margin-top:-30px;
    }

    .navbar ul {
        display:flex;
        font-size:13.6px;
        margin-top:-220px;
        padding-left:20px;
        letter-spacing: 1.5px;
        font-weight: bold;
        justify-content: space-evenly;
        z-index:2;
    
    }

    .border img{
         width:63%;
        border: outset 6.5px rgb(0, 0, 147);
    }

    .content {
        transition:0.5s;
        height:82.7%;
    }
}

@media only screen and (max-width: 650px) {

    .navbar {
        height:12.5%;

    }

    .content {
        height:86.85%;
    }

    .navbar ul {
        width:70%;
    display:flex;
    flex-wrap:wrap;
    font-size:20px;
    margin:-175px;
    padding-left:245px;
    letter-spacing: 1.5px;
    justify-content: space-between;
    font-weight: bold;
    
    }

}

@media only screen and (max-width: 450px) {
    .navbar ul { 
            margin:-155px;
        padding-left:220px;
        padding-top:12.5%;
        }


    #sparkle {
        margin-top:-40px;
    }
}


@media only screen and (max-width: 390px) {
    .navbar ul { 
            margin:-130px;
        padding-left:185px;
        padding-top:15.5%;
        }


    #sparkle {
        margin-top:-55px;
    }
}