@font-face {
    font-family: CoolFont;
    src: url(Assets/SK.otf);
}



/*Fonts*/
.main {
    font-family: 'CoolFont', sans-serif;
    color: #ffffff;
    font-size: 130%;
    padding:1%;
}    

.title {
    font-family: 'CoolFont', sans-serif;
    color: #FFD700;
    font-size: 300%;
    font-weight: bold;
}

.txt {
    font-family: 'CoolFont', sans-serif;
    color: #FFD700;
    font-size: 200%;
    font-weight: bolder;
    padding:1%;
}

.navtxt {
    font-family: 'CoolFont', sans-serif;
    color: #ffffff;
    font-size: 200%;
    font-weight: bolder;
}

.link {
    font-family: 'CoolFont', sans-serif;
    display:flex;
    justify-content: space-around;
    margin: 0% auto;
    padding: 0%;
}

.LinkTxt {
    font-family: 'CoolFont', sans-serif;
    color: #ffffff;
    font-size: 200%;
    font-weight: bolder;
    padding: 20px;
}



/*Top of website*/
body {
    font-family: 'CoolFont', sans-serif;
    background-size: cover;
    padding:0%;
    margin:0;
    color: #ebf2fa;
    background-color: #427aa1;
}

/*
.bgIMG{
    /*background-image: url("Assets/blueGradient.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh;
}
*/

.banner {
    height: auto;
    background-color: #064789;
    font-family: 'CoolFont', sans-serif;
    margin: 0% auto;
    padding: 2%;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.navbar {
    font-family: 'CoolFont', sans-serif;
    display:flex;
    justify-content: space-around;
    background-color: #064789;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: 50%;
    margin: top 10%;;
    margin: 0 auto;
    padding: 1%;
    border-style: solid;
    border-width: 5px;
    border-top-width: 0px;
    border-color: #FFD700;
}



/*Home Page*/
.songAndImg{
    display:flex;
}

.song {
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 10px;
    width: 20%;
    height: 30%;
    margin-top: 2%;
    margin-right:2%;
    margin-left: 18.5%;
    padding: 1%;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
}

.PERimg {
    width:70%;
    border-color: #FFD700;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
    display:flex;
    justify-content: space-around;
    margin: 10% auto;
}

.audioBox {
    display:flex;
    justify-content: center;
    width: 100%;
    margin-bottom:10%;
}

.perTxt {
    font-family: 'CoolFont', sans-serif;
    color: #ffffff;
    font-size: 200%;
    font-weight: bolder;
}

.gardenBox {
    width: 38%;
    height:30%;
    border-color: #FFD700;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
    margin-top: 2%;
    margin-left: 0% auto;
    background-color: #064789;
    display:grid;
    place-items: center;    
}

.garImg {
    width: 100%;
    border-radius: 10px;
    border-top-width: 0px;
    border-bottom-width: 5px;
    border-color:#FFD700;
    border-style: solid;
} 

.garTxt{
    font-family: 'CoolFont', sans-serif;
    color: #ffffff;
    font-size: 130%;
    padding: 6%;
    font-weight: bold;
}

.textBox{
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 10px;
    width: 60%;
    height: auto;
    margin: 20px auto;
    padding: 1%;
    margin-bottom: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
}

.quote{
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 20px;
    width: 50%;
    height: auto;
    margin: 2% auto;
    padding: 10px;
    margin-bottom: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
    color:#FFD700;
    font-size: 150%;
}



/*About me Section*/
.textBoxAbout{
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 10px;
    width: 80%;
    height: auto;
    margin: 20px auto;
    padding: 1%;
    margin-bottom: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
}

.textBoxEvent{
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 10px;
    width: 40%;
    height: auto;
    margin: 40px auto;
    padding: 1%;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
}

.HackHorizontal {
    display:flex;
    justify-content: center;
    margin:3% auto;
}

.HackBox {
    width: 45%;
    height:auto;
    border-color: #FFD700;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px;
    background-color: #064789;
    display:grid;
    place-items: center; 
    margin:1%;
}

.HackImg {
    width:100%;
    border-radius: 10px;
    border-bottom-width:5px;
    border-color: #FFD700;
    border-style: solid;
}

.HackTxt{
    font-family: 'CoolFont', sans-serif;
    color: #ffffff;
    font-size: 130%;
    padding: 6%;
    font-weight: bold;
}

.socials {
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 50px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    width: auto;
    height: auto;
    margin: 20px auto;
    padding: 1%;
    margin-bottom: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
}



/*Projects Section*/
.ALLproj {
    font-family: 'CoolFont', sans-serif;
    display:flex;
    justify-content: space-around;
}

.textBoxProj{
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 10px;
    width: 500px;
    height: 100px;
    margin: 20px auto;
    padding: 2%;
    margin-bottom:10px;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
}

.proj{
    font-family: 'CoolFont', sans-serif;
    background-color: #064789;
    border-radius: 10px;
    width: 80%;
    height: auto;
    margin: 20px auto;
    padding: 1%;
    margin-bottom: 0;
    border-style: solid;
    border-width: 5px;
    border-color: #FFD700;
    width: 30%;
}

.img {
    width: 100%;
    border-radius: 10px;
} 

.ArmTopImg {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
} 

.ArmBottomImg {
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
} 



/*Links*/
/*link color*/
a:link {
    color: #FFD700;
}

/* Visited link */
a:visited {
    color: #FFD700;
}

/* Mouse over link */
a:hover {
    color: #FFD700;
}

/* Selected/clicked link */
a:active {
    color: #FFD700;
}