/* dotgothic16-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DotGothic16';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dotgothic16-v21-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* This is like the variable stuff okay? COmmon poop outtline. VVV DOwn here. ok?*/

:root {
    --common-small-outline: 4px;
    --common-poop-outline: 6px;
    --common-small-outline-color:#ff3c00;
    --common-poop-outline-color:#360c04;
}

* {

    box-sizing: border-box;
}
html {
    font-family: 'DotGothic16';

}

/* this is uhh the like Background and stuff Okay? */

body {
    padding:15%;
    padding-top:2%;
    padding-bottom:0;
    margin:0;
    background-color: #360c04;
}

/* The paddingler */

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom:1%;
}

a {
    color:#FF3C00;
}

/* r the transparent part*/

.main-container {
    margin:0;
    background-color: rgba(255, 60, 0, 0.75);
    border-top-left-radius:250px;
    outline:var(--common-poop-outline) solid var(--common-poop-outline-color);
    margin-top:1%;
    padding:2%;
}

/* Teeextttt Big white part */

.main-content {
    margin:0;
    background-color: white;
    outline:var(--common-poop-outline) solid var(--common-poop-outline-color);
    margin-left:auto;
    padding:6%;
    padding-top:1%;
    padding-bottom:10px;
    overflow:auto;
    height:75vh;
    width: calc(98% - 250px);
}

/* if you dont know what this is you need to fucking lock in Ok? */

.image-left {
    float:left;
    margin:0;
    background-color: white;
    outline:var(--common-small-outline) solid var(--common-poop-outline-color);
    margin-top:0;
    width:250px;
    background-image: url("./imagesiguess/imorangingit.jpg");
    height:75vh;
    border-top-left-radius:240px; 
}

/* even rabbit girl kris doesnt know what this is */

#top-div {
    margin-left:auto;
    width:fit-content;
}

/* Ughhghggggg Navigaterr Oh hi regretevator crems shop */

.nav-bar {
    display:flex;
    text-align:center;
     flex-direction: row;
     align-items:center;
}

.nav-item {
    display:inline-block;
    background-color: white;
    color: black;
    outline:var(--common-small-outline) solid var(--common-small-outline-color);
    text-decoration: none;
    min-width:calc(5vw + 20px);
    padding:10px;

}

.active {
    background-color: #ff3c00;
    color:white;
}

.nav-img {
    width:88px;
    height:31px;
    display:inline-block;
    text-decoration: none;
    margin-top:7px;
    margin-left:10px;
}