@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@100..900&display=swap');    
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Press Start 2P', system-ui;;
}

body{
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #212224;
    color: #ecf0f1;
}

main{
    padding: 20px;
    position: fixed;
    z-index: 1;
    padding-left: calc(82px + 20px);
}


.container{
    width: 100%;
    height: 100vh;
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  
}


#container_vagle{
    width: 80%;
    height: 100vh;
    /* background-color: #000; */
    position: relative;
    left: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 110px;
}


.foto_vangle{
    width: 50%;
   height: 100vh;

}

.img1{
    
    clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/Super-Mario-World.png);     /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
.img2{
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/Michael-Jackson-Moonwalker.png);     /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img3{
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/Castlevania_Symphony_of_the_Night_Capa.png);     /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.img4{
    
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      background-image: url(../Images/Zelda_a_link_to_the_past.png);    /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img5{

    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/metroid_nintendinho.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

form{
    width: 30%;
    height: 100vh;
    /* background-color: #ff0000; */
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
     clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

form > p{
    width: 80%;
    height: auto;
    margin-bottom: 30px;
}


.input-container{
    width: 80%;
    height: auto;
    /* border: 2px solid #ffff; */
    
}

form > .input-container  > input{
    width: 80%;
    height: 50px;;
    margin-bottom: 20px;
    padding-left: 20px;
    outline: none;
    border: 6px solid;

    border-image: linear-gradient(to top left,red,blue)2;
    /* background:linear-gradient(to top left,rgb(0, 213, 255),rgb(137, 0, 121)); */
    /* background-clip: text; */
    color: #000000;
    
}
form > .input-container  > input[type="password"]{
    width: 80%;
    height: 50px;;
    margin-bottom: 20px;
    padding-left: 20px;
    outline: none;
    border: 6px solid;
    border-image: linear-gradient(to top left,red,blue)2;
    /* background:linear-gradient(to top left,rgb(0, 213, 255),rgb(137, 0, 121)); */
    /* background-clip: text; */
    color: #000000;
    
}

form > .input-container  > svg{
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
}


form > .div_aceopr{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    margin-top: 30px;
    flex-direction: column;
}

form > .div_aceopr > a{
   word-wrap: break-word;
}



/* From Uiverse.io by Navarog21 */ 
.submit-button {
  width: 10em;
  position: relative;
  height: 3.5em;
  border: 3px ridge #6600ff;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.submit-button::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #212121;
  transition: 0.5s;
  transform-origin: center;
}

.submit-button::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #212121;
  transition: 0.5s;
}

.submit-button:hover::before, button:hover::after {
  transform: scale(0)
}

.submit-buttonton:hover {
  box-shadow: inset 0px 0px 25px #6600ff;
}

.Nome{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    left: 600px;
    right: 570px;
    top: -60px;
 
}


@media (min-width:320px) and (max-width:740px){
    
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@100..900&display=swap');    
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Press Start 2P', system-ui;;
}

body{
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #212224;
    color: #ecf0f1;
}

main{
    padding: 20px;
    position: fixed;
    z-index: 1;
    padding-left: calc(82px + 20px);
}


.container{
    width: 100%;
    height: 100vh;
    /* border: 2px solid red; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  
}


#container_vagle{
    width: 80%;
    height: 100vh;
    /* background-color: #000; */
    position: relative;
    left: 0px;
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-left: 110px;
}


.foto_vangle{
    width: 50%;
   height: 100vh;

}

.img1{
    
    clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/Super-Mario-World.png);     /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
}
.img2{
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/Michael-Jackson-Moonwalker.png);     /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img3{
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/Castlevania_Symphony_of_the_Night_Capa.png);     /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.img4{
    
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
      background-image: url(../Images/Zelda_a_link_to_the_past.png);    /* coloque aqui o endereço da imagem */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img5{

    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-image: url(../Images/metroid_nintendinho.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

form{
    width: 100%;
    height: 100vh;
    /* background-color: #ff0000; */
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
     clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

form > p{
    width: 80%;
    height: auto;
    margin-bottom: 30px;
}


.input-container{
    width: 80%;
    height: auto;
    /* border: 2px solid #ffff; */
    
}

form > .input-container  > input{
    width: 80%;
    height: 50px;;
    margin-bottom: 20px;
    padding-left: 20px;
    outline: none;
    border: 6px solid;

    border-image: linear-gradient(to top left,red,blue)2;
    /* background:linear-gradient(to top left,rgb(0, 213, 255),rgb(137, 0, 121)); */
    /* background-clip: text; */
    color: #000000;
    
}
form > .input-container  > input[type="password"]{
    width: 80%;
    height: 50px;;
    margin-bottom: 20px;
    padding-left: 20px;
    outline: none;
    border: 6px solid;
    border-image: linear-gradient(to top left,red,blue)2;
    /* background:linear-gradient(to top left,rgb(0, 213, 255),rgb(137, 0, 121)); */
    /* background-clip: text; */
    color: #000000;
    
}

form > .input-container  > svg{
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
}


form > .div_aceopr{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    margin-top: 30px;
    flex-direction: column;
}

form > .div_aceopr > a{
   word-wrap: break-word;
}



/* From Uiverse.io by Navarog21 */ 
.submit-button {
  width: 10em;
  position: relative;
  height: 3.5em;
  border: 3px ridge #6600ff;
  outline: none;
  background-color: transparent;
  color: white;
  transition: 1s;
  border-radius: 0.3em;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.submit-button::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #212121;
  transition: 0.5s;
  transform-origin: center;
}

.submit-button::before {
  content: "";
  transform-origin: center;
  position: absolute;
  top: 80%;
  left: 3%;
  width: 95%;
  height: 40%;
  background-color: #212121;
  transition: 0.5s;
}

.submit-button:hover::before, button:hover::after {
  transform: scale(0)
}

.submit-buttonton:hover {
  box-shadow: inset 0px 0px 25px #6600ff;
}

.Nome{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    left: 600px;
    right: 570px;
    top: -60px;
 
}

}