body {
    width: 100%;
    margin: auto;
    background: #f5d7af;
    color: blue;
}

header {
    background: #f5d7af;
    color: blue;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.text {
    position: absolute;
    top: -20px;
    left: 150px;
    transform: rotate(-15deg);
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-size: 50px;
    font-style: normal;
    color: red;
}

.definition {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

h2 {
    color: blue;
    text-shadow: 1px 1px black;
}

.container {
    position: relative;
    width: 200px;
    height: 200px;
}


main {
    padding-top: 50px;
}

/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {

.container {
    position: relative;
    width: 200px;
    height: 200px;
}

.face {
    width: 300px;
    height: 200px;
}

.text {
    position: absolute;
    top: -40px;
    left: 100px;
}


}