@import url('https://fonts.googleapis.com/css?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css?family=Philosopher&display=swap');

body{
  font-family: 'Archivo Black', sans-serif;
  background:#010DF2;
  color: #F2C201;
}

h1{
  font-size: 200px;
  margin-bottom: 50px;
  margin-top: 0px;
  display: inline-block;
}


a{
color: black;
font-family: 'Philosopher', sans-serif;
}

a:hover{
color: #F2C201;
text-shadow: 2px 2px 5px black;
}

#result{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
padding:10px;
}

.subtitle{
  text-decoration: underline;
  display: inline-block;
  margin-right: 20px;
}

.info{
  padding: 10px;
  margin-bottom: 100px;

}


.item{
  position:relative;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border-radius: 5px;
  background-color: rgb(250,250,250);
  overflow: hidden;
  padding: 10px;
  -webkit-box-shadow: 3px 3px 22px -8px rgba(0,0,0,0.36);
-moz-box-shadow: 3px 3px 22px -8px rgba(0,0,0,0.36);
box-shadow: 3px 3px 22px -8px rgba(0,0,0,0.36);

}

.item h3{
color: black;
word-wrap: break-word;
}

.item:hover{
  transform: translate(5px, -5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.8);
}



.wrap{

background-color: white;
height: 40vh;
min-height: 250px;
/*width: 100%; height: 100%; */
padding: 0; 
overflow: hidden;
scroll-behavior: none;
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;

  }
.frame{
   width: 200%; height: 80vh; border: 0px solid black;
   min-height: 500px;
  -ms-zoom: 0.5;
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.5);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: 0 0;


}


@media screen and (max-width: 750px) {
h1{
  font-size: 100px;
}

#result{
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
}

}