body {
    font-family: sans-serif;
    background-color: #282a36;
    transition: all 1s ease-in-out;

    width: 98vw;
    height: 98vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#example {
    display: none;
    height: 10em;
    width: auto;
}

.control {
    display: flex;
    flex-direction: row;
}

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30em;
    height: 20em;
    border-radius: 50%;
    background-color: rgba(224, 224, 224, 0.171);
    border: .1em solid rgba(255, 255, 255, 0.192);
}
/* Grip */

.grip {

    width: 5.5em;
    height: 16em;

    background: linear-gradient(0deg,red, red 97%, transparent 98%);

    display: flex;
    flex-direction: column;
    justify-content: end;
}

.leftGrip {
    transform: rotate(10deg);
    border-radius: 50% 45% 50% 50%;
}

.rightGrip {
    transform: rotate(-10deg);
    border-radius: 45% 50% 50% 50%;
}

.bottomGrip {
    width: 5.5em;
    height: 8em;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(0deg, rgb(37, 0, 0), darkred 20%, darkred 90%, red);
    display: flex;
    flex-direction: row;
}

.semiCircle {
    width: 5.5em;
    height: 6em;
    border-radius: 0 0 2.5em 2.5em;
    background-color: red;
}

/* Shoulder of the grip (Button) */

.shoulder {
    z-index: -1;

    width: 3.5em;
    height: 1.2em;

    background-color: gray;

    margin-bottom: .5em;

    transform: rotate(-10deg);
}

.shoulderLeft {
    margin-left: 1em;
    
    border-radius: 70% 40% 0 0;
    
    background: linear-gradient(-10deg, red 30%, gray 45%, gray 65%, rgb(56, 56, 56) 80%, rgb(56, 56, 56) 100%);
}

.shoulderLeft:hover {
    transform: rotate(-10deg) scale(.9);
}

.shoulderRight {
    margin-left: .9em;

    background: linear-gradient(10deg, red 30%, gray 45%, gray 65%, rgb(56, 56, 56) 80%, rgb(56, 56, 56) 100%);

    transform: rotate(10deg);
    border-radius: 40% 70% 0 0;
}

.shoulderRight:hover {
    transform: rotate(10deg) scale(.9);
}
/* Red squares to solve blank spaces problem */

.topLeftRed {
    width: .4em;
    height: .4em;

    z-index: -2;

    background-color: red;

    transform: rotate(-10deg);

    position: absolute;
    margin-bottom: 14.8em;
    margin-left: 4.2em;
}


.topRightRed {
    width: .4em;
    height: .5em;

    z-index: -2;

    background-color: red;

    transform: rotate(10deg);

    position: absolute;
    margin-bottom: 14.7em;
    margin-left: 1em;
}

.leftRed {
    width: .6em;
    height: 1.5em;
    background-color: red;

    transform: rotate(-10deg);
    position: absolute;

    margin-left: 5.3em;
    margin-bottom: 6.99em;
}

.rightRed {
    width: 1em;
    height: 2.6em;
    background: linear-gradient(0deg, red, red 59%, transparent 60%);
    transform: rotate(10deg);
    
    position: absolute;

    margin-right: 5em;
    margin-bottom: 6.89em;
}

/* Buttons */

