:root {
    --h1mod: 4;
    --h2mod: 2;
    --h3mod: 1.1;

    --min: 10px;
    --max: 15px;
}

.dimensiongetter {
    width:100%;
    height:100%;
    box-sizing: border-box;
    display:none;
}

body {
    background-color: rgb(9, 17, 24);
}

@media only screen and (max-width: 1000px) {
    p {
        font-size: 1.05em;
    }
}
@media only screen and (min-width: 1000px) {
    p {
        font-size: 1.2em;
    }
}

h2 {
    font-style: italic;
}

@media only screen and (max-width: 1000px) {
    .mainbody {
        width: 89vw;
    }
}

@media only screen and (min-width: 1000px) {
    .mainbody {
        width: 50vw
    }
}
.mainbody {
    background-color: rgb(25, 35, 49);
    color: rgb(255, 143, 78);
    outline: 0.1em solid rgb(9, 15, 22);
    font-family: monospace;
    font-size: 1em;
    text-align:left;
    height: auto;
    margin: auto;
    margin-top: 1em;
    box-sizing: border-box;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.02em;
    padding-top: 0.02em;

    position:relative;
    border-radius: 1em;
}

@font-face {
    font-family: "Courier Prime";
    src: url("fonts/CourierPrime/CourierPrime-Bold.ttf"), url("fonts/CourierPrime/CourierPrime-BoldItalic.ttf"), url("fonts/CourierPrime/CourierPrime-Italic.ttf");
    font-weight: normal;
    font-style: normal;
}

#newfont {
    font-family: "Courier Prime";
}

.topbar a {
    background-color: inherit;
    color: inherit;
    font-family: "Courier Prime"; 
    font-weight: normal;
    font-style: normal;
    font-size: clamp(0.8em, 0.8vw, 1.3em)
}

.topbar {
    float: none;
    width: 100%;
    height: clamp(2em, 4vw, 2em);
    background-color: rgb(3, 9, 14);

    margin-top: 1em;
    border-radius:0.1em;
    box-sizing: border-box;

    outline-width: 0.1rem;
    outline-color: rgb(29, 129, 79);
    outline-style: dashed;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.27em;
}

.navleft {
    float:left;
}

.navright {
    float:right;
}

.topbarelem {
    position: relative;
    color: rgb(117, 202, 5);
}

@media only screen and (min-width: 1000px) {
    .otherbody {
        width: 50vw;
    }
}
@media only screen and (max-width: 1000px) {
    .otherbody {
        width: 89vw;
    }
}
.otherbody {
    background-color: rgb(3, 9, 14);
    color: rgb(202, 255, 58);
    outline: 0.1em solid rgb(9, 15, 22);
    font-family: monospace;
    font-size: 1em;
    text-align:left;
    height: auto;
    margin: auto;
    margin-top: 1em;
    box-sizing: border-box;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 0.02em;
    padding-top: 0.02em;

    position:relative;
    border-radius: 1em;


    outline-width: 0.1rem;
    outline-color: rgb(81, 255, 0);
    outline-style: dashed;
}

@media only screen and (max-width: 1000px) {
    .title {
        background-color: rgb(19, 28, 41);
        color: rgb(0, 0, 0);
        display: grid;
        font-family: 'Courier Prime';
        text-shadow:
        -0.02em -0.02em rgb(53, 90, 255),
        0.02em -0.02em rgb(53, 90, 255),
        0.02em 0.02em rgb(53, 90, 255),
        -0.02em 0.02em rgb(53, 90, 255);
        text-align: center;
        font-size: clamp(32px, 7.5vw, 55px);
        overflow: hidden;
        white-space: nowrap;
        padding-top: 0.12em;
    }
    .hometitle::before {
        content: " WELCOME TO TENET ";
    }
    .portofoliotitle::before {
        content: " PORTOFOLIO ";
    }
}

