/*                                                                                                  
                                                                                 -%..               
                                                                              ..=%.                 
                                                                              %*%.                  
                                                                             %+%.                   
                                             ....                           :-#.                    
                                     ...**:...:=+=##.                      .-@+                     
                               .*+.............#=+*+=+.                   .%%@.                     
                       ...#:....................==++*++.                 .:+@=.                     
                    .:...............%%-@%#:....*-==+%@+%                .#@@.                      
                   ...........@.@+##%.:..........-==++%#:+#%@@%####%    .#%@:.                      
                   ....*@%@%%.:..................===+=##++%%@%@%%%**  .#%@%%.                       
                   %............%+-+#............-====+##=+@@%@@@@+*#**%%@%                         
                   ...........#:=%-=..+#..........-===*++%@@@@@@%@%#%%%@%@                          
                  ...........:.#.%%.%..:=.........@==-**+*@@%@@@#*@%@%@@.                           
                  %........-*.:*%@:*@.#%..........:====*=+%%@%@@%%@%@@..                            
                  +..........=..%*%:::#..@.......:.#--===++@@@@%@@@%@#.                             
 .               .............%-.:#%-:....:%:...::::==-=+++%%@@@@%@@%%.               ....          
                 ..........:..-...-.:.-:...::*.::...==--==++@%@@%@@@#%#.    .%+:*%@::*:--.          
                 =........:..%...:+.:..#..:..:--.::.@=--==+=@@@@@@%@**#   .:=**=::=@+:%.            
                 #.......:..%:...:#....:@::....#+::::=-=====+@@%%@@@%**.++++++-%#:@@@@@=%.          
                ........:..@:....*=-:...::+..:.::@@::#-===++*%@@@@@%%-*+++%-@@@@:#@@@@@#%+.         
                ......=...+%....:%.:%....@..:-:.::.-:--+====+=@@%*#@%**+#*:%@@@@##+%%@@=.           
                .....@.....-...%#%..+....%:%%:.::.::::===-+*==@%@##@*+#*%%@@@@%.%.  .@@@.           
                =...%.....::%..*%%..-...::%+.::::..:::%+=-++=++#@#%%+#@@%%@@..      .+.+.           
               .@.......%#=:-..:%%..-:.::.#-.:.::.:::::+=+==++=%%@%@@@@@%%.         %.              
                :.........=:....-+..:+:::.%:::::.::::::*+=+=++=+@@@@@@@@%.                          
                ...........=.%=::::.:@:%:::::::::::::::%*+==*#**%@@@@@@%%.                          
                ...........=%#%::..:=:%:##.::::::::::::**+++=++=%@@%%@@%@%.                         
               .............@::-%:*.:%::-=%-++:::::::::+*+=+=++=@@@%@@@%%%                          
               *.............:-=..:.-::*..::--::::::::=-+++*==++%%@@@%@@#%.                         
               ..........#...:%..**%::*=@@#+%:::::.::%@-*++*+=++@@@@@%@@%#%.                        
                ::.......*.:#:-:...:.*#@.:%#%.::::::::%-*=+***+*#@@@%%@@**+                         
                :.:.......*:@.%#.*.%:@*@:::%-.::::.-=:%=+++++*++#%@@@@@@*+*                         
               .=.........@:%:*.%:::%.::.:-@::::::-%::@-++*++*++%@%@@@@@**@                         
               .%:............::%:::%=@*+=-:-:::::::::%-*++=*++*@@@@@@@%*+:                         
                .%.........=%-::%:.:=-%::..:-::-::::----+*+#*+*#+@@%@@@#++                          
                .:..............%.::..:+-:::::-:-%::-+%:+****+*+@@%@@@@*++.                         
                ..:.......:.....::.::::-=#:::--:-:::*-%-+*++*+*+@@%@@%@**@.                         
                .*.=.:....:....::-%--::-%+:::-::::-%:-%-+*+++=**@@@@@@%**:                          
                 #-:@..::::::.:%:-=@-::-@-:::-:%::%:--%:*++**+*#%@%%@@+*#.                          
                 :...#...:.:.....:=@#::-@-::::=::%:-=**=*++**=**@@@@@@***.                          
                 ..:..-::.#..:::::-@%::-%-:-::::=-:-@-#=++#****+@@@@@@*#%                           
                 .::-.:::::%:.::#:-=%::=@=::-+--=--+--=-*#+*+*+*@@@@@%##:                           
                  *:.%:.:*:.#::::::-%::-%=::=-:-%%----@-*++**#*#@@@@@%%%.                           
                  %:::-::%:::*:::+:-@-:=@=:-=::-:::-@-=-*++##*++@@@@%*%%.                           
                  .:*:::#-+::=-::+==@=-#@-:--:--%-=-:-#-++**=*#*%@@@@#%@.                           
                  .:::+:::.:%::::-:#@*%%%---+:%-:%+-:%+-#**+=***@@@@@%%=.                           
                   :::::%:-:#:#::@%:=--=+-%-:-%-:-@--=-=%+**+**+@%%@@%#.                            
                   %::@::#::=:::*:=:-*:==%--:=-::%---=--%*#****#%@@@%%#.                            
                   ::::::-.::+::::%:-%--+::#-:::@::----=#*#*#*##@@@@%*@.                            
                   .::::::=%:::--#-#-*---:-%::-@--:-----@##+*#*#%@@%%#=.                            
                   .-::::::::-:-#-::#%%--:-:+%=:--:-==-=%*%+##*#%@@@%#.                             
                   .%.::::::::-=-::::-+-----@*:--=--=---+#++***#@@@@#%.                             
                    .:::::::::----::%*--=---=#----------*+****#*@@%%#@.                             
                    .::::::::::%=-::-#-==:-+%=---:=---+=#***#*#%@@@%#+.                             
                    .::::::::::-=-+--++--*+%=:---==--===**+#%*#@@@@@#.                              
                     %::::::::::--=@@=@%%=+=++---==---==**#**%*@@%%@%.                              
                     .:::::::-:::--@-%---%-+:%---=+--=+=*%*##*%%@%%@@.                              
                     .::::::---#:+:=-@--::----%-=-===-=*#*#%#*#@@@@@-                               
                      =:-:---:--+:%-+=-------==@==-=+==+####**#%@@%%.                               
                      =--:=---=-=:*=-=-=:-=%-==-%=--==--*###%%#@@@%%                                
                      .=::=-:%=%:#----+===--%%@--%--=+=-##%%%%#@@@%@                                
                       -::--:---+#---=-=++-=+=:==+%==*=-##%%#%#%@@@*                                
                       %:---%:@--+=--===*+*-=--=#=-#=-=+#*%%##%@@%@.                                
                       .:-----+=-=+-==--%#=---==--+@#===####%@#@@@%                                 
                       .:---%*=-=+===----%+=--=---+===-+%#%@%#%@%%@.                                
                       .*+---+=--=+=====@=-=----==+==+-+#%#%%%%%@@*                                 
                        -=--======+-+=@+-===--+==++-++=+%%#%%%%%@@.                                 
                        .--=-======-+=**+-=+--=+==+==+=+%%%@%@%%@%.                                 
                         *--=-====-++===*===-+=+==++*+*+%%%@%#%%@@.                                 
                         .===-+=*===+*+**==#+*@@*@%**=*#*%#%%%%%@*.                                 
                         .++*%=%%%*==+=+#++=++=+*+*++*+#%%%%%%%%@.                                  
    .                     *=+++=======+*=+==+++=*+=*+**@%@%%%%%%@.                                  
                          .=+==*+-+==+=*==+=#+*+*#=****@%%%%%@@%@..                                 
                          .++++++=**+*=*==*+*+*++*+*+*+@@%%%%%@@*                                   
                          .#++**+++*++=*=+*+#=**+**=**+#%%%%%%%@.                                   
                           .++*+=++++**+=*=**#**#*+*#@+#@@@@%%@%                                    
                           .+++#+++****+#@%##%%#*%########%#*%%%                                    
                            +%%@%@%@%@%%%%#%@#@%%#%%%%@@@%@%@%%.                                    
                             ..%%%@@@%%%%@%@@@%@%%@@%%@@%@%%%@:.                                    
                                                                                                    
howdy, snoopers. this is my css sheet. i know it's a disaster, you don't have to tell me. a lot of this was made when i was still VERY new to html and css as a whole, so it probably isn't like, the best. lots of probably unnecessary and overcomplicated tags and classes...
*/
@font-face{
    font-family: motherish;
    src:url("./Motherish-Regular.otf");
}
html {
		
    background-image:url('./images/BG/PurpleBG.png');
    background-size:auto;
    background-attachment:fixed;
    
}
body{
    margin-left:5%;
    margin-right:5%;
}

