/* definições da página*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

html,body{ 
	width:100%;
	height:100%;
	background:#201c1c;
}

body {
  font-family: 'Courier New', Courier, monospace, sans-serif;
  overflow: auto;
}

 .container1 {
  display: flex;
  justify-content: center; 
  align-items: end; 
  height: 450px; 
}

.image {
  height: 60%; /* Define a altura da imagem para ocupar 100% do container */
  max-width: 100%; /* Mantém a proporção da imagem */
}

.container2 {
  display: flex;
  justify-content: center; 
  align-items: end; 
  height: 150px; 
}

.basic1 {
  height: 50%;
  max-width: 100%; /* Mantém a proporção da imagem */
  color: white;
  font-size: 20pt;
  text-align: center; 
}

.container3 {
  display: flex;
  justify-content: center; 
  align-items: end; 
  height: 25px; 
}

.basic2 {
  height: 100%;
  max-width: 100%; /* Mantém a proporção da imagem */
  color: white;
  font-size: 20pt;
  text-align: center; 
}

.container4 {
  display: flex;
  justify-content: center;
  align-items: end; 
  height: 80px; 
  gap: 1%;
}

.bot {
  height: 75px;
  background-color: transparent;
  border: none;
  opacity: 0.7;
}

/* animação dos botões */
.bot:hover{
  opacity: 1;
  height: 80px;
}

/* mudanças nos parágrafos*/
p {
  margin-bottom: 2%;
}

/* texto das listas */
.exp {
  color: white;
  font-size: 12pt;
  margin-bottom: 10px;
  text-align: center;
}

.sub {
  color: white;
  font-size: 15pt;
  margin-bottom: 10px;
  text-align: center;  
}

/* detalhes da guia superior */
.guia {
  background-color:transparent;
  font-family: 'Courier New', Courier, monospace, sans-serif;
  border: none;
  color: white;
  font-size: 15pt;
  border-left: 4px;
  transition: .4s;
}

/* animação da guia */
.guia:hover{
  padding-left: 30px;
  border-left: 4px solid gray;
  color: gray;
}

/* divisões dos botões de alternância de página*/
h1 {
  background: transparent;
  position: absolute;
  top: 2%;
  left: 2%;
}

h3 {
  background: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 8%;
  left: 2%;
}

/* paineis de expansão */
.collapsible {
  background-color: #2A2929;
  font-family: 'Courier New', Courier, monospace, sans-serif;
  color: white;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 25px;
}

.active, .collapsible:hover {
  background-color: #373434;
}

.content {
  padding: 0 60px;
  display: block;
  overflow: hidden;
  background-color: #2A2929;
}

/* imagem ao lado de texto */
.img-text-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.img-text-container img {
  margin-right: 20px;
}

/* definições dos videos */
.video-wrapper {
  width: 75%;
  height: 40%;
  margin: 20px auto; 
}

.img-center {
  width: 60%;
  height: 40%; 
  margin: 20px auto; 
}

.logos {
  width: 45px;
  height: 45px;
}

/* corrigir layout para diferentes dimensões */
@media screen and (max-width: 1100px) {
  .container1 {
    height: 350px; 
  }
  
  .container2 {
    height: 250px; 
  }
  
  .container3 {
    height: 50px; 
  }
  
  .container4 {
    height: 60px; 
  }
  
  .bot {
    height: 60px;
  }
  
  .bot:hover{
    height: 65px;
  }
}

@media screen and (max-width: 550px) {
  .container2 {
    height: 350px; 
  }
  
  .container3 {
    height: 100px; 
  }

}

@media screen and (max-width: 350px) {
 
  .container2 {
    height: 500px; 
  }

}