@media only screen and (min-width: 1000px) {
    .title {
        background-color: rgb(19, 28, 41);
        color: rgb(0, 0, 0);
        display: grid;
        font-family: 'Courier Prime';
        text-shadow:
        -0.02em -0.02em rgb(53, 90, 255),
        0.02em -0.02em rgb(53, 90, 255),
        0.02em 0.02em rgb(53, 90, 255),
        -0.02em 0.02em rgb(53, 90, 255);
        text-align: center;
        font-size:clamp(40px, 4.4vw, 55px);
        padding-top: 0.12em;
    }
    .hometitle::before {
        content: "--------- WELCOME TO TENET ---------";
    }
    .portofoliotitle::before {
        content: "--------- PORTOFOLIO ---------";
    }
}

::selection {
    background-color: rgb(56, 56, 105);
    color: greenyellow;
}

.hidetext {
    color: grey;
}

.quotetext {
    color: rgb(255, 72, 0)
}

.italictext {
    font-style: italic;
}

.hoverable img:hover {
    filter: invert(10%) sepia(100%) saturate(7900%) hue-rotate(170deg) brightness(99%) contrast(113%);
}

.collage {
    padding-top: 0.5em;
    width: max-content;
    height: max-content;
    margin: auto;
    display:flex;
    flex-flow: wrap;
    align-items: center;
    gap: 0.2em;
}

.drawing p img {
    height: clamp(1.1em, 1.2vw, 1.5em);
    margin-left:clamp(0.3em, 0.4vw, 0.6em);
}

.drawing p {
    font-family: Helvetica;
    font-weight: bold;
    font-style: italic;
    font-size: clamp(10px, 1.1vw, 18px);
    color: rgb(255, 232, 232);
}
.drawing img {
    width: auto;
}
@media only screen and (min-width: 1000px) {
   .drawing img {
        height: 22vw;
    } 
    .pccollage {
        display: block;
    }
    .mobilecollage {
        display: none;
    }
}
@media only screen and (max-width: 1000px) {
    .drawing img {
        height: clamp(80px, 35vw, 400px);
    }
    .pccollage {
        display: none;
    }
    .mobilecollage {
        display: block;
    }
}

.infobox {
    margin-left: 3vw;
}
.infoboxtitle a img {
    outline-width: 0px;
    height: clamp(1.1em, 1.2vw, 1.5em);
    width: auto;
}

.infoboxtitle {
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 0.5em;

    font-family: Helvetica;
    font-weight: bold;
    font-style: italic;
    font-size: clamp(1.1em, 1.2vw, 1.4em);
    color:white;
}

@media only screen and (max-width:1000px) {
    .infobox img {
        height: clamp(10em, 69vw, 30em);

        outline-width: 0.01em;
        outline-color: rgb(255, 242, 239);
        outline-style: solid;
    }
}
@media only screen and (min-width:1000px) {
    .infobox img {
        height: clamp(13em, 16vw, 26em);

        outline-width: 0.01em;
        outline-color: rgb(255, 242, 239);
        outline-style: solid;
    }
}

.infoboxcontext {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgb(218, 200, 216);
    margin-left: 0.5em;
}
@media only screen and (max-width:1000px) {
    .infoboxcontext {
        font-size: 1em;
        width: clamp(10em, 60vw, 30em);
        text-align: center;
        margin:auto;
    }
}
@media only screen and (min-width:1000px) {
    .infoboxcontext {
        font-size: clamp(0.4em, 1.1vw, 1.2em);
        width: clamp(4em, 20vw, 15em);
    }
}

.infoboxcontent {
    display: flex;
    align-items: center;
}

.pad {
    padding-top: 2em;
}

.copyright {
    font-size:clamp(1px, 3vw, 15px);
    position:fixed;
    bottom: 0;
    animation: color-change 1s infinite;
    background-color: inherit;
    display: grid;
    padding-right: 4px;
    padding-top: 1px;
}
@keyframes color-change {
    0% { color: rgb(112, 1, 62); }
    25% { color: rgb(9, 37, 116); }
    50% { color: rgb(1, 116, 100); }
    75% { color: rgb(9, 37, 116); }
    100% { color: rgb(112, 1, 62); }
}
.copyright::before {
    content: "© 2025 Mutoxicated. All rights reserved."
}

a {
    color: rgb(226, 198, 43);
}