.reviewBigBody{
    margin-left:0px;
    margin-right:0px;
}

p, li, h1, h2, h3, h4{
    font-family:motherish;   
    color:rgb(189, 189, 189);
}
a, li {
    font-family:motherish;
    
}

a:link{
    color:rgb(182, 127, 255);
}
a:visited{
    color: rgb(200, 220, 238);
}
  
  @keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}

.logoimg{
    width:50%;
}

.freshlogo{
    width:100%;
}

.freshturns{
    width:100%;
}

.flexindex-column{
    display:flex;
    flex-direction:column;
}
.leftcolumn{
    width:20%
}
.centercolumn{
    width:60%
}
.rightcolumn{
    width:20%
}

.flexindex-row{
    display:flex;
    flex-direction:row;
}



.infiniteturnsforever{
    float:right;
    width:30%;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    
  }

  .hrz-txt-scroll {
    width: 85%;
    height: 100px;
    padding: 15px;
    overflow: auto;
    border:3px inset;
    border-color: gray;
  }
  .button-text-container {
    width:90%;
    height: 5rem;
    overflow-x:hidden;
    overflow-y: scroll;
    border:3px inset;
    border-color: gray;
  }

  /*couldn't figure out marquee so i had to borrow this code from https://www.w3schools.in/css3/css-marquee . you'll have to forgive me*/

  .marquee{
    height: 20px;
    overflow:hidden;
    position:relative;
  }

  .marquee div{
    position:static;
    width:100%;
    height:100%;
    margin:0;
    line-height:20px;
    text-align:center;
    text-wrap:nowrap;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 10s linear infinite;
  }
  @-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-200%);
    }
}
            
