/* start nav */

body {
    margin: 0px;
    margin-left: 50px;
    margin-right: 50px;
    font-family:
        Magnisa Sans,
        Verb,
        Helvetica;
    overflow: scroll;
}

.button {
    background-image: url(images/Portfolio/PortfolioBackground.png);
     border-width: 5px;
    border-style: double;
    border-color: black;
    border-radius: 5px;
    color: black;
    padding: 10px 34px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    margin-top: 20px;
    cursor: pointer;
}

table, th, td {
  border: 1px solid black;
}

.topnav {
    position: relative;
    overflow: hidden;
    margin-top: -80px;
}

.topnav a {
    float: left;
    color: black;
    text-align: center;
    padding: 35px 20px;
    text-decoration: none;
    font-size: 17px;
    font-family: "StaraBold";
    font-size: 1.25em;
    font-weight: 500;
    letter-spacing: 1px;
}

.topnav a:hover {
    color: #abc541;
}

.topnav-right {
    float: right;
    font-family: "Verb";
}

/* stuff for commission page */
.invisibox {
    margin: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.TOS {
    float: left;
    width: 100%;
    height: 250px;
    width: 350px;
    display: flex;
    justify-content: center;
    border-width: 5px;
    border-style: double;
    border-color: #feffee;
    border-radius: 5px;
    background-image: url(images/Portfolio/PortfolioBackgrounddark.png);
    background-size: cover;
    background-position: center;
    padding: 5px;
    font-family: "nintendo";
    font-size: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    margin: auto;
    margin-top: 20px;
    overflow-wrap: break-word;
    margin-left: 10px;
    margin-right: 10px;
}

.dodont {
    float: left;
    width: 100%;
    height: 250px;
    width: 250px;
    display: flex;
    justify-content: center;
    border-width: 5px;
    border-style: double;
    border-color: #feffee;
    border-radius: 5px;
    background-image: url(images/Portfolio/PortfolioBackgrounddark.png);
    background-size: cover;
    background-position: center;
    padding: 5px;
    font-family: "nintendo";
    font-size: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    margin: auto;
    margin-top: 20px;
    overflow-wrap: break-word;
    margin-left: 10px;
    margin-right: 10px;
}

.combox {
    margin: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    border-width: 5px;
    border-style: double;
    border-color: #feffee;
    border-radius: 5px;
    background-image: url(images/Portfolio/PortfolioBackgrounddark.png);
}

.commoption {
    width: 100%;
    height: 400px;
    width: 750px;
    display: flex;
    justify-content: center;
    border-width: 5px;
    border-style: double;
    border-color: black;
    border-radius: 5px;
    background-image: url(images/Portfolio/PortfolioBackground.png);
    background-size: cover;
    background-position: center;
    padding: 5px;
    font-family: "nintendo";
    font-size: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    margin: 10px;
    overflow-wrap: break-word;
    overflow: scroll;
}

.LIndexquietbox {
    float: left;
    width: 70%;
    display: block;
    margin-top: 20px;
    margin-right: 35px;
    font-family: Stara;
    overflow-y: auto;
    overflow-y: scroll;
    overflow-x: hidden;
}

.Indexquietbox {
    display: flex;
    flex-direction: column;
    float: left;
    width: 20%;
    height: 260px;
    font-family: Stara;
    overflow: hidden;
    margin-top: 30px;
}

.LIndexquietbox img {
    object-fit: cover;
    aspect-ratio: 1/1;
    transition: transform 0.2s;
    user-select: none;
}

.LIndexquietbox img:hover {
    transform: translateY(7.5px);
}

/*links*/
.sociallinks {
    color: black;
    text-align: center;
    font-family: Stara;
    font-size: 22px;
}

.sociallinks a:link {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

.sociallinks a:visited {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

.sociallinks a:hover {
    color: #abc541;
    background-color: transparent;
    text-decoration: underline;
}

/* Responsive navigation menu (for mobile devices) */
@media screen and (max-width: 600px) {
    .topnav a,
    .topnav-right {
        float: none;
        display: block;
    }

    .topnav-centered a {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }
}

/* fonts */

@font-face {
    font-family: Myfont;
    src: url("fonts/Myfont-Regular.ttf");
}

@font-face {
    font-family: PC98;
    src: url("fonts/pc-9800.ttf");
}

@font-face {
    font-family: "nintendo";
    src: url(https://dl.dropbox.com/s/8w4sembeqyz4rsq/Nintendo-DS-BIOS.ttf);
}
font {
    font-family: "nintendo";
}

@font-face {
    font-family: Stara;
    src: url("fonts/Stara-Medium.ttf");
}

@font-face {
    font-family: StaraBold;
    src: url("fonts/Stara-Bold.ttf");
}

@font-face {
    font-family: Nuklear;
    src: url("fonts/Nuklear.ttf");
}

@font-face {
    font-family: Dyspro;
    src: url("fonts/dyspro.ttf");
}

@font-face {
    font-family: Alucrads;
    src: url("fonts/Alucrads.otf");
}

@font-face {
    font-family: LifeFormBB;
    src: url("fonts/LifeFormBB.ttf");
}

@font-face {
    font-family: Naturaliste;
    src: url("fonts/Naturaliste.ttf");
}

@font-face {
    font-family: MusicDBZ;
    src: url("fonts/musicdbz.ttf");
}
@font-face {
    font-family: PunkKid;
    src: url("fonts/punk kid.ttf");
}
@font-face {
    font-family: AudioNugget;
    src: url("fonts/AudioNugget.ttf");
}

@font-face {
    font-family: Freestyle;
    src: url("fonts/Freestyle163Style2-Regular.otf");
}

@font-face {
    font-family: Protomo;
    src: url("fonts/Protomo.otf");
}

@font-face {
    font-family: ProtomoOutline;
    src: url("fonts/Protomo-Outline.otf");
}

@font-face {
    font-family: Alcemo;
    src: url("fonts/Alcemo-DEMO.otf");
}

/* purveyance */

.aboutext {
    color: #ffffff;
    text-align: center;
    font-family: Alcemo;
    font-size: 22px;
    margin: 20px;
}

/*stickers*/
#stickers {
    position: relative;
    overflow: visible;
}
#wrapper {
    max-width: 1000px; /* width of entire page - can be changed but i don't recommend anything bigger than 1000! got to make sure the page fits on the screen */
    max-height: 95%;
    width: fit-content;
    height: fit-content;
    width: -moz-fit-content;
    height: -moz-fit-content;
    margin: auto;
    overflow: visible;
}

.PPtopnav {
    position: relative;
    overflow: hidden;
    margin-top: -50px;
}

.PPtopnav a {
    float: left;
    color: #ffffff;
    text-align: center;
    padding: 35px 20px;
    text-decoration: none;
    font-size: 28px;
    font-family: "Alucrads";
    font-weight: 500;
    letter-spacing: 1px;
}

.PPtopnav a:hover {
    color: #aeaeae;
}

.PPtopnav-right {
    float: right;
    font-family: "Verb";
}