@font-face {
    font-family: soria; /* set name */
    src: url(/s1/Soria.ttf) format("truetype");
}

.neo{
  position: fixed;
  bottom: 2vh;
    display: flex;
  justify-content: center;
  height: 5vh;
  }

h1 {
    text-align: center;
    font-family: soria, serif;
}

p {
    font-size: small;
    text-align: center;
    font-family: soria, serif;
}

::-webkit-scrollbar {
    width: 5px;
    height: 80%;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive layout - tablet and widescreen, open notebook */
@media screen and (min-width: 900px) {
    body {
        display: block;
        margin: auto;
        font-family: "Dosis", sans-serif;
        text-align: center;
        background-color: #0c0808;
        justify-content: center;
        align-items: center;
    }

    .container {
        display: inline-grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 1px;
        width: 70vw;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: fixed;
        background-image: url(s1/desktop.png);
        background-size: contain;
        background-repeat: no-repeat;
        min-height: 98vh;
        max-height: 95vh;
        overflow: hidden;
    }
    
        header {
        grid-column: span 2 / span 2;
        overflow: hidden;
        font-family: soria, serif; /* use font */
        position: relative;
        margin-top: 1.8em;
    }

    
    
    header p {
        font-family: serif;
        margin-top: -12px;
        font-size: 9px;
    }


    .overlay-img {
        position: absolute;
        top: -1vh;
        left: 12vw;
        width: 20vw;
        object-fit: contain;
        opacity: 0.8;
        z-index: 1;
    }
    
  .title {
        margin-top: 0.2em;
        font-size: 40px;
    }

    #div {
        height: 1em;
        display: flex;
        justify-content: center;
    }

    .thumb{
        width: 10vw;
    }
    aside {
        margin-top: 5vh;
        grid-column: span 2 / span 2;
        grid-row: span 4 / span 4;
        grid-row-start: 2;
        height: fit-content;
        padding: 10px;
    }

    main {
        grid-column: span 2 / span 2;
        grid-row: span 5 / span 5;
        grid-column-start: 3;
    }

    :root {
        --total: 6; /* How many items */
        --radius: 3vw; /* Circle size */
        --i: 1;
        --is: 25;
        overflow: hidden;
    }

    .news-item img {
        height: 10vh;
    }

    .news-item {
        display: inline-block;
        width: fit-content;
        max-width: 100%;
        padding: 1rem;
        height: 10vh;
    }

    .con {
        overflow-y: scroll;
        width: 90%;
        height: 90%;
        margin: 5%;
        rotate: 1deg;
    }

    .con div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    iframe {
        -moz-transform: scale(0.60, 0.60);
        -webkit-transform: scale(0.60, 0.60);
        -o-transform: scale(0.60, 0.60);
        -ms-transform: scale(0.60, 0.60);
        transform: scale(0.60, 0.60);
        position: absolute;
        padding: 0px;
        top: 6vh;
        right: -6vw;
        width: 25vw;
        height: 69vh;
    }

    .callingcards {
        background-image: url("/s1/card.png");
        background-size: cover;
        padding: 0;
        margin-left: 85vw;
        top: 10vh;
        width: 15vw;
        height: 80vh;
        position: relative;
    }


    blockquote {
        background-color: darkgreen;
        height: 100%;
    }

    .tumblr {
        position: fixed;
        margin-top: 1vh;
        height: 20vh;
        top: 60%;
        width: 27vw;
        left: 5vw;
        border: solid black 1px;
        border-radius: 0.5em;
    }

    .circle {
        position: relative;
        width: calc(var(--radius) * 2.5);
        height: calc(var(--radius) * 2.5);
        top: 10vh;
        margin: 1vh auto 1vw 15vw;
        color: white;
        border-radius: 50%;
        background-image: url("/s1/unnamed.png");
        background-size: cover;
    }

    .sketch {
        width: 15vw;
        position: fixed;
        top: 15vh;
        height: 70vh;
        background-image: url("/s1/sss.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .sketch div {
        max-height: 100%;
        display: block;
        margin: auto;
        margin-top: 10%;
        width: 80%;
        height: 80%;
    }

    .sketch img {
        max-height: 100%;
        display: block;
        margin: auto;
        width: 80%;
    }
    .item {
        position: absolute;
        width: calc(1.5vw * var(--i));
        height: calc(1.5vw * var(--i));
        border-radius: 50%;
        border: 1px solid black;
        display: grid;
        place-items: center;
        font-weight: 600;
        font-family: soria, serif;
        --angle: calc(270deg / var(--total) * var(--i));

        transform:
                rotate(var(--angle))
                rotate(var(--angle))
                translateX(calc(-2 * var(--radius)))
                translateY(calc(2.1 * var(--radius)))
                rotate(calc(6 * var(--angle)));
    }

    .inside {
        color: #0c0808;
        --angle: calc(270deg / var(--total) * var(--i));
        transform: rotate(calc(-8 * var(--angle)));
        white-space: nowrap;    }
    
    
}


/* Responsive layout -mobile stacked */
@media screen and (max-width: 900px) {
    .column {
        width: 100%;
    }

    body {
        font-family: "Dosis", sans-serif;
        text-align: center;
        background-image: url("/sl/mobile.png");
        background-size: 100%;
    }

    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(11, 1fr);
        gap: 8px;
    }
    
}