Skydrifa/README.md

## README.md

      
    Raw
  

              README.md
            
          
    There is two problems:
#1 When inspect the footer does not belong with the page and it not shrink the page height.
#1.1 Footer text not being responsive with the page
#2 Header when reducing the space between them are not the same.
#2.1 The image header (dots) need to be always at the same size independentment the viewport.
SOLUTIONS_?

  
## index.html
<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="description" content="The Google">
            <meta name="keywords" content="Google Unmasked">
            <meta name="author" content="Alexandra Freitas">
            <link href="http://fonts.cdnfonts.com/css/arial-nova" rel="stylesheet">
            <link rel="stylesheet" href="style_GOOGLE.css">
            <link rel="icon" type="image/png" href="https://www.freepngimg.com/thumb/google/67060-play-photos-search-google-account-png-file-hd.png">

            <title> Google Mask </title>

        </head>

        <body>
             <div class="container">
                              <div class="header">
                                   <nav>
                                        <ul>
                                            <li class="text"><a href="#gmail">Gmail</a></li>
                                            <li class="text"><a href="#images">Images</a></li>
                                            <li class="grid"><a><svg class="gb_Xe" focusable="false" viewBox="0 0 24 24"><path style="fill:#5f6368;" d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg></a></li>
                                            <li> <a class="signbutton"> Submit UPI </a>  </li>
                                        </ul>
                                   </nav>
                              </div>
                      <center class="page-main">

                            <div class="motto">
                              <h1> One account. All Data for Google.</h1>
                                <h3> Google is your friend.</h3>
                            </div>
                              <div class="logo">
                              <img alt="Google" src="https://i.imgur.com/jv7Xsgc.png" onmouseover=”this.src=’https://i.imgur.com/DBokENW.png'” onmouseout=”this.src=’https://i.imgur.com/jv7Xsgc.png'” border=”0″ alt=””/>

                            </div>
                            <div class="bar">
                                <a class="search"><svg class="search" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill:#5f6368;" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></a>
                              <input class="searchbar" type="text" placeholder="Give me your free data (UPI)" onblur="this.placeholder = 'Enter paid Keywords'" title="Search">
                              <a class="image"> <svg class="voice" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z" fill="#4285f4"></path><path d="m11 18.08h2v3.92h-2z" fill="#34a853"></path><path d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z" fill="#f4b400"></path><path d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z" fill="#ea4335"></path></svg></a>
                            </div>

                            <div class="buttons">
                              <button class="button" type="button">Digital Footprint</button>
                              <button class="button" type="button">I'm Feeling Money</button>
                             </div>

                            <div class="concept">
                                 <details>
                                     <summary> Concept Work </summary>
                                     <p> <i style="font-size: 1.5em;"> "The masterful use of deceptive rhetoric and purposeful cultural malpractice." </i> <br> by Shoshana Zuboff</p>
                                        <p> Users are no longer ends in themselves, but means for the purposes of others. Google found out that we are worth less than other people's bets on our future behavior. The discovery of the behavioral surplus company sells the forecasts for targeted advertising. It is the beginning of surveillance capitalism. google ignored the moral and legal content of individual decision rights and turned the situation on to technological opportunism and unilateral power. We are not the product but sources of supply of raw materials.</p>
                                      <br> <summary>Our Mission</summary>
                                     <p>It is up to us to make the digital future of our home. We will have to decide. we will have to decide who decides. This is our struggle for a human future.</p>
                                 </details>
                            </div>
                      </center>
                             <div class="footer">
                                    <ul>
                                        <li > Portugal </li>
                                        <li ><a href="#gmail">No Privacy </a></li>
                                        <li  ><a href="#images"> No Terms </a></li>
                                         <li ><a href="#gmail"> A Matter of Business </a></li>
                                        <li ><a href="#images"> Advertising all of the Time $ </a></li>
                                    </ul>
                             </div>
              </div>
        </body>
</html>

## main.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Sora:wght@400;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Sora:wght@400;600;700&display=swap);
@import url("http://fonts.cdnfonts.com/css/arial-nova");
/* Display purposes */

html,
* {
  margin: 0; /*for reset page for all browsers */
  padding: 0;
  box-sizing: border-box;
  font-weight: normal; /*for reset pre-def of type */
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Sora", "Inter", "Quicksand", Arial;
  font-style: normal;
  font-size: 100%;
  display: block;
  min-height: 960px;
  height: 100%;
  min-width: 960px;
  width: 100%;
  max-width: 960px;
  overflow-x: hidden;
  text-rendering: optimizeSpeed;
  min-height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100wv;

  position: absolute;
}

