* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

body {
    color: silver;
    background-color: black;
    font-size: 16px;
    line-height: 1;
    padding: 100px 40px 0 40px;
}

p {
    padding-bottom: 40px;
}

img {
    max-width: 100%;
}

img.center-on-screen {
    margin: 0 auto;
    width: 60%;
    max-width: 820px;
}

#content {
    display: block;
    margin: 0 auto;
    max-width: 900px;
}

.container {
    margin: 0 auto;
    width: 700px;
}

.background-grey {
    background-color: grey;
}

.background-yellow {
    background-color: yellow;
}

.relative {
    position: relative;
}

.clickspot {
    display: block;
    position: absolute;
    height: 100px;
    width: 100px;
    z-index: 1;
}

.clickspot.lefteye {
    top: 35%;
    left: 30%;
}

.clickspot.righteye {
    top: 35%;
    right: 30%;
}

.clickspot.nose {
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.clickspot.mouth {
    top: 66%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 200px;
}

.clickspot.face1 {
    top: 22%;
    left: 14%;
}

.clickspot.face2 {
    top: 27%;
    left: 45%;
    height: 120px;
}

.clickspot.face3 {
    top: 18%;
    right: 9%;
    height: 170px;
    width: 125px;
}

.clickspot.symbol1 {
    left: 23%;
    bottom: 9%;
    height: 50px;
    width: 50px;
}

.clickspot.symbol2 {
    left: 32%;
    bottom: 6%;
    height: 50px;
    width: 50px;
}

.clickspot.symbol3 {
    right: 27%;
    bottom: 8%;
    height: 50px;
    width: 50px;
}

.img-no {
    background: url(images/creepyface.jpg);
    background-size: 100%;
    position: relative;
    margin: 0 auto;
    height: 710px;
    width: 700px;
}

.img-left {
    float: left;
    width: 46%;
}

.img-right {
    float: right;
    width: 46%;
}

.strong {
    font-weight: 600;
}

.nopadding {
    padding: 0;
}

.text-large {
    font-size: 32px;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-dark {
    color: #696969;
}

.text-yellow {
    color: yellow;
}

.text-underline {
    text-decoration: underline;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.pulled {
    position: absolute;
    right:300px;
    font-size: 22pt;
    letter-spacing: 15px;
}

/* Zoom effect */

.zoom {
    width: 341px;
    height: 575px;
    overflow: hidden;
    position: relative;
}

.column {
    display: inline-block;
    margin: auto;
}


.zoom img {
    object-position: center;

    -webkit-transform: scale(1);
    transform: scale(1);

    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.zoom:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);

    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.columns {
    display: flex;
    gap: 15px;
}


.centered {
    display: block;
    margin: auto;
    position: relative;
}

#friendly-img {
    max-width: 60%;
}

.shape {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}


.holdit {
    background-color: #dc7033;
}

.shape-container:nth-child(2) {
    margin-left: -22%;
}

.shape-container {
    position: relative;
}

.shapes {
    margin-top: 50px;
}

.shape-container:nth-child(2) .CPTAG , .shape-container:nth-child(2) .CFTAG{
    /* background-color: rgba(255, 0, 0, 0.53); */
    width: 4%;
    height: 25%;
    top: 6%;
    right: 23.5%;
    position: absolute;
}


.shape-container:nth-child(3) .CPTAG, .shape-container:nth-child(3) .CFTAG {
    /* background-color: rgba(255, 0, 0, 0.53); */
    width: 4%;
    height: 90%;
    top: 13%;
    right: 46%;
    position: absolute;
}

.shape-container:nth-child(3) .PTAG {
    position: absolute;
    right: 8%;
    top: 44%;
    color: #d8cba4;
    font-size: 0.9em;
}

.shape-container:nth-child(1) .PTAG {
    position: absolute;
    right: 46%;
    top: 25%;
    color: #d8cba4;
    font-size: 0.9em;
    transform: rotate(-90deg);
}

.centered .CPTAG, .centered .CFTAG {
    /* background-color: rgba(255, 0, 0, 0.53); */
    width: 11.5%;
    height: 13%;
    bottom: 37%;
    right: 39%;
    position: absolute;
    transform: rotate(6deg);
}

.centered .PTAG {
    position: absolute;
    right: 28%;
    top: 20%;
    transform: rotate(20deg);
    color: transparent;
    text-shadow: 0 0 2.5px rgba(156, 156, 156, 0.726);
}

@media (max-width: 500px) {
    .centered .PTAG {
        font-size: 2vw;
        text-shadow: 0 0 2px rgba(108, 107, 107, 0.813)
    }

}

@media (max-width: 800px) {

    .shape-container:nth-child(3) .PTAG {
        font-size: 1.5vw;
    }

    .shape-container:nth-child(1) .PTAG {
        font-size: 1.5vw;
    }
}