body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    background-color: rgb(35, 56, 53);
    font-style: normal;
    font-weight: 400;
    color: white;
    padding: 0;
    margin: 0;
    animation: bodyFade 1s ease-in-out forwards;
}

@keyframes bodyFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.spacer {
    visibility: hidden;
    padding: 10px;
}

.break {
    visibility: hidden;
    flex-basis: 100%;
}

.introduction {
    background-image: url(assets/images/background-console.png);
}

.content {
    filter: blur(0);
    backdrop-filter: blur(1.17rem);
    padding: 10px;
}

.rcont {
    flex-direction: row;
    flex-wrap: wrap;
}

.title {
    font-size: 85px;
    padding: 0;
    background: linear-gradient(270deg,rgba(230, 52, 32, 1) 0%, rgba(224, 45, 150, 1) 8%, rgba(230, 127, 119, 1) 16%, rgba(237, 221, 83, 1) 24%, rgba(165, 237, 83, 1) 32%, rgba(83, 237, 111, 1) 40%, rgba(83, 237, 186, 1) 48%, rgba(83, 204, 237, 1) 56%, rgba(83, 114, 237, 1) 64%, rgba(137, 83, 237, 1) 72%, rgba(182, 24, 245, 1) 80%, rgba(245, 24, 116, 1) 88%, rgba(230, 52, 32, 1) 100%);
    background-clip: text;
    color: rgba(0,0,0,0);
    background-size: 200% auto;
    animation: titleGradient 15s linear infinite, titleFade 2s ease-in-out forwards;
    /*-webkit-text-stroke: 2px black;*/
}

