/* CSS Variables */
:root {
  --primary: #ccc;
  --dark: #333;
  --light: #fff;
  --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

html {
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
   color: var(--dark);
}


body {
    background:  var(--light);
    margin: 30px 50px;
    line-height: 1.2;
}

img {
    width: 200px;
    height: 200px;
    border-radius:30px;  
}

.container {
    display: grid;  
    grid-template-areas:
     'content';
}

.content {
    display: grid;
    font-size: 1.2em;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

footer {
    text-align: center;
}

@media (max-width: 700px) {
.container {
    font-size: 0.9em;
}

@media (max-width: 500px) {
.container {
    font-size: 0.8em;
  }
}