/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    @font-face {
    font-family: "Comic Sans";
    src: url(fonts/ComicSansMS.ttf) format("truetype");
    }
    @font-face {
    font-family: "Raccoon";
     src: url(fonts/RaccoonSerif-Medium.woff) format("woff");
    }
    
    .indexpage{
      background-image: url(bgs/stars3.gif);
    }

    .moviespage{
      background-image: url(bgs/cinema.jpg);
    }

body {
    
    margin-top: 150px;


  color: black;
  font-family: Calibri;
    
    h1 {
        color: yellow;
        font-family: Comic Sans;
        text-align: center;
    }
     h2 {
        color: black;
        font-family: Raccoon;
        margin-top: 5px;
        text-align: center;
        font-size: large;
        font-feature-settings: normal;
    }
    
    
    p {
        margin-top: 10px;
        color: black;
        font-family: Raccoon;
    }
    
        p2 {
        margin-top: 10px;
        color: black;
        font-family: Raccoon;
        font-size: large;
        text-align: center;
    }
    

    .container {
    display:flex;
    column-gap: 15px;
    justify-content: center;
    
    }

    #invisiblecontainer{
    height: 1000px;
    width: 1000px;
    
    }
    
    #main{
        border: aqua 7px ridge;
        height: 550px;
        width: 500px;
        padding: 15px;
        background-image: url(bgs/grid.png);
    }
    
     #sidebarleft{
        border: aqua 7px groove;
        height: 550px;
        width: 150px;
        padding: 15px;
        background-image: url(bgs/rainbowy.png);
    }
    
     #sidebarright{
        border: aqua 7px groove;
        height: 550px;
        width: 150px;
        padding: 15px;
        background-image: url(bgs/rainbowy.png);
        
    }

    .aelywave{
    position:relative;
    top:-450px;
    left: 500px
    }

    .sidebarsocials{
        border: aqua 7px groove;
        height: 205px;
        background-image: url(bgs/grid.png);
        text-align: center;
        margin-bottom: 5px;

    }
    .aboutme{
    height:30px;
        width:200px;
        border:dashed;
        text-align: center;
        margin-bottom:5px;
    }
    
    #selection{
        border: #9e00ff 5px groove;
        height: 250px;
        width: 250;
        margin: auto;
        padding: 10px;
        background-color: whitesmoke
    }

    .interests{
    text-align: center;
    }

    .categoryheader {
        height: 30px;
        text-align: center;
        background-image: url(bgs/grid.png);
        border: aqua 7px groove;
    }
    
    .navigationoptions {
        height: 190px;
        text-align: center;
        background-image: url(bgs/grid.png);
        border: aqua 7px groove;
        border-radius: 20px;
        margin-top: 5px;
    }
    
        .navigationoptions2 {
        text-align: center;
        background-image: url(bgs/201.jpg);
        border: aqua 7px groove;
        border-radius: 20px;
        margin-top: 5px;
    }
    
        .vghsbutton {
        height: 100px;
        width:100px;
        text-align: center;
        background-image: url(bgs/videogamehighschoollogo.jpg);
        background-size: contain;
        border: yellow 7px groove;
        border-radius: 60px;
        margin-top: 8px;
        margin-left: 18px;
    }
    
            .vghsbutton:hover {
        height: 100px;
        width:100px;
        text-align: center;
        background-image: url(images/vghs-ovulations.gif);
        background-size: contain;
        border: yellow 7px groove;
        border-radius: 60px;
        margin-top: 8px;
        margin-left: 18px;
    }
    
    .interestcheck {
        height: 275px;
        text-align: center;
        background-image: url(bgs/grid.png);
        border: aqua 7px groove;
        margin-top: 5px;
    }
    
    .aelyleftmain{
       background-image: url(aelygifs/moveleft.gif);
        height:32px;
        width:32px;
        position:relative;
        
    }
    
    .gokutrain{
        margin:15px;
        justify-content: center;
        display:flex;
    }
    
    .moviesmain{
        border: aqua 7px ridge;
        height: 7000px;
        width: 700px;
        padding: 15px;
        background-image: url(bgs/cdbg.jpg);
        display:inline-block;
        justify-content: center;
        
    }
    
    .movieimage{
    float:inline-end;
    margin-left: 8px;
    margin-bottom: 5px;
    }
    
    .moviedesc{
        border:brown 5px ridge;
        background-color: black;
        background-image: url(bgs/burntexture.png);
        padding:15px;
        margin-bottom: 30px;  
    }
        .moviedescbr{
        border:brown 5px ridge;
        background-color: black;
        background-image: url(bgs/raindrops.webp);
        padding:15px;
        margin-bottom: 30px;  
    }
    
        .aelysit{
    position:fixed;
    top:950px;
    left:50px;
    
    }
    
    .aelysitcontainer{
    display:flex;
    width:1000px;
    height:1000px;
    }
    
    
    
}