@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-200%);
    }
}
            
@keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-200%);
        -webkit-transform: translateX(-200%);
        transform: translateX(-200%);
    }
}
/*ok, borrowed code ends here. sorry about that.*/

  .button-scroll {
    
    height: 20rem;
    overflow-y: scroll;
    border:3px inset;
    border-color: gray;
  }
  .button-separators{
    width: 47%;
  }
  
  .hrz-txt-scroll p {
      margin-bottom: 0;
  }

.motText{
    animation: color-change 1s infinite;
}

nav ul li{
    display:inline;
    margin:0px;
}
#navbar{
    width:13.5%
}



.textbox{
    border:10px solid transparent;
    border-image:url('./images/smtborder.png') 30 ;
    background-color: black;
    color:rgb(189, 189, 189);
}

summary{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 2em;
}

#HCB_comment_box{
    border:10px solid transparent;
    border-image:url('./images/smtborder.png') 30 ;
    background-color: black;
    color:white;
    width:500px;
}

.tableOfContents{
    float:right; 
    position:sticky; 
    top:20px;
    width:300px;
}

/*index.html IDs*/
#mobileNotice{
    border:5px outset;
    background-color: rgb(170, 146, 69);
    border-color: rgb(202, 171, 85);
    width:400px;
    padding:10px;
}
#lastUpdate{
    text-align:right;
    float:right;
}
#randomMessage{
    color:white;
    background-color: black;
    font-family: 'Courier New', Courier, monospace;
    padding:5px;
    font-style:italic;
    font-size:13px;
    border: 10px solid transparent;
    min-width:10px;
    max-width:700px;
    border-image: url('./images/border.png') 30 round;
    border-radius:10px;
    background-size:cover;
    float:right;
    overflow: hidden;
}