.buttonCircle {
    margin-top: .5em;

    width: 6em;
    height: 6em;
    border-radius: 50%;

    background-color: red;
    justify-self: flex-start;
    align-self: flex-start;

    border: .1em solid lightcoral;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

/* Left Buttons */

.buttonCircleLeft {
    transform: rotate(-10deg);
}

.tag {
    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;
}

.tag:hover {
    transform: scale(.9);
}

.tagButton {
    width: 0;
    height: 0;

    border-top: .7em solid transparent;
    border-bottom: .7em solid transparent;
    
    border-left: .7em solid black;

    margin: 0;
    padding: 0;
}

.tagSquare {
    width: 1.2em;
    height: 1.4em;
    background: black;

    border-radius: 20% 0 0 20%;
}

.tagSquare:hover + .tagButton {
    border-left: .7em solid rgb(48, 47, 47);
}

.tagSquare:hover {
    background-color: rgb(48, 47, 47);
}

.tagArrow {
    width: 0;
    height: 0;

    border-top:  .4em solid transparent;
    border-bottom:  .4em solid transparent; 
    
    border-right: .4em solid lightcoral; 
    
    margin-right: .2em;
}

.topTag {
    transform: rotate(90deg);
}

.topTag:hover {
    transform: rotate(90deg) scale(.9);
}

.rightTag {
    transform: rotate(180deg);
}

.rightTag:hover {
    transform: rotate(180deg) scale(.9);
}

.bottomTag {
    transform: rotate(270deg);
}

.bottomTag:hover {
    transform: rotate(270deg) scale(.9);
}

.spacerLeft {
    width: 1em;
}

.spacerCenterLeft {
    width: .3em;
}


/* Right Buttons*/

.buttonCircleRight {
    transform: rotate(10deg);
}

.button {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;

    background-color: black;

    display: flex;
    justify-content: center;
    align-items: center;
}

.button:hover {
    background-color: rgb(48, 47, 47);
    transform: scale(.9);
    cursor: pointer;
}

.button img {
    width: 1.5em;
    height: auto;
}

.spacerRight {
    width: 2em;
}

.xButton {
    filter: invert(35%) sepia(90%) saturate(3203%) hue-rotate(220deg) brightness(102%) contrast(98%);
}

.oButton {
    filter: invert(47%) sepia(53%) saturate(4519%) hue-rotate(335deg) brightness(99%) contrast(97%);
}

.triangleButton {
    filter: invert(57%) sepia(92%) saturate(409%) hue-rotate(90deg) brightness(101%) contrast(99%);
}

.squareButton {
    filter: invert(44%) sepia(8%) saturate(7498%) hue-rotate(295deg) brightness(103%) contrast(105%);
}

/* Middle */

.middle {
    margin-top: .5em;
    width: 14em;
    height: 9em;
    background-color: red;

    padding-left: .7em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.topSide {
    display: flex;
    justify-content: space-around;
}

.oval {
    z-index: 1;

    margin: .2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.ovalButton {
    width: 1rem;
    height: 1.6rem;
    border-radius: 40%;

    background-color: black;
}

.ovalButton:hover {
    background-color: rgb(48, 47, 47);
    transform: scale(.9);
    cursor: pointer;
}

.leftOvalButton {
    margin-left: .3em;
}
.rightOvalButton {
    margin-right: .3em;
}

.ovalText {
    margin: 1.5em 0 0 0;
    font-size: xx-small;
    color: gray;
}

#touchpad {
    width: 9em;
    height: 5em;
    border-radius: 10%;
    background: linear-gradient(0deg, black 70%, black 78%, gray 90%, black 100%);
}

/* Bottom Side */

.bottomSide {
    margin-top: .5em;
    display: flex;
    justify-content: space-between;
}

/* Center */

.center {
    display: flex;
    
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.dots {
    width: 2em;
}

.PSButton {
    margin-top: .5em;

    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;

    background-color: black;

    display: flex;
    justify-content: center;
    align-items: center;
}   

.PSButton:hover {
    background-color: rgb(48, 47, 47);
    transform: scale(.9);
    cursor: pointer;
}

.logo {
    width: 1em;
    height: auto;
    filter: invert(100%) sepia(0%) saturate(7493%) hue-rotate(115deg) brightness(96%) contrast(106%);
}

/* Analogics */

.analogCircle {
    width: 5em;
    height: 5em;
    border-radius: 50%;

    background-color: red;
    border: .1em solid lightcoral;
    display: flex;
    justify-content: center;
    align-items: center;
}

.analog {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;

    background-color: black;
    background: radial-gradient(black, black 40%, white 45%, black 48%, white 100%);
}

.leftAnalog {
    margin-right: .8em;
}

.rightAnalog {
    margin-left: .8em;
}

/* Television */

.television {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 3em;
}

.screen {
    width: 18em;
    height: 10em;
    background-color: #373946;
    border: .5em solid black;
    box-shadow: inset 0 0 10px #000000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.legTelevision {
    width: .6em;
    height: 1em;
    background-color: black;
}

.footTelevision {
    width: 4em;
    height: 2em;
    border-radius: 50%;
    background: radial-gradient(black 25%, gray);

    display: flex;
    justify-content: center;
}

.legInsideFootTelevision {
    width: .6em;
    height: 1em;

    background-color: black;
}

#hdmiText {
    margin-bottom: 7em;
    margin-left: 13.5em;

    width: 3.5em;
    height: 2em;

    background-color: #282a36;
    color: white;

    display:flex;
    align-items: center;
    justify-content: center;

    border-radius: .2em;
    border: .1em solid orangered;
}

#hdmi {
    width: 6em;
    height: 3em;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background-color: #282a36;
    color: white;

    font-size: xx-small;

    border-radius: .2em;
    border: .1em solid #555e92;

    position: absolute;
    animation: blinker 1s infinite;
}

@keyframes blinker {
    60% {
    opacity: 0;
    }
}

#PS4Start {
    height: 10em;
    width: auto;
    display: none;
}