.header {
  color: #3c4043;
  font-family: "Arial Nova Light", sans-serif;
  display: flex;
  height: 60px;
  width: 100%;
}

.header ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  top: 10px;
  right: -40px;
  justify-content: flex-start;
  width: 25%;
  min-width: 350px;
  list-style-type: none;
  overflow: hidden;
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
  width: auto;
}

li a {
  color: #000;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 1em;
  width: auto;
}

.text {
  width: 20%;
}
.grid {
  width: 12%;
  top: 2px;
}

.signbutton {
  background-color: #4885ed;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 10px 18px;
  height: 40px;
}

.footer {
  display: block;
  color: #3c4043;
  opacity: 50%;
  max-height: 550px;
  box-sizing: border-box;
  width: 100%;
  font-family: "Arial Nova Light", sans-serif;
  display: flex;
  height: 60px;
  background-color: #f2f2f2;
  flex-direction: row;
}

.footer p {
  display: flex;
  padding-left: 10px;
  float: right;

  flex-basis: 100%;
}

.footer ul {
  display: flex;
  float: right;
  flex-direction: row;
  align-items: center;
  /* position: absolute; não usar absolute para corrigir blocos se não não fica responsivo */
  justify-content: flex-end;
  padding-right: 10px;

  top: 10px;
  right: -40px;
  list-style-type: none;
  overflow: hidden;
}

.footer li {
  display: list-item;
  text-align: -webkit-match-parent;
  width: auto;
}
.footer li:nth-child(1) {
  align-content: flex-start;
  align-items: flex-start;
  flex-basis: 60%;
}
.footer li a {
  flex-basis: 40%;
  color: #000;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 1em;
  width: auto;
}

.page-main {
  display: inline-block;
  height: auto;  /* não centrar no html  */
  flex: 1;
}

/*
.page-main {
	display: inline-block;
	height:auto;
	max-height:600px;
	position:absolute;
	flex: 0;
	}
*/

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }

  .header-right {
    float: none;
  }
}

.motto {
  margin-top: 110px;
  color: #3c4043;
  font-family: "Arial Nova Light", sans-serif;
}
.logo {
  width: 472px;
  margin-top: 100px;
  margin-bottom: 20px;
  max-width: 100%;
}

.bar {
  margin: 0 auto;
  width: 40%;
  border-radius: 30px;
  border: 1px solid #dcdcdc;
  min-width: 600px;
}
.bar:hover {
  box-shadow: 1px 1px 8px 1px #dcdcdc;
}
.bar:focus-within {
  box-shadow: 1px 1px 8px 1px #dcdcdc;
  outline: none;
}
.searchbar {
  height: 45px;
  border: none;
  width: 90%;
  font-size: 16px;
  outline: none;
  color: black;
  font-color: #dfe1e5;
  opacity: 50%;
}
.searchbar:focus {
  color: black;
}

placeholder {
  font-color: #dfe1e5;
  opacity: 50%;
  padding-left: 10px;
}

input:focus::placeholder {
  font-color: #dfe1e5;
  opacity: 50%;
  padding-left: 15px;
  color: transparent;
}

input.searchbar {
  padding-left: 15px;
}

.search {
  width: 4%;
  position: relative;
  right: -5px;
  top: 5px;
}
.voice {
  width: 4%;
  position: relative;
  left: -7px;
  top: 7px;
}

.buttons {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: #f5f5f5;
  border: none;
  text-align: center;
  color: #3c4043;
  font-size: 1.1em;
  padding: 10px 20px;
  margin: 5px;
  margin-right: 10px;
  border-radius: 4px;
  outline: none;
  width: 12%;
  min-width: 200px;
  display: inline-block;
}

.button:hover {
  border: 1px solid #c8c8c8;
  box-shadow: 0.3px 0.3px 1.5px #c8c8c8;
  padding: 9px 19px;
}
.button:focus {
  border: 1px solid #4885ed;
  padding: 9px 19px;
}

/* Minimize Things */

details {
  font-family: "Arial Nova", sans-serif;
  display: block;
  margin-top: 20px;
  font-color: #dfe1e1;
  line-height: 2 em;
}
.concept {
  display: block;
}

details p {
  font-family: "Inter", sans-serif;
  font-style: normal;
  opacity: 50%;
  width: 50%;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  padding-top: 1%;
  line-height: 1.5em;
}

summary {
  transition: background 0.75s ease;
  width: 100%;
  outline: 0;
  cursor: pointer;
  opacity: 70%;
}
summary i {
  font-size: 1em;
}

