@font-face {
    font-family: 'DevantHorgen';
    src: url('..\\fonts\\Devant Horgen\\Devant Horgen.woff2');
}
@font-face {
    font-family: 'kitto';
    src: url('..\\fonts\\kitto\\Kitto-PersonalUse.otf');
}
body {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(42,22,119,1) 35%, rgb(0, 0, 0) 99%);
    color:white;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 1.5em;
    transition: opacity 500ms ease-in, display 500ms;
    transition-behavior: allow-discrete;
    padding-left: 1em;
    padding-right: 1em;
}
header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 13px;
    gap: 10px;
    font-size: large;
    align-items: center;
}
header > nav {
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: center;
    font-family: "Lucida Console", "Courier New", monospace;
    
}
#container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 13px;
    gap: 10px;
}
#container > div:nth-child(even){
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,0.3) 0%, rgba(42,22,119,0.67) 63%, rgba(52,65,79,0) 100%);
}
#container > div:nth-child(odd){
    background: rgb(2,0,36);
    background: linear-gradient(270deg, rgba(2,0,36,0.1) 0%, rgba(42,22,119,0.67) 63%, rgba(52,65,79,0) 100%);
}
.project {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 13px;
    padding: 20px;
    gap: 10px;
    line-height: 1.5em;
}
.project_title {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 2.5em;
    text-shadow: 4px 3px 1px rgb(23, 102, 76);
    color: rgb(161, 236, 161);
    
}
a {
    color: rgb(161, 236, 161);
    text-shadow: 2px 2px 1px rgb(23, 102, 76);

    text-decoration: none;
}
video {
    border-radius: 13px;
}
img {
    border-radius: 13px;
}
  
#logo {
    position: relative;
    font-family: kitto;
    font-size: 4em;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #000, #fff, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
    background-clip: text;
    padding-left: 20px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75);
    text-shadow: none;
    text-shadow: 0px 0px 40px rgba(181, 223, 208, 0.171);

}
#job-title{
    letter-spacing: 3px;
    background: linear-gradient(90deg, #000, #fff, #000);
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 3s linear infinite;
    background-clip: text;
    padding-left: 20px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75);
    font-family: 'Lucida Console', 'Courier New', 'monospace';
    font-weight: bold;
    font-size: 1.2em; 
}

.col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 13px;
    padding: 20px;
    gap: 10px;
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border-radius: 13px;
    padding: 20px;
    gap: 10px;
}
@keyframes animate {
    0% {
        background-position: -500%;
    }
    100% {
        background-position: 500%;
    }
}