/* globals */
@font-face {
    font-family: pix;
    /* set name */
    src: url(pix8.ttf);
    /* url of the font */
}


html {
    font-size: 12px;
    overflow-y: scroll;
    overscroll-behavior: contain;
}

body h1 {
    font-family: "pix", sans-serif;
    font-size: 2rem;
    line-height: 3rem;
}

body {
    font-family: "pix", sans-serif;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    cursor: url(img/cursor.png), auto;	  
}

.title:hover, a:hover, summary:hover{
   cursor: url(img/pointer.png), auto;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: black;
}

::selection {
  color: white;
  background: black;
}

hr {
    display: block;
    height: 14px;
    border: 0;
    border-bottom: 2px dotted #000;
    max-width: 512px;
    margin-bottom: 30px;
}

a {
    color: #000;
    font-weight: bold;
    padding: 0;
    margin: 0;
}


/* div classes */

.detail {
    margin-top: 10px;
    display: inline-block;
    padding: 15px 20px;
    background-color: #fff;
    border: 2px solid;

}

.detail[open] {
    background-color: #000;
    border: 2px solid;
    border-color: #000;
    color: #fff;
}

details>summary {
    display: block;
    cursor: pointer;
}

details>summary::after {
    content: ' ▷';
}

details[open]>summary::after {
    content: ' ▽';
}

.detailsinside {
    padding: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    border: 2px dotted;

}

.detailsinside[open] {
    border: 2px solid;
}



.summarytitle {
    padding-bottom: 10px;
}

.summarytitle span {
    padding: 10px;
    font-size: 1.5rem;
    font-weight: bold;
}


.contents {
    display: flex;
    margin-top: 1em;
    gap: 1em;
}

.contention {
    display: none;
    /*hidden by default*/
    min-height: 50px;
    margin: 0 auto;
    width: 100%;
}

details[data-for="uxui"][open]~.contents #uxui,
details[data-for="digitaldesign"][open]~.contents #digitaldesign,
details[data-for="printdesign"][open]~.contents #printdesign,
details[data-for="photography"][open]~.contents #photography {
    display: block;
}

.after-content {
    margin-top: 1em;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    background-image: url("img/bg1.gif");
    background-color: #cccccc;
    padding: 1rem 2rem .5rem 2rem;
    background-size: 8px;
    
}

.title * {
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    padding: 1.3rem 0 0rem 0;
    display: block;
}

.nav {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    line-height: 2rem;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 5;
    border-bottom: 2px solid;
}

.titlebar {

    height: 36px;
    max-width: 1028px;
    margin: 0 auto;
    background-image: url(img/titlebarline.gif), url(img/closebtn.gif), url(img/titlebar.gif);
    background-position: left, right, left;
    background-repeat: no-repeat, no-repeat, repeat;
    box-shadow: 8px 8px black;
    padding: 0rem 3rem 0rem 3rem;


}

.titlebar p {
    padding: 10px 20px 10px 20px;
    font-weight: bold;
    text-align: center;
    font-size: 12px;
}

.titlebar span {
    display: inline;
    position: relative;
    top: 2px;
    background-color: #fff;
    padding: 6px 20px;
}

.content {
    text-align: center;
    display: block;
    background-color: #fff;
    max-width: 100%;
    padding: 2rem 3rem 2rem 3rem;

    box-shadow: 8px 8px black;
    border: 2px solid black;
    border-top-style: none;
    line-height: 2rem;
    max-width: 1024px;
    margin: 0 auto;
    margin-bottom: 2rem;
}

.content img {
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    padding: rem 0 2rem 0;
    display: block;
}

.contentinside {
    text-align: center;
    display: block;
    background-color: #fff;
    max-width: 100%;
    padding: 1rem 3rem 3rem 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 8px 8px black;
    border: 2px solid black;
    line-height: 2rem;
}

.contentinside img {
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    padding: 1rem 0 1rem 0;
    display: block;
}

.imageinside {
    object-fit: cover;
    width: 600px;
    height: 200px;
    object-position: top;
    display: block;
}

.imageinside2 {
    object-fit: cover;
    width: 300px;
    height: 200px;
    object-position: top;
    display: block;
}

.imageinside3 {
    object-fit: cover;
    width: 300px;
    height: 300px;
    object-position: top;
    display: block;
}

.grid {
    display: grid;
    grid-template-columns: auto;
    padding: 0px;
}

.grid img {
    max-height: 800px;
}

.grid video {
    max-width: 800px;
}


.grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: top;
    padding: 10px;
    column-gap: 20px;
}

.grid2 img {
    max-height: 1400px;
}

.grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%/1, max(138px, 100%/3)), 1fr));
    align-items: top;
    padding: 10px;
    column-gap: 20px;
}

.grid div {
    padding: 10px;
    text-align: center;
}

.paragraph1 {
    padding-top: 20px;
}

.paragraph2 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.paragraph3 {
    padding-bottom: 20px;
}

.button {
    background-color: #000;
    width: max-content;
    margin: 0 auto;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
}


.footer {
    padding: 2rem;
    text-align: center;
    margin: 0 auto;
    overflow: auto;
    line-height: 2rem;
    border-top: 2px solid;
}

/* Breakpoint stuff */
@media only screen and (max-width: 600px) {
  


    .content {
        padding: 2rem 1rem 2rem 1rem;
        box-shadow: 0px 0px black;
        margin-bottom: 15px;

    }

    .contentinside {
        padding: 2rem .4rem 0rem .4rem;
        box-shadow: 0px 0px black;
        border-bottom: none;
        border-left: none;
        border-right: none;
    }

    .titlebar {
        height: 36px;
        background-image: url(img/titlebarline.gif), url(img/closebtn.gif), url(img/titlebar.gif);
        background-position: left, right, left;
        background-repeat: no-repeat, no-repeat, repeat;
        box-shadow: 0px 0px black;


    }

    .detailsinside {
        padding: 20px 10px 20px 10px;
        border: 2px dotted;
        border-left: none;
        border-right: none;
    }

    .detailsinside[open] {
        border: 2px dotted;
        border-left: none;
        border-right: none;

    }

    .imageinside {
        object-fit: cover;
        width: 150px;
        height: 150px;
        object-position: top;
        display: block;
    }

    .imageinside2 {
        object-fit: cover;
        width: 150px;
        height: 150px;
        object-position: top;
        display: block;
    }

    .imageinside3 {
        object-fit: cover;
        width: 150px;
        height: 150px;
        object-position: top;
        display: block;
    }

    .detail {
        width: 150px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .container {
        max-width: 1024px;
        margin: 0 auto;
        background-image: url("img/bg1.gif");
        background-color: #cccccc;
        padding: 1rem 0rem 1rem 0rem;
    }


    hr {
        display: none;
    }
}