img:hover {
  content: url("https://i.imgur.com/DBokENW.png");
  width: 372px;
  max-width: 100%;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="The Google">
	<meta name="keywords" content="Google Unmasked">
	<meta name="author" content="Alexandra Freitas">
	<link href="http://fonts.cdnfonts.com/css/arial-nova" rel="stylesheet">
	<link rel="stylesheet" href="style_GOOGLE.css">
	<link rel="icon" type="image/png" href="https://www.freepngimg.com/thumb/google/67060-play-photos-search-google-account-png-file-hd.png">

	<title> Google Mask </title>

	</head>

	<body>
	<div class="container">
	<div class="header">
	<nav>
	<ul>
	<li class="text"><a href="#gmail">Gmail</a></li>
	<li class="text"><a href="#images">Images</a></li>
	<li class="grid"><a><svg class="gb_Xe" focusable="false" viewBox="0 0 24 24"><path style="fill:#5f6368;" d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg></a></li>
	<li> <a class="signbutton"> Submit UPI </a> </li>
	</ul>
	</nav>
	</div>
	<center class="page-main">

	<div class="motto">
	<h1> One account. All Data for Google.</h1>
	<h3> Google is your friend.</h3>
	</div>
	<div class="logo">
	<img alt="Google" src="https://i.imgur.com/jv7Xsgc.png" onmouseover=”this.src=’https://i.imgur.com/DBokENW.png'” onmouseout=”this.src=’https://i.imgur.com/jv7Xsgc.png'” border=”0″ alt=””/>

	</div>
	<div class="bar">
	<a class="search"><svg class="search" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill:#5f6368;" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></a>
	<input class="searchbar" type="text" placeholder="Give me your free data (UPI)" onblur="this.placeholder = 'Enter paid Keywords'" title="Search">
	<a class="image"> <svg class="voice" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z" fill="#4285f4"></path><path d="m11 18.08h2v3.92h-2z" fill="#34a853"></path><path d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z" fill="#f4b400"></path><path d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z" fill="#ea4335"></path></svg></a>
	</div>

	<div class="buttons">
	<button class="button" type="button">Digital Footprint</button>
	<button class="button" type="button">I'm Feeling Money</button>
	</div>

	<div class="concept">
	<details>
	<summary> Concept Work </summary>
	<p> <i style="font-size: 1.5em;"> "The masterful use of deceptive rhetoric and purposeful cultural malpractice." </i> <br> by Shoshana Zuboff</p>
	<p> Users are no longer ends in themselves, but means for the purposes of others. Google found out that we are worth less than other people's bets on our future behavior. The discovery of the behavioral surplus company sells the forecasts for targeted advertising. It is the beginning of surveillance capitalism. google ignored the moral and legal content of individual decision rights and turned the situation on to technological opportunism and unilateral power. We are not the product but sources of supply of raw materials.</p>
	<br> <summary>Our Mission</summary>
	<p>It is up to us to make the digital future of our home. We will have to decide. we will have to decide who decides. This is our struggle for a human future.</p>
	</details>
	</div>
	</center>
	<div class="footer">
	<ul>
	<li > Portugal </li>
	<li ><a href="#gmail">No Privacy </a></li>
	<li ><a href="#images"> No Terms </a></li>
	<li ><a href="#gmail"> A Matter of Business </a></li>
	<li ><a href="#images"> Advertising all of the Time $ </a></li>
	</ul>
	</div>
	</div>
	</body>
	</html>
	@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
	@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);
	@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Sora:wght@400;600;700&display=swap);
	@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Sora:wght@400;600;700&display=swap);
	@import url("http://fonts.cdnfonts.com/css/arial-nova");
	/* Display purposes */

	html,
	* {
	margin: 0; /for reset page for all browsers /
	padding: 0;
	box-sizing: border-box;
	font-weight: normal; /for reset pre-def of type /
	width: 100%;
	}

	body {
	margin: 0;
	padding: 0;
	font-family: "Sora", "Inter", "Quicksand", Arial;
	font-style: normal;
	font-size: 100%;
	display: block;
	min-height: 960px;
	height: 100%;
	min-width: 960px;
	width: 100%;
	max-width: 960px;
	overflow-x: hidden;
	text-rendering: optimizeSpeed;
	min-height: 100%;
	}
	.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100wv;

	position: absolute;
	}

	.header {
	color: #3c4043;
	font-family: "Arial Nova Light", sans-serif;
	display: flex;
	height: 60px;
	width: 100%;
	}

	.header ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: absolute;
	top: 10px;
	right: -40px;
	justify-content: flex-start;
	width: 25%;
	min-width: 350px;
	list-style-type: none;
	overflow: hidden;
	}

	li {
	display: list-item;
	text-align: -webkit-match-parent;
	width: auto;
	}

	li a {
	color: #000;
	display: block;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
	font-size: 1em;
	width: auto;
	}

	.text {
	width: 20%;
	}
	.grid {
	width: 12%;
	top: 2px;
	}

	.signbutton {
	background-color: #4885ed;
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 10px 18px;
	height: 40px;
	}

	.footer {
	display: block;
	color: #3c4043;
	opacity: 50%;
	max-height: 550px;
	box-sizing: border-box;
	width: 100%;
	font-family: "Arial Nova Light", sans-serif;
	display: flex;
	height: 60px;
	background-color: #f2f2f2;
	flex-direction: row;
	}

	.footer p {
	display: flex;
	padding-left: 10px;
	float: right;

	flex-basis: 100%;
	}

	.footer ul {
	display: flex;
	float: right;
	flex-direction: row;
	align-items: center;
	/* position: absolute; não usar absolute para corrigir blocos se não não fica responsivo */
	justify-content: flex-end;
	padding-right: 10px;

	top: 10px;
	right: -40px;
	list-style-type: none;
	overflow: hidden;
	}

	.footer li {
	display: list-item;
	text-align: -webkit-match-parent;
	width: auto;
	}
	.footer li:nth-child(1) {
	align-content: flex-start;
	align-items: flex-start;
	flex-basis: 60%;
	}
	.footer li a {
	flex-basis: 40%;
	color: #000;
	display: block;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
	font-size: 1em;
	width: auto;
	}

	.page-main {
	display: inline-block;
	height: auto; /* não centrar no html */
	flex: 1;
	}

	/*
	.page-main {
	display: inline-block;
	height:auto;
	max-height:600px;
	position:absolute;
	flex: 0;
	}
	*/

	@media screen and (max-width: 500px) {
	.header a {
	float: none;
	display: block;
	text-align: left;
	}

	.header-right {
	float: none;
	}
	}

	.motto {
	margin-top: 110px;
	color: #3c4043;
	font-family: "Arial Nova Light", sans-serif;
	}
	.logo {
	width: 472px;
	margin-top: 100px;
	margin-bottom: 20px;
	max-width: 100%;
	}

	.bar {
	margin: 0 auto;
	width: 40%;
	border-radius: 30px;
	border: 1px solid #dcdcdc;
	min-width: 600px;
	}
	.bar:hover {
	box-shadow: 1px 1px 8px 1px #dcdcdc;
	}
	.bar:focus-within {
	box-shadow: 1px 1px 8px 1px #dcdcdc;
	outline: none;
	}
	.searchbar {
	height: 45px;
	border: none;
	width: 90%;
	font-size: 16px;
	outline: none;
	color: black;
	font-color: #dfe1e5;
	opacity: 50%;
	}
	.searchbar:focus {
	color: black;
	}

	placeholder {
	font-color: #dfe1e5;
	opacity: 50%;
	padding-left: 10px;
	}

	input:focus::placeholder {
	font-color: #dfe1e5;
	opacity: 50%;
	padding-left: 15px;
	color: transparent;
	}

	input.searchbar {
	padding-left: 15px;
	}

	.search {
	width: 4%;
	position: relative;
	right: -5px;
	top: 5px;
	}
	.voice {
	width: 4%;
	position: relative;
	left: -7px;
	top: 7px;
	}

	.buttons {
	margin-top: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	}

	.button {
	background-color: #f5f5f5;
	border: none;
	text-align: center;
	color: #3c4043;
	font-size: 1.1em;
	padding: 10px 20px;
	margin: 5px;
	margin-right: 10px;
	border-radius: 4px;
	outline: none;
	width: 12%;
	min-width: 200px;
	display: inline-block;
	}

	.button:hover {
	border: 1px solid #c8c8c8;
	box-shadow: 0.3px 0.3px 1.5px #c8c8c8;
	padding: 9px 19px;
	}
	.button:focus {
	border: 1px solid #4885ed;
	padding: 9px 19px;
	}

	/* Minimize Things */

	details {
	font-family: "Arial Nova", sans-serif;
	display: block;
	margin-top: 20px;
	font-color: #dfe1e1;
	line-height: 2 em;
	}
	.concept {
	display: block;
	}

	details p {
	font-family: "Inter", sans-serif;
	font-style: normal;
	opacity: 50%;
	width: 50%;
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	padding-top: 1%;
	line-height: 1.5em;
	}

	summary {
	transition: background 0.75s ease;
	width: 100%;
	outline: 0;
	cursor: pointer;
	opacity: 70%;
	}
	summary i {
	font-size: 1em;
	}

	img:hover {
	content: url("https://i.imgur.com/DBokENW.png");
	width: 372px;
	max-width: 100%;
	}