/* COLOR SCHEME!

Dark Blue: #061C37
Yellow: #FCB300
Teal:#CDECCE
Red:#F44B4A
Purple:#5D4457

Background
#FFFCE9

 */ 

 /* FONTS */
 
 @font-face{
    src: url(fonts/BagelFatOne-Regular.ttf);
        font-family:HeaderBubble; 
 }
/* quicksand fam */
    @font-face{
        src: url(fonts/Quicksand/static/Quicksand-Regular.ttf);
            font-family:Q-Reg; 
    }
     @font-face{
        src: url(fonts/Quicksand/static/Quicksand-Medium.ttf);
         font-family:Q-Med; 
    }
    @font-face{
        src: url(fonts/Quicksand/static/Quicksand-Bold.ttf);
            font-family:Q-Bold; 
    }
    @font-face{
        src: url(fonts/Quicksand/static/Quicksand-SemiBold.ttf);
         font-family:Q-SBold; 
    }
     @font-face{
        src: url(fonts/Quicksand/static/Quicksand-Light.ttf);
         font-family:Q-Light; 
    }
body{
    background-color: #061C37;
}
header {
background-color: #061C37;      
        margin-bottom:0 px;
        padding:0px;

}

header h1{
     text-align: center;
    margin-bottom: 0%;

    font-family:"HeaderBubble";
    font-size: 300%;
    color:#FCB300;

}

h2{
    font-family: "Q-Bold";
    color: #FCB300;
    text-align: center;
}

header p{
    text-align: center;
    margin: 0%;
}

main{
    background-color:#061C37;
    margin: 0%;
    padding: 2%;
}

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    overflow: hidden;

    margin: 0;

    border-width: 10px;
    border-radius: 10px;
}


.Projects {
    display: flex;
    justify-content: center;

    overflow: hidden;
    
    margin: 10px;
    border-radius: 10px;

    justify-content: space-around;
    align-items: center;
}
.Projects a{
    display: flex;
    justify-content: center;

}
.Projects img{
     display: flex;
    justify-content: center;


    border-radius: 10px;
}

.Projects:hover{
    background-color: #FCB300;
}
.Projects img:hover{
    padding: 10px;
    width: 90%;
    border-radius: 10%;
    animation: shake .1s;
    animation-iteration-count: infinite;
    cursor: url(WebsiteAssets/GunCursorTemp.png),crosshair;
}



/*CURSOR */


/* NAVIGATION BAR */
.mainNavigation {
width:100%;
margin-top: 10px;
background: #F44B4A;
margin-bottom: 0px;
padding: 10px;
overflow: auto;
}

        .mainNavigation a{
            float: none;
            padding: 50px;
            text-decoration: none;
            font-family: "Q-Bold";
                color: #061C37 ;
                font-size: 20px;
            display: contents;
            width: 33.33%;
            text-align: center;
        }
        .mainNavigation a:hover{
            font-family: "Q-Bold";
            color:#FCB300;
        }
        .mainNavigation a.active{
            font-family: "Q-SBold";
                color: #FCB300;
        }

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left;
  }
}

 /*FOOTER*/
 footer{
    display: block;
    clear: both;
    background-color: aqua;
 }
.footer ul{

        font-family: "Q-Bold";
            color: #FCB300 ;
            display: block;
    }
  .footer li{
        text-decoration: none;
        font-family: "Q-Med";
        color: #FCB300 ;
        display: block;
    }
    .footer a{
        color:#FCB300;
        text-decoration: none;
    }
    .footer a:hover{
        font-family: "Q-Bold";
        color:#F44B4A;
    }

p {
    font-family: Q-Med;
    color:#F44B4A;
}

/* formating for mobile */
@media only screen and (max-width:600px) {

    .container{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    
}
}

/* ANIMATIONS */

@keyframes shake {
  0% { transform: rotate(2deg); }
  25% { transform:rotate(0deg); }
  50% { transform: rotate(-2deg);}
  75% {transform: rotate(0deg);}
  100% {transform: rotate(2deg);}
}

@keyframes shake2 {
  0% { transform: rotate(-2deg); }
  25% { transform:rotate(0deg); }
  50% { transform: rotate(2deg);}
  75% {transform: rotate(0deg);}
  100% {transform: rotate(-2deg);}
}

@keyframes shake3 {
  0% { transform: rotate(0deg); }
  25% { transform:rotate(2deg); }
  50% { transform: rotate(0deg);}
  75% {transform: rotate(-2deg);}
  100% {transform: rotate(0deg);}
}