body{
   
    background-image: url("https://www.toptal.com/designers/subtlepatterns/uploads/darkness.png");
    font-family: "Sriracha", cursive;

    display: grid;
    /* border: solid yellow 4pt; */
    border-radius: 10px;
    min-height: 97vh;

    grid-template-columns: 1fr 1024px 1fr;
    grid-template-rows: 1fr 808px 1fr 60px;

    cursor: none;

    place-items: center;

    overflow: scroll;

    user-select: none;
}

h1{
    padding: 0;
    margin: 0;
}

ul{
    list-style-position: inside;
    list-style-image:url(photos/emoji.png);
    width: 25%;
    margin: 0 auto;
    padding-bottom: 5pt;
}

li{
    text-align: left;
}

main{
    display: grid;
    justify-content: center;
    align-items: center;
    /* border: dotted white 1pt; */
    background-image: url(photos/corkboard-real.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    border: solid rgb(77, 50, 14) 10pt;
    border-radius: 15pt;


    width: 100%;
    grid-row: 2;
    grid-column: 2;

    grid-template-rows: 20% 80%;
    grid-template-columns: 1fr;

    
    
}

a{
    cursor: none;
}

button{
    cursor: none;
}

#custom-pointer{
    position: fixed;
    top: 0;
    left: 0;
    /* display: none; */

    width: 40px;
    height: 40px;

    pointer-events: none;

    z-index: 10;

}


#pointer{
   position: fixed;

    width: 40px;
    height: 40px;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    transition: width 0.1s ease-in-out, height 0.1s ease-in-out;

    z-index: 10;
}

.active #pointer{
    width: 20px;
    height: 20px;

    z-index: 10;
}

.main-header{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    /* background-color: #420061; */
    /* background-image: url(photos/title-text.png); */
    width: 100%;
    grid-row: 0;

    height: 100%;
    font-size: x-large;
    text-align: center;
    place-items: center;
    
    

    
    
}

.main-body{
    display: grid;
    /* background-color: aqua; */
    grid-column: 0;
    grid-row: 2;

    height: 100%;

    align-items: center;
    justify-content: center;

    grid-template-rows: 1fr;
    grid-template-columns: 100%;

    
}

.main-component{
    align-items: center;
    justify-content: center;
    text-align: center;
}


.box{
    display: inline-block;
    /* border: solid rgb(248, 248, 248) 4pt; */
    border-radius: 10px;
    /* background-color: #002d5f; */
    color: rgb(221, 243, 19);
    width: 75%;
    justify-content: center;
    
    
    
}

.images{
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
    justify-content: center;
    /* border: solid gray 3pt; */
    align-items: flex-end;
    
}

.picture-and-text{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

   place-items: center;
   align-items: start;

    min-width: 120px;
    height: auto;

   transform: rotate(0deg);
   
}

.portrait-photo{
    width: 100%;
    height: auto;
    

    

    border: solid black 1pt;
    border-radius: 10pt;

   

}

.portrait-background{
    max-width: 120px;
    height: auto;
    

    grid-row: 1;
    grid-column: 1;
}

.portrait-link{
    grid-row: 1;
    grid-column: 1;

    max-width: 80px;
    height: 80px;

    margin-top: 15px;

     z-index: 1;

   
}

a.game-banner{
    height: 80px;
    width: 160px;

}

div.game-banner{
    display: grid;

    transform: rotate(0deg);
}

img.game-banner{
    border-radius: 8pt;
    width: 160px;
    max-height: 80px;
    border: solid black 5pt;
}


#left-main-body{
    /* background-color: brown; */
    height: 100%;
    display: grid;

    margin-top: 10pt;

    grid-template-columns: repeat(25,40px);
    grid-template-rows: repeat(15,40px);
}

#right-main-body{
    /* background-color: rgb(42, 230, 5); */
    height: 100%;

    display: grid;
    grid-template-rows: repeat(9,10%);
    grid-template-columns: 50% 50%;

    grid-template-areas: 
    "box-0 box-0"
    "box-1 ."
    "box-1 box-2"
    ". box-2"
    "box-3 ."
    "box-3 box-4"
    ". box-4"
    "box-5 ."
    "box-5 .";

    
}

#discordIcon{
    max-width: 40px;
    height: auto;
    border-radius: 15pt;
}

#spaceShipParent{
    position: absolute;
    pointer-events: none;
    /* display: none; */
    top: 0;
    left: 0;

    z-index: 8;

    display: none;

    height: auto;
    width: 80px;
}

#spaceShip{
     position: absolute;

     transform: rotate(0rad);

     height: auto;
     width: 80px;


     
}


#SpaceShip-Toggle{
    background-image: url(photos/spaceShipPostItNoteGrey.png);
    background-size: 40px;

    background-color: transparent;
    border: none;
    

    height: 40px;
    width: 40px;
}

#funnyImage{

   text-emphasis: bold;
    
}

#title-text{
    width: 1024px;
    height: auto;
}

.popUpInfo{
    position: absolute;
    visibility: visible;
    height: 500px;
    width: 600px;
    background-color: gray;
    margin-right: 300px;
    z-index: 2;
    border-radius: 10pt;
    border: solid black 5pt;

    /* display: grid;
    grid-template-rows: repeat(10,10%);
    grid-template-columns: 25% 50% 25%; */

}


footer{
    position: relative;
    
    color: white;
    bottom:0px;

    width: 1fr;
    
    grid-column: 3;
    grid-row: 4;

    margin-left: 50%;

    white-space: nowrap;

    text-align: end;
    overflow: hidden;
    
    place-items: end;

    
}