/* Fonts */

/* Strenuous Light Italics */
@font-face {font-family: "StrenuousW05-LightItalic"; src: url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.eot"); src: url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.woff") format("woff"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0e38769e2e475da7a42a0562a025f946.svg#StrenuousW05-LightItalic") format("svg"); }
/* Silicone Light Italics */
@font-face {font-family: "SiliconeW00-LightItalic"; src: url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.eot"); src: url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.woff") format("woff"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/598587e85cf85afd0a23ce09493e1c47.svg#SiliconeW00-LightItalic") format("svg"); }
/* LogoSans Regular */
@font-face {font-family: "LogoSans 8"; src: url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.eot"); src: url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.woff") format("woff"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0093225f0c0b7a29d67e6ab7b54eef8d.svg#LogoSans 8") format("svg"); }

/* body/etc */

.page-cage {
    height: 84vh;
    margin: 0px;
    border-width: 3.5vh;
    border-radius: 50px;
    border-style: solid;
    border-color: #fd7f1790;
    background-color:  #fca53a40
}

.main-head {
    border-style: hidden hidden solid hidden;
    border-width: 3.5vh;
    border-color: #fd7f1790;
    height: 80px;
    width: 100%
}

body {
    background-color: green;
    height: 100vh;
    width: auto;
    overflow: hidden;
    padding: 2vw;
    
    
     background-size: 
        100px 100px,
        100px 100px,
        400% 400%;
    background-image:
    linear-gradient(to right, #fca53a70 3px, transparent 1px),
    linear-gradient(to bottom, #fca53a70 3px, transparent 1px),
    linear-gradient(-45deg, #d92a1a90, #fc683290, #d92a1a);
   
    
    animation: gradient 7s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0 0, 0 0, 0% 50%;
    }
    50% {
        background-position: 0 0, 0 0, 100% 50%;
    }
    100% {
        background-position: 0 0, 0 0, 0% 50%;
    }
}

.page-nav {
    height: 90vh;
    background-image: url(img_files/heartguys/heartguy%202.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

a:any-link {
    text-decoration: none;
    color: #ffc878
}

a:hover {
    color: #feb845
}

h1 {
    font-family: "StrenuousW05-LightItalic", sans-serif;
    text-align: center;
    color:aquamarine;
    background-color: antiquewhite;
    border-style: dashed;
    border-width: thick;
    border-radius: 10px
}

h2 {
    font-family: "StrenuousW05-LightItalic", sans-serif;
    text-align: center;
    font-size: 2.5em
}

p {
    font-family: "SiliconeW00-LightItalic", sans-serif;
}

.work-star {
    width: 20%;
    transform: rotate(-20deg);
    position: absolute;
    top: 20%;
    right: 15%
}

.work {
    text-align: right;
    position: absolute;
    top: 40%;
    right: 10%
}

#workwith1::after {
    content: "\a";
    white-space: pre
}

.shop-star {
    transform: rotate(1680deg);
    width: 25%;
    position: absolute;
    left: 5%;
    right: 110%;
    top: 40%
}

.shop {
    position: absolute;
    top: 55%;
    left: 13%
}

.about {
    position: absolute;
    top: 30%;
    left: 30%
}

.about-star {
    width: 15%;
    position: absolute;
    top: 60%;
    left: 75%
}

/** For smaller screens **/
/* For Mobile */ 
@media screen and (max-width: 540px) {
    .page-cage {
        height: 84vh;
        margin: 0px;
        border-width: 2vh;
        border-radius: 50px;
        padding-bottom: 3vh
    }
    .main-head {
        border-style: hidden hidden solid hidden;
        border-width: 2vh;
        border-color: #fd7f1790;
        height: 80px;
        width: 100%
    }
    .page-nav {
        width: 105vw;
        margin-right: 10vh;
        margin-left: -15vw;
        margin-top: 18vh
    }
    .page-cage {
        height: 88%
    }
    .shop {
        top: 50%
    }
    .about {
        top: 25%
    }
    .work {
        top: 35%
    }
}
/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 1024px) and (min-height: 700px) {
    .page-nav {
        width: 105vw;
        margin-right: 10vh;
        margin-left: -13vw;
        margin-top: 11vh
    }
    .page-cage {
        height: 88%
    }
    .shop {
        top: 63%;
        left: 10%
    }
    .shop-star {
        left: 7%;
        top: 35%
    }
}
/** end of smaller screens **/

/* OLD screens settings
@media screen and (max-width: 699px) {
    .page-nav {
        width: 105vw;
        background-position: ;
        margin-right: 10vh;
        margin-left: -16.5vw;
        margin-top: 11vh
    }
    .page-cage {
        height: 88%
    }
    .shop {
        top: 35%
    }
    .about {
        top: 10%
    }
    .work {
        top: 20%
    }
} */






/* 

            first version stars

.work-star {
    width: 70%;
    transform: rotate(-20deg);
    position: absolute;
    top: 15%;
    right: 5%
}

.shop-star {
    transform: rotate(-10deg);
    width: 60%;
    position: absolute;
    left: 1%;
    right: 110%;
    top: 25%

.about-star {
    transform: rotate(180deg);
    width: 50%;
    position: absolute;
    top: 60%;
    bottom: 90%;
    left: 35%
}

*/