@keyframes titleGradient {
    0% {
        background-position: 200% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes titleFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.subtitle {
    font-size: 35px;
    padding: 0;
}

.navigator {
    display: flex;
    flex-direction: row;
    justify-content: center;
    vertical-align: center;
    padding: 25px;
    background-color: #62f589;
}

.dlinks {
    display: flex;
    flex-direction: row;
    vertical-align: center;
}

.return {
    display: flex;
    flex-direction: row;
    vertical-align: center;
}

.name {
    font-weight: 700;
    font-size: xx-large;
    color: #000000;
    align-content: center;
    text-decoration: none;
    transition: 0.2s ease-out;
}

.name:hover {
    color: #ffffff;
    text-decoration: underline;
}

.navlink {
    font-size: x-large;
    font-weight: 550;
    color: #000000;
    text-decoration: underline 20px transparent;
    align-content: center;
    padding: 5px;
    border: 5px solid rgba(0,0,0,0);
    border-radius: 15px;
    transition: 0.2s ease-out;
}

.navlink:hover {
    /*border: 5px solid #2dc0e8;*/
    /*background-color: rgb(68, 102, 251);*/
    text-decoration: underline 20px #2dc0e8;
    color: white;
}

.mlinks {
    display: flex;
    flex-direction: row;
    vertical-align: center;
}

@media (max-width: 800px) {
  .dlinks {
    display: none;
  }
  .mlinks {
    display: flex;
  }
}

@media (min-width: 801px) {
  .dlinks {
    display: flex;
  }
  .mlinks {
    display: none;
  }
}

.menubutton {
    padding: 10px;
    background-color: rgba(255,255,255,0.45);
    border: none;
    border-radius: 15px;
    color: #000000;
    transition: 0.2s ease-out;
}

.menubutton:hover {
    background-color: rgba(255,255,255,0.70);
}

.mobmenu {
    width: 100vw;
    height: 100vh;
    background-color: #62f589;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.moblink {
    width: min-content;
    padding: 15px;
    color: #000000;
    text-decoration: none;
    font-weight: 650;
    font-size: 45px;
    transition: 0.2s ease-out;
}

.moblink:hover {
    color: #ffffff;
}

.curlink {
    text-decoration: underline 20px #2dc0e8;
    transition: 0.2s ease-out;
    border: 5px solid rgba(0,0,0,0);
}

.curlink:hover {
    color: #ffffff;
    text-decoration: underline 20px #ffffff;
    background-color: transparent;
    border: 5px solid rgba(0,0,0,0);
}

.header {
    font-size: 45px;
    font-weight: 650;
}

.welcome {
    background-color: rgba(25, 224, 94, 0.63);
    width: fit-content;
    padding: 15px;
    align-self: center;
    border: 5px solid #62f589;
    border-radius: 15px;
}

.text {
    font-size: larger;
}

.work {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.projectcontainer {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.project {
    background-color: rgba(98, 225, 166, 0.663);
    border-radius: 15px;
    color: black;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    height: max-content;
    transition: 0.2s ease-out;
}

.project:hover {
    background-color: rgba(98,225,166,1);
}

.itemtitle {
    font-size: 35px;
    font-weight: 550;
    padding: 0;
    width: fit-content;
}

.itemsubtitle {
    font-size: 20px;
    font-weight: 475;
    padding: 0;
    width: fit-content;
}

.projectthumbnail {
    width: 50%;
    height: auto;
    padding: 0;
    margin: 0;
}

.viewmoreprojects {
    color: #ffffff;
    text-decoration: none;
    font-size: x-large;
    font-weight: 750;
    padding: 20px;
    border: 5px solid #2dc0e8;
    background-color: rgba(68, 102, 251, 0.65);
    border-radius: 15px;
    width: fit-content;
    transition: 0.2s ease-out;
}

.viewmoreprojects:hover {
    background-color: rgba(68,102,251,1);
}

.standardLnk {
    color: #ffffff;
    text-decoration: none;
}

.downloadbtn {
    font-size: x-large;
    color: #ffffff;
    text-decoration: none;
    padding: 12px;
    margin: 15px;
    border: 5px solid #2dc0e8;
    border-radius: 15px;
    /*background: linear-gradient(140deg, rgba(34, 199, 116, 1) 0%, rgba(45, 176, 196, 1) 50%, rgba(32, 32, 230, 1) 100%);*/
    background: linear-gradient(140deg, var(--dlbnt1, rgba(34, 199, 116, 1)), var(--dlbtn2, rgba(45, 176, 196, 1)) 51%, var(--dlbtn1, rgba(32, 32, 230, 1))) var(--dlbtnx, 0)/ 200%;
    transition: 0.2s ease-out;
}

.downloadbtn:hover {
    --dlbtnx: 100%;
}

.pdf {
    height: 500px;
}

.buttonscont {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.workcont {
    /*everything breaks when i remove this div. everything breaks when i remove this empty class. i have no clue what or why. it does nothing as far as i am aware. please do not touch it, just admire my shotty css.
    the background color is only here so that vs code stops complaining about how this class is empty. it is the only thing that won't screw everything up.     ;)*/
    background-color: #00000000;
}

.italics {
    font-style: italic;
}

.pdfembed {
    width: 100%;
    max-width: 825px;
    height: 100vh;
    max-height: 1100px;
}

.textbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.description {
    background-color: #a5dbbe;
    border: 5px solid #4ba173;
    font-size: larger;
    color: #000000;
    border-radius: 15px;
    padding: 8px;
    margin: 25px;
    width: fit-content;
}

.horizimgcont {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.vertimgcont {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    justify-content: center;
}

.portimg {
    width: 100%;
    max-width: fit-content;
    height: auto;
    padding: 10px;
}

.link {
    color: #000000;
    transition: 0.2s ease-out;
}

.link:hover {
    color: #ffffff;
}

video {
    width: 45%;
    min-width: 365px;
}

table, tr, th, td {
    padding: 15px;
    color: #000000;
    background-color: #4ba173;
}

table {
    border: none;
    border-radius: 15px;
    width: 100%;
}

th {
    background-color: #1e5c3b;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: white;
    font-size: larger;
    font-weight: 650;
}

td {
    background-color: #a5dbbe;
    font-weight: 500;  
    text-wrap: pretty;
}

.tablecont {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding: 10px;
}

.comment {
    background-color: rgb(254,250,237);
    color: #000000;
    border: 10px solid rgb(230,210,220);
    border-radius: 15px;
    margin: 20px;
    padding: 10px;
}

article {
    text-wrap: pretty;
    font-size: larger;
}

.credit {
    font-style: italic;
    font-size: x-large;
}

.welcomebutblue {
    background-color: rgba(25, 131, 224, 0.63);
    width: fit-content;
    padding: 15px;
    align-self: center;
    border: 5px solid #6269f5;
    border-radius: 15px;
}