@font-face {
    font-family: 'Ailerons';
    src: url('fonts/ailerons.woff2') format('woff2'),
         url('fonts/ailerons.woff') format('woff'),
         url('fonts/ailerons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Copperplate';
    src: url("fonts/copperplate.otf") format("opentype"); 
}


body, html{
    min-height: 100%;
    width: 100%;
    margin: 0;
}

body{
    background-color: white;
}

#content{
    margin-left: 10vw;
    /* border: solid black 1px; */
    display: flex;
    animation: reveal;
    animation-duration: 1s;
}

#name{
    width: 100%;
    display: flex;
    justify-content: center;
    color: rgb(128, 126, 126);
    font-family: 'Ailerons', Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0;
    animation: name;
    animation-duration: 1.5s;
}

@keyframes name{
    from{
        padding-left: 10vw;
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

#A{
    color:#BD8D2D;
}

#column-1{
    /* border: solid black 1px; */
}

#column-2{
    /* border: solid green 1px; */
}

#skills{
    height: 28rem;
    /* border: solid black 1px; */
    color: rgb(128, 126, 126);
    font-family: 'Copperplate', Arial, Helvetica, sans-serif;
}

#technology{
    /* border: solid black 1px; */
    color: rgb(128, 126, 126);
    font-family: 'Copperplate', Arial, Helvetica, sans-serif;
}

#projects{
    height: 28rem;
    /* border: solid red 1px; */
    margin-left: 10vw;
    color: rgb(128, 126, 126);
    font-family: 'Copperplate', Arial, Helvetica, sans-serif;
    animation: reveal;
    animation-duration: 1s;
}

#experience{
    /* border: solid blue 1px; */
    margin-left: 10vw;
    color: rgb(128, 126, 126);
    font-family: 'Copperplate', Arial, Helvetica, sans-serif;
    animation: reveal;
    animation-duration: 1s;
}

#experience{
    margin-left: 10vw;
    color: rgb(128, 126, 126);
    font-family: 'Copperplate', Arial, Helvetica, sans-serif;
    animation: reveal;
    animation-duration: 1s;
}



.project_div:hover{
    color: rgb(196, 5, 5);
}

.highlight{
    color: rgb(196, 5, 5);
    padding-left: 10%;
    margin-bottom: 0;
    -webkit-transition: 0.5s ease;
}

/* @keyframes indent{
    from{
        padding-left: 0;
    }
    to{
        padding-left: 10%;
    }
} */

@keyframes reveal {
    from {
        opacity: 0;
        margin-left: 0rem;
    }
    to {
        opacity: 1;
        margin-left: 10vw;
    }
}

/* #skills p{
    font-size: 1rem;
} */

.sec-title{
    color: rgb(163, 134, 81);
    font-size: 1.5rem;
    font-family: 'Copperplate', Arial, Helvetica, sans-serif;
}

.normal-size{
    font-size: 1rem;
    margin-bottom: 0;
    -webkit-transition: 0.5s ease;
}

.description{
    font-size: 0.6rem;
    /* border: solid black 2px; */
}

/* @media(max-width:480px){ */
@media(max-device-width:850px),(max-width:850px){
    #name{
        margin-top: 2em;
    }
    
    #content{
        flex-direction: column;
        margin-right: 5vw;
    }

    #skills{
        height: auto;
    }

    #technology{
        margin-top: 5rem;
    }

    #projects{
        margin-top: 5rem;
        height: auto;
        animation: none;
        margin-left: 0;
        max-width: 100%;
        width: 100%; /*for some reason rem scales on mobile with width... */
    }

    #experience{
        margin-top: 5rem;
        animation: none;
        margin-left: 0;
        max-width: 100%;
        width: 100%; /*for some reason rem scales on mobile with width... */
    }
}