@media screen and (max-width: 700px) { section.intro,section.menu,section.interview,section.info,section.pages,section.vr{ margin: 0 5%; } div.header h1{ font-size: 20px; } section.intro p,div.flex-item p,h2,details.qa p,section.vr{ font-size: 15px; } .header p img{ object-fit: cover; width:75%; } div.flex-container { display: block; } div.flex-container div.flex-item{ width: 100%; text-align: center; } div.flex-item img{ width: 65vw; } div.flex-item h3{ font-size: 5vw; } div.border p{ font-size: 10px; } } body{ background-color: #ffd8e3; color:#333333; font-family: serif; -webkit-text-size-adjust: 100%; } .header p img{ object-fit: cover; width:75%; } .header{ text-align: center; } .intro,.menu,.interview,.info,.pages,.vr{ margin: 16px 15%; } .intro div,.menu div,.info div,.pages div{ text-align: left; } p{ font-size: 1.3em; } h1{ font-size: 50px; display: inline-block; } h2{ color:#e5e5e5; background-color: #785757; border: 1px solid #785757; border-radius: 0 13px 13px 0; display: inline-block; padding: 1px 5px; } h3{ font-size: 1.5em; background:linear-gradient(transparent 60%, #d3a68c 0%); display: inline-block; margin:5px 0; } section.vr div>div{ text-align: center; } section.vr div>div iframe{ width: 64vw; height: 36vh; } .flex-container{ display: flex; } .flex-item img{ width: 90%; } .flex-container div.flex-item{ width: 50%; align-items: center; } .qa { max-width: 100%; margin-bottom: 5px; border-bottom: 2px solid #d6dde3; } .qa summary { display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1em 2em 1em 3em; color: #333333; cursor: pointer; } .qa summary::before, .qa p::before { position: absolute; left: 1em; font-size: 1.3em; } .qa summary::before { color: #daac50; content: "Q"; } .qa summary::after { transform: translateY(-25%) rotate(45deg); width: 7px; height: 7px; margin-left: 10px; border-bottom: 3px solid #777; border-right: 3px solid #777; content: ''; transition: transform .5s; } .qa[open] summary::after { transform: rotate(225deg); } .qa p { position: relative; transform: translateY(-10px); opacity: 0; margin: 0; padding: .3em 3em 1.5em; color: #2f2f2f; transition: transform .5s, opacity .5s; } .qa[open] p { transform: none; opacity: 1; } .qa p::before { color: #ff8d8d; line-height: 1.2; content: "A"; } .border{ border: #333333 dashed; padding:20px; }