.iframeBorder{
    color:white;
    background-color: black;
    border: 10px solid transparent;
    border-image: url('./images/border.png') 30 round;
    border-radius:10px;
    background-size:cover;
}

.grid-container{
    display: grid;
    grid-template-columns: auto auto auto;
}

.grid-item{
    width:33%; padding:.5%;
}

.main-content-body{
    width:1050px; 
    padding:5px;
}

.button-title-image{
    width:100%;
}

/*Review Classes*/

.reviewIndexBox{
    width:300px; 
    height:400px; 
    padding:5px;
    float:left;
    margin-right:5px; 
    margin-top:5px;
}

.reviewIndexImg{
    padding:5px;
    width:290px;
}

.reviewBox{
    width:1040px; 
    padding:5px;
}

.reviewImg{
    padding:5px; 
    overflow:auto;
    float:left;
    width:200px;
}

.reviewTitle{
    padding:10px;
    float:left;
}

.reviewBody{
    width:auto; 
    padding:10px;
    clear:left;
}
.centerText{
    text-align:center;
}
.inlinePic{
    margin-top:5px; 
    display:inline;
}

.freshicon{
    width:80%;
}


/*Music Classes*/

.musicWindow{
    width:47%; 
    height:500px; 
    padding:5px;
    float:left;
    margin-right:5px; 
    margin-top:5px;
    font-size:12px;
}

.musicImage{
    height:50%;
    width:100%;
}

.iframeSeparator{
    border-top-style:double;
    border-bottom-style:double;
    border-color:white;
}

/*Gamedev Classes*/

.mfrLink{
    border: 10px solid transparent;
    border-image: url('./images/Gamedev/MFRBorder.png') 30;
    border-image-width:30px;
    background-size:cover;
    width:315px;
    float:left;
}

.hbhLink{
    border: 10px solid transparent;
    border-image: url('./images/Gamedev/HBHBorder.png') 30;
    border-image-width:30px;
    background-size:cover;
    border-radius:30px;
    width:315px;
    float:left
}

.prmLink{
    border: 10px solid transparent;
    border-image: url('./images/Gamedev/PRMBorder.png') 30;
    border-image-width:30px;
    background-size:cover;
    border-radius:30px;
    width:315px;
    float:left
}

.dnmLink{
    border: 10px solid transparent;
    border-image: url('./images/Gamedev/DNMEBorder.png') 30;
    border-image-width:30px;
    background-size:cover;
    border-radius:30px;
    
}

.boiLink{
    border: 10px solid transparent;
    border-image: url('./images/Gamedev/IsaacBorder.png') 30;
    border-image-width:30px;
    background-size:cover;
    border-radius:30px;
    width:315px;
    float:left
}

.gameWindow{
    width:315px;
    height:250px;
    float:left;
    margin-right:5px;
    margin-top:5px;
}

.gameImg{
    border-radius:10px;
    width:315px;
    height:250px;
}

/*bonus page classes*/

.pinWindow{
    width:20%;
    height:200px;
    float:left;
    font-size:10px;
}

.pinImg{
    width:70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.stickerWindow{
    width:300px;
    height:550px;
    padding:5px;
    float:left;
    margin-right:5px;
    margin-top:5px;
}

.yoyoWindow{
    width:30%;
    height:400px;
    padding:5px;
    float:left;
    margin-right:5px;
    margin-top:5px;
    font-size:10px
}

.yoyoWindow img{
    width:100%
}



/*video page classes*/

.videoColumns{
    display:flex;
}

.videoColumns>*{
    width:50%;
    padding:1rem;
}

main div div div iframe{
    padding-top:5px;
}

/*LP Classes*/

.lpWindow{
    width:40%; 
    height:400px; 
    padding:5px;
    float:left;
    margin-right:5px; 
    margin-top:5px;
    font-size:15px;
}
.lpWindow img{
    height:40%
}

/*Artwork Classes*/

.artTitle{
    width:700px;
    padding:10px;
    text-align:center;
}

/*words classes*/

.wordsImg{
    height:300px;
}