/*General Text Styling*/
:root {
    font-family: 'Plus Jakarta Sans', 'Quicksand','Trebuchet MS', sans-serif, 'Libre Barcode 39 Text';
    min-height: 100%;
    --gunmetal: #292f36ff;
    --celeste: #FAF9F6;
    --silver: #bbc8caff;
    --light-red: #ff6b6bff;
    --giants-orange: #f05d23ff;
    --saffron: #eec643ff;
    --sky-magenta: #C179B9;
    background-color: var(--celeste);
}



/*Page Structure*/

body {
    margin: 0px;

}

body.main-page {
    margin: 0px;
    min-height: 100vh;
    height: 100%;
    display: grid;
    grid-template-rows: 4fr 24fr;
    color:var(--gunmetal);
    
}

main {
    margin: 20px;
}

main.columns {
    margin: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap:10px;
}



@media (min-width: 900px) {
    main.columns{grid-template-columns:  1fr 1fr 1fr;}
    main.columns.main-column {grid-template-columns:  0.2fr 1fr 0.2fr;}
    
}

@media (max-width: 900px) {
    div.side-column {display: none; padding:10%;}
}

div.column {
    display: flex;
    
    border: 1px black;
    border-style:dashed;
    border-radius: 10px ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ADFFE5;
    padding:10%;
    text-align: center;
}

div.column.content {
    text-align: left;
    align-items: flex-start;
}

div.column.blank {
    background-color: var(--celeste);
    border: 0;
}

div.central-column {
    display:flex;
    flex-direction: column;
    gap: 2.5%;
}





/*Header*/
header {
    padding:30px;
    
    background-color: var(--gunmetal);
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    vertical-align: middle;
    text-align: center;
}

@media (min-width: 1000px) {
    header {
        grid-template-columns: 1fr 3fr;
    }
}

#title {
    display: inline;
    font-family: 'Quicksand','Trebuchet MS', sans-serif, 'Libre Barcode 39 Text';
    margin:0;
}

    /*Navigation*/
    nav{
        display: inline;
        float: right;
        padding: 9px;
        position: relative;
        margin-top: auto;
        margin-bottom: auto;
        /*padding-right: 20%;*/
        width: 100%;
        line-height: 100%;
        /*transform: translate(0,-9px);*/
    }

    a.navlink{
        text-decoration: none;
        width:100%;
        font-weight: bolder;
        width: 100%;
        text-align: center;
        font-weight: lighter;
        font-size: larger;
    }

    div.navlink {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
    }


    a.navlink:hover{
        font-weight: normal; 
    }

    a.navlink:visited {
        
    }

/*Footer*/
footer {
    text-align: center;
}
/*Buttons*/
@keyframes slightSquish{
    0%{transform: scaleX(1.01) scaleY(0.987) rotate(-1deg);}
    25%{rotate: 0deg;}
    50%{transform: scaleX(0.99) scaleY(1.013) rotate(1deg);}
    75%{rotate: 0deg;}
    100%{transform: scaleX(1.01) scaleY(0.987) rotate(-1deg);}
}

button:not(.deanimate) {
    font-weight: 700;
    padding: 1.8em;
    padding-top: 1.3em;
    padding-bottom: 1.3em;
    margin: 1em;
    border: 3px solid black;
    border-radius: 1em;
    --background-color:rgb(255, 72, 169);
    font-family: 'Plus Jakarta Sans', 'Quicksand','Trebuchet MS', sans-serif, 'Libre Barcode 39 Text';

    background-color: var(--background-color);

    transition: transate 0.5s, box-shadow 0.5s; 
    translate: 1em, -1em;
    animation-fill-mode: both;
    
    animation: slightSquish 1s ease-in-out 0.5s infinite none;

}


button:hover:not(.deanimate){
    box-shadow: -0.3em 0.3em 0 0 rgba(0, 0, 0, 0.4),-0.3em 0.3em 0 0 var(--background-color),-0.3em 0.3em 0 0.125em rgba(0, 0, 0, 1);
    cursor:pointer;
    
}

button:active:not(.deanimate) {
    box-shadow: -0.1em 0.1em 0 0 rgba(0, 0, 0, 0.4),-0.1em 0.1em 0 0 var(--background-color),-0.1em 0.1em 0 0.125em rgba(0, 0, 0, 1);
    animation: slightSquish 3s ease-in-out 0.5s infinite none;
}

/*To remove the squish animation, siply add the deanimate class to your button*/

button.deanimate {
    font-weight: bold;
    padding: 1.8em;
    padding-top: 1.3em;
    padding-bottom: 1.3em;
    margin: 1em;
    border: 3px solid black;
    border-radius: 1em;
    --background-color:rgb(255, 72, 169);
    font-family: 'Plus Jakarta Sans', 'Quicksand','Trebuchet MS', sans-serif, 'Libre Barcode 39 Text';

    background-color: var(--background-color);

    transition: transate 0.5s, box-shadow 0.5s; 
    translate: 1em, -1em;
}

button.deanimate:hover{
    box-shadow: -0.3em 0.3em 0 0 rgba(0, 0, 0, 0.4),-0.3em 0.3em 0 0 var(--background-color),-0.3em 0.3em 0 0.125em rgba(0, 0, 0, 1);
    cursor:pointer;   
}

button.deanimate:active {
    box-shadow: -0.1em 0.1em 0 0 rgba(0, 0, 0, 0.4),-0.1em 0.1em 0 0 var(--background-color),-0.1em 0.1em 0 0.125em rgba(0, 0, 0, 1);
}

/*Links*/
/*To make a link not have the link emoji before it, add a linkless class to it*/
a:not(.linkless)::before {
    content: '🔗';
    
    
}

a{
    text-decoration: none;
    color:cornflowerblue;
}


/*
Info from: cssgradient.io/blog/css-gradient-text
Adapted by: Isaac Sussman @ isaacsussman.github.io
*/

/*Gradient text backgrounds*/
.gradienttext{
    
    background: linear-gradient(90deg,var(--silver),var(--light-red));

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    fill: transparent;  
}

@keyframes cycling {
    0%{background-position: 0% 50%}
    66%{background-position: 100% 50%}
    100%{background-position: 133% 50%}
    

}
.gradienttext.cycling {
    animation: 3s linear infinite normal cycling;
    background: linear-gradient(90deg,var(--saffron),var(--light-red),var(--giants-orange),var(--light-red),var(--saffron));
    background-size: 400%;
    background-repeat:repeat-x ;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    fill: transparent;  
    
}