/*
    Programmer: Kayla Johnson
    Class: B102
    Year: Fall 2023
*/

/*
    Special CSS for the Projects webpage
*/


section{
    padding: 0 3.33%;
}

/*The picture for my Java 2 class*/
#img1302{
    float: left;
    border: 2px solid black;
    margin-right: 2.22%;
    margin-bottom: 10px;
}

/*Added some padding so the images look better*/
#School p{
    padding-bottom: 5px;
}


#B104{
    padding-top:10px;
}

/*This is the figure that holds the caption for B320. The max-width means it can't get
  any bigger, but can get smaller
*/
figure{
    float: right;
    border: 2px solid black;
    margin-left: 2.22%;
    margin-bottom: 10px;
    vertical-align: middle;
    max-width: 300px;
    width:100%;
}

#imgB320{
   border-bottom: 2px solid black; 
}

#capB320{
    display:block;
    font-weight: bold;
    font-size: 70%;
    text-align: center;
    padding-bottom: 5px;  
}

/*Image for my Gacha simulator*/
#imgGacha{
    float: left;
    margin-right: 2.22%;
    margin-bottom: 5px;
    margin-top: 10px;
}

/*Image rollover for my Game resource. */
#Menu{
    float: right;
    background-image: url("/images/SongSelect.png");
    background-size: 350px 325px;
    width: 350px;
    height: 325px;
}

#Menu:hover {
    float: right;
    background-image: url(/images/CardEffect.png);
    background-size: 350px 325px;
    width: 350px;
    height: 325px;
}

/*Media query to stop floating certain images when the screen gets to a break point
  The ones that aren't floated didn't break for any reasonable screen size.
*/
@media only screen and (max-width: 604px){
    figure{float:none;}
    #Menu{float:none;}
    #Menu:hover{float:none;}
    #imgGacha{